WebdriverIO - frame框架

HTML 程式碼中的 frame 框架由 frames/iframe 標籤表示。WebdriverIO 可以透過從主頁面切換到 frame 框架來處理 frame 框架。

frame 框架的方法

一些與 frame 框架一起使用的方法如下：

browser.switchToFrame('<frame id/index/locator>')

此方法用於將焦點從主頁面切換到 frame 框架。frame 框架的 ID、索引或定位器作為引數傳遞給此方法。

語法

語法如下：

browser.switchToWindow(x)

要將焦點從 frame 框架切換到主頁面，我們必須將 null 作為引數傳遞給 browser.switchToFrame 方法。

讓我們看看 frame 框架內元素的 HTML 程式碼，並獲取其中的文字 - BOTTOM。

上圖中高亮的標籤名為 frame，其 name 屬性的值為 frame-bottom。

首先，請按照“使用 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('Frames', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/nested_frames')  
      //switch to frame
      browser.switchToFrame($("frame[name='frame-bottom']"))
      //identify element with tagname
      const p = $('<body>')
      //get text inside frame
      console.log(p.getText() + ' - Text inside frame')   
      //switch to main page
      browser.switchToFrame(null)           
   });
});

執行配置檔案 - wdio.conf.js 檔案，命令為：

npx wdio run wdio.conf.js

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

您的計算機上將出現以下螢幕：

命令成功執行後，frame 框架內的文字 - BOTTOM 將列印到控制檯中。

列印頁面