WebdriverIO - CSS 定位器

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

為此，我們的首要任務是識別元素。我們可以為元素建立 CSS 以進行識別。下面討論了建立 CSS 表示式的規則。

CSS 的語法如下所示：

tagname[attribute='value']

這裡，標籤名是可選的。我們還可以專門使用 id 和 class 屬性來建立 CSS 表示式。

使用 id 時，CSS 表示式的格式應為 tagname#id。例如，input#txt [這裡 input 是標籤名，txt 是 id 屬性的值]。

使用 class 時，CSS 表示式的格式應為 tagname.class。

例如：

input.cls-txt 

這裡，input 是標籤名，cls-txt 是 class 屬性的值。

在 WebdriverIO 程式碼中，我們可以按以下格式指定元素的 CSS 表示式：

$('value of the css expression')

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

const p = $('value of the css expression')

讓我們識別下面圖片中突出顯示的文字並獲取其文字：

上面突出顯示元素的 CSS 應為 li.heading。

首先，請按照標題為“使用 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 CSS', function(){        
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with CSS then obtain text
      console.log($("li.heading").getText() + " - is the text.")
   });
});

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

npx wdio run wdio.conf.js

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

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

命令成功執行後，元素的文字 - 關於 Tutorialspoint 將列印在控制檯中。