WebdriverIO - Chai 斷言在 Web 元素上

Chai 是一個用於 Node 的斷言庫。它主要用於 BDD 和 TDD 框架。它可以輕鬆地與任何 JavaScript 測試框架整合。Chai 的官方文件可在以下連結中找到：

www.npmjs.com/package/chai

要安裝 Chai 並將其新增到 package.json 檔案中，請執行以下命令：

npm install --save-dev chai

有關 package.json 檔案的詳細資訊將在標題為“package.json”的章節中詳細討論。

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

安裝後，我們必須新增以下語句以在我們的程式碼中新增期望風格的 Chai。

require('chai').expect

語法

Chai 斷言的語法如下：

const c = require('chai').expect
c(p.getValue()).to.equal('subject')

讓我們實現一個 Chai 斷言，並驗證以下下拉列表中選擇的選項是否符合預期結果。

有關如何處理下拉列表的詳細資訊將在“處理下拉列表”章節中詳細討論。

首先，請按照“使用 WebdriverIO 的成功路徑流程”章節中的步驟 1 到 5 操作，步驟如下：

步驟 1 - 安裝 NodeJS。有關如何執行此安裝的詳細資訊在“使用 NodeJS 入門”章節中詳細介紹。

步驟 2 - 安裝 NPM。有關如何執行此安裝的詳細資訊在“NPM 的安裝”章節中詳細介紹。

步驟 3 - 安裝 VS Code。有關如何執行此安裝的詳細資訊在“VS Code 安裝”章節中詳細介紹。

步驟 4 - 建立配置檔案。有關如何執行此安裝的詳細資訊在“配置檔案生成”章節中詳細介紹。

步驟 5 - 建立一個規範檔案。有關如何執行此安裝的詳細資訊在“Mocha 安裝”章節中給出。

步驟 6 - 在建立的 Mocha 規範檔案中新增以下程式碼。

require('chai').expect
//import chai library
const c = require('chai').expect
describe('Tutorialspoint application', function(){
   //test case
   it('Drodowns with Chai Assertion', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/tutor_connect/index.php')  
      //identify dropdown 
      const p = $("select[name='selType']") 
      //select by index
      p.selectByIndex(1)
      //get option selected
      console.log(p.getValue() + ' - option selected by index')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
      //select by visible text
      p.selectByVisibleText('By Subject')
      //get option selected
      console.log(p.getValue() + ' - option selected by visible text')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('subject')
      //select by value attribute
      p.selectByAttribute('value', 'name')
      //get option selected
      console.log(p.getValue() + ' - option selected by attribute value')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
   });
});

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

npx wdio run wdio.conf.js

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

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

成功執行命令後，首先會在控制檯中列印使用選項索引 - name 選擇的選項的值。然後，會在控制檯中列印使用可見文字 - subject 選擇的選項的值。最後，會在控制檯中列印使用屬性值 - name 選擇的選項的值。

此外，我們還獲得了 PASSED 結果，表明應用於下拉列表的所有 Chai 斷言都已透過。

讓我們實現另一個 Chai 斷言，並驗證獲取的警報文字是否符合預期結果。

有關如何處理警報的詳細資訊將在“警報”章節中詳細討論。

首先，請按照“使用 WebdriverIO 的成功路徑流程”章節中的步驟 1 到 5 操作，步驟如下：

步驟 1 - 安裝 NodeJS。有關如何執行此安裝的詳細資訊在“使用 NodeJS 入門”章節中詳細介紹。

步驟 2 - 安裝 NPM。有關如何執行此安裝的詳細資訊在“NPM 的安裝”章節中詳細介紹。

步驟 3 - 安裝 VS Code。有關如何執行此安裝的詳細資訊在“VS Code 安裝”章節中詳細介紹。

步驟 4 - 建立配置檔案。有關如何執行此安裝的詳細資訊在“配置檔案生成”章節中詳細介紹。

步驟 5 - 建立一個規範檔案。有關如何執行此安裝的詳細資訊在“Mocha 安裝”章節中給出。

步驟 6 - 在建立的 Mocha 規範檔案中新增以下程式碼。

//import chai library
const c = require('chai').expect
// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Alerts with Chai Assertion', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/javascript_alerts')  
      //identify element with xpath then click
      $("//*[text()='Click for JS Prompt']").click()
      //check if Alert is open
      console.log(browser.isAlertOpen())   
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //verify Alert text with Chai assertion
      c(browser.getAlertText()).to.equal("I am a JS prompt")
      //accept Alert
      browser.acceptAlert()
   });
});

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

npx wdio run wdio.conf.js

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

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

成功執行命令後，首先會在控制檯中列印 true，因為它是由 browser.isAlertOpen() 方法返回的。然後，會在控制檯中列印警報文字 - 我是一個 JS 提示。

此外，我們還獲得了 PASSED 結果，表明應用於警報文字的 Chai 斷言已透過。

列印頁面