WebdriverIO - 滾動操作

我們可以使用 WebdriverIO 的 scrollIntoView 方法執行滾動操作。此方法不接受任何引數，可以應用於瀏覽器物件或特定元素。

語法

語法如下：

const p = $('#loc')
p.scrollIntoView()

或者，

browser.scrollIntoView()

在下圖中，讓我們滾動到頁尾元素連結 - 幫助並點選它。

首先，請按照標題為“使用 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('Scroll', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')  
      //identify element 
      const e = $("=Helping")
      //scroll to element
      e.scrollIntoView()
      e.click()
      //get page title
      console.log(browser.getTitle() + ' - Page time after click')
   });
});

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

npx wdio run wdio.conf.js 

有關如何建立配置檔案的詳細資訊在標題為“wdio.conf.js 檔案”和“配置檔案生成”的章節中進行了詳細討論。

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

成功執行命令後，滾動後點擊連結 - 幫助 Tutorials Point - Tutorialspoint 獲取的頁面標題將列印在控制檯中。