WebdriverIO - 處理子視窗/彈出視窗

---

---

點選連結或按鈕可能會開啟一個新的子視窗。WebdriverIO 預設情況下控制主瀏覽器視窗，為了訪問子視窗中的元素，必須將 WebdriverIO 的控制權從主頁面切換到子視窗。

子視窗的方法

一些處理子視窗的方法如下：

browser.getWindowHandles()

此方法以列表的形式返回所有當前開啟的瀏覽器視窗的視窗控制代碼 ID。如果打開了兩個視窗，列表的零索引包含父視窗的控制代碼 ID，第一個索引指向子視窗的視窗控制代碼。

語法

語法如下：

var x = browser.getWindowHandles()

browser.getWindowHandle()

此方法返回當前聚焦的瀏覽器視窗的視窗控制代碼 ID。

語法

語法如下：

let l = browser.getWindowHandle()

browser.switchToWindow('<window handle id>')

此方法用於將焦點從一個瀏覽器視窗切換到另一個開啟的視窗，其視窗控制代碼 ID 作為引數傳遞給此方法。

語法

語法如下：

browser.switchToWindow(x)

在下圖中，點選“使用 Apple 帳戶登入”按鈕後，會開啟一個子視窗，其瀏覽器標題為“使用 Apple ID 登入”。讓我們嘗試切換到子視窗並訪問其中的元素。

首先，請按照標題為“使用 WebdriverIO 的正常流程”一章中的步驟 1 到 5 進行操作，步驟如下：

步驟 1 - 安裝 NodeJS。有關如何執行此安裝的詳細資訊，請參閱標題為“NodeJS 入門”一章。

步驟 2 - 安裝 NPM。有關如何執行此安裝的詳細資訊，請參閱標題為“NPM 安裝”一章。

步驟 3 - 安裝 VS Code。有關如何執行此安裝的詳細資訊，請參閱標題為“VS Code 安裝”一章。

步驟 4 - 建立配置檔案。有關如何執行此安裝的詳細資訊，請參閱標題為“配置檔案生成”一章。

步驟 5 - 建立規範檔案。有關如何執行此安裝的詳細資訊，請參閱標題為“Mocha 安裝”一章。

步驟 6 - 將以下程式碼新增到建立的 Mocha 規範檔案中。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Child Window', function(){    
      // launch url
      browser.url('https://secure.indeed.com/account/login')  
      //identify element then click
      $('#apple-signin-button').click()
      //get all window handle ids in list
      var l = browser.getWindowHandles()
      //switch to child window
      browser.switchToWindow(l[1])
      //get page title of child window
      console.log(browser.getTitle() + ' - Page title of child window')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(l[0])
      //get page title of parent window
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

使用以下命令執行配置檔案 - wdio.conf.js 檔案：

npx wdio run wdio.conf.js 

有關如何建立配置檔案的詳細資訊，請參閱標題為“wdio.conf.js 檔案”和“配置檔案生成”的章節。

您的計算機上將顯示以下螢幕：

成功執行命令後，首先會在控制檯中列印子視窗的頁面標題 - “使用 Apple ID 登入”，然後列印父視窗的頁面標題 - “登入 | Indeed 帳戶”。