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)

在下圖中，點選“點選此處”連結會開啟一個新標籤頁，瀏覽器標題為“新視窗”。讓我們切換到新標籤頁並訪問其中的元素。

首先，請按照標題為“使用 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('Tab windows', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/windows')  
      //identify element then click
      $('=Click Here').click()
      //get all window handle ids in list
      let w = browser.getWindowHandles()
      //switch to tab
      browser.switchToWindow(w[1])
      //get page title of tab
      console.log(browser.getTitle() + ' - Page title of tab')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(w[0])
      //get page title of parent
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

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

npx wdio run wdio.conf.js 

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

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

命令成功執行後，標籤視窗 - “新視窗”的頁面標題將列印到控制檯。然後，父視窗 - “網際網路”的頁面標題將列印到控制檯。