WebdriverIO - ID 定位器

一旦我們導航到一個網頁，我們必須與頁面上可用的網頁元素進行互動，例如點選連結/按鈕、在編輯框中輸入文字等等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別元素。我們可以使用元素的 id 屬性來識別它。它是一個非常有用的定位器，與所有其他定位器相比，它可以加快自動化測試的執行速度。

在 WebdriverIO 程式碼中，我們可以使用以下格式指定元素的 id 屬性值：

$('=#value of id attribute')

或者，我們可以將此表示式儲存在一個變數中，如下所示：

const p = $('=#value of id attribute')

讓我們識別下圖中突出顯示的元素並單擊它：

上圖中突出顯示的連結具有標籤名 - a 和 id 屬性值 - redirect。

首先，請按照“使用 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('Identify element with Id', function(){
      // launch url
      browser.url('https://the-internet.herokuapp.com/redirector')
      //identify element with id then click
      $("#redirect").click()
      //obtain page title
      console.log('Page title after click: ' + browser.getTitle())
   });
});

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

npx wdio run wdio.conf.js

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

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

成功執行命令後，點選“網際網路”後頁面的標題將列印在控制檯中。