WebdriverIO - 隱藏元素

WebdriverIO 可以處理隱藏元素。有時，子菜單隻有在將滑鼠懸停在主選單上時才會顯示。這些子選單最初使用 CSS 屬性 - display:none 隱藏。

在下圖中，將滑鼠懸停在“登入”選單上時，會顯示“登入”按鈕。

將滑鼠移出“登入”選單後，“登入”按鈕將隱藏。

首先，請按照“使用 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('Invisible Element', function(){    
      // launch url
      browser.url('https://www.amazon.com/')  
      //identify element then hover mouse
      const e = $("#nav-link-accountList")
      e.moveTo()
      browser.pause(2000)
      //click on hidden element
      $('=Sign in').click()
      //get page title
      console.log(browser.getTitle() + ' - Page title after click')
   });
});

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

npx wdio run wdio.conf.js

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

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

成功執行命令後，透過單擊隱藏的“登入”按鈕獲得的頁面標題 - Amazon 登入將列印到控制檯中。