WebdriverIO - 滑鼠操作

WebdriverIO 可以透過使用 moveTo 方法執行諸如將滑鼠懸停在元素上的操作。此方法將滑鼠移動到元素的中間。

語法

語法如下：

let p = $('#loc')
p.moveTo()

在下圖中，將滑鼠懸停在“滑鼠懸停”按鈕上時，會顯示“頂部”和“重新載入”按鈕。

將滑鼠移出“滑鼠懸停”按鈕後，“頂部”和“重新載入”按鈕會隱藏。

首先，請按照題為“使用 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('Mouse Operatio', function(){    
      // launch url
      browser.url('https://courses.letskodeit.com/practice')  
      //identify element then hover mouse
      const e = $(".dropbtn")
      //scroll to element then mouse hover
      e.scrollIntoView()
      e.moveTo()
      browser.pause(2000)
      //verify if sub-element display on hovering
      console.log($('=Top').isDisplayed())
   });
});

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

npx wdio run wdio.conf.js

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

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

成功執行命令後，布林值將列印到控制檯。這是 isDisplayed() 函式返回的值，如果頁面上顯示了元素，則返回 true。