WebdriverIO 快速指南

---

---

WebdriverIO - 簡介

WebdriverIO 可以幫助自動化針對使用 React、Angular、Polymer、Vue.js 等現代應用程式設計的任何測試。此外，它還可以用於 Android 和 iOS 平臺。

WebdriverIO 使用 Node.js 實現，自動化程式碼使用 JavaScript 編寫。它屬於 Selenium 的一部分。Selenium 的所有功能在 WebdriverIO 中都可用，此外還有一些可用於驗證的輔助斷言。

如今，大多數應用程式的前端都是使用 React、Angular 等 JavaScript 框架開發的。WebdriverIO 對於測試這些應用程式非常有用。

這是因為 WebdriverIO 的編碼也是用 JavaScript 完成的。此工具屬於 Selenium 的一部分，還有一些額外的 API。如果我們瞭解 Selenium，那麼學習 WebdriverIO 就很簡單了。

WebdriverIO 也可用於測試普通應用程式，但是如果我們使用 WebdriverIO 來驗證使用 React、Angular、Polymer、Vue.js 等實現的任何應用程式，我們可以在構建強大的框架方面獲得額外的優勢。

如果我們正在使用 JavaScript 建立 Selenium 測試，那麼 WebdriverIO 應該是最佳選擇。還有其他工具，例如基於 JavaScript 框架的 Cypress，但它不屬於 Selenium 的一部分。

如果我們關注過去幾年的 WebdriverIO 下載的 npm 趨勢，我們將觀察到 WebdriverIO 使用量的上升趨勢（如下連結所示）：

https://www.npmtrends.com/webdriverio

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

報告

WebdriverIO 生成的一些報告如下：

• Allure

• Spec

• JUnit

• HTML

• JSON

• Cucumber JSON

服務

WebdriverIO 提供的一些服務如下：

• Appium

• Docker

• Selenium 獨立伺服器

• ChromeDriver

• Firefox 配置檔案

• DevTools

測試框架

WebdriverIO 支援的一些測試框架如下：

• Cucumber

• Jasmine

• Mocha

WebdriverIO - 預備條件

WebdriverIO 的前提條件是需要一個編輯器來編寫 JavaScript 程式碼。為此，我們可以使用 Visual Studio Code。我們可以從以下連結下載它：

https://vscode.com.tw

步驟 1 - 根據我們擁有的本地作業系統（例如 macOS、Linux 或 Windows），我們需要選擇下載連結。

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

步驟 2 - 單擊“下載”按鈕後，將下載一個 zip 檔案。單擊此 zip 檔案，Visual Studio Code 應用程式應該可在機器上使用。

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

步驟 3 - 雙擊 Visual Studio Code，它將啟動並顯示歡迎頁面。您的計算機上將顯示以下螢幕：

WebdriverIO - 架構

WebdriverIO 架構包含以下元件：

• NodeJS

• WebdriverIO

• JavaScript

• JSON Wire 協議

• 服務

• 瀏覽器

• 應用程式

Nodejs 用於執行 JavaScript 執行時環境。它實際上是一個開源專案。WebdriverIO 基於 Nodejs 開發，JavaScript 是終端使用者使用 WebdriverIO 庫實現的指令碼。

因此，終端使用者實現的 JavaScript 透過 Nodejs 使用 WebdriverIO 將請求傳遞給服務（以 HTTP 命令的形式）。整個過程都是遵循 JSON Wire 協議完成的。

服務將請求傳送到 Chrome、Firefox 等瀏覽器，以對被測應用程式執行測試。因此，服務可以被稱為瀏覽器和自動化框架之間的中間層。

WebdriverIO - NodeJS 入門

WebdriverIO 的編碼使用 JavaScript 完成。為此，必須安裝 NodeJS，因為它是一個 JavaScript 引擎。只有安裝它之後，我們才能執行 WebdriverIO 測試。配置 NodeJS 的步驟如下：

步驟 1 - 使用以下連結啟動應用程式：

https://nodejs.com.tw/en/download/

步驟 2 - 根據我們使用的本地作業系統（Windows、Mac 或 Linux），單擊連結下載安裝程式。您的計算機上將顯示以下螢幕：

步驟 3 - 下載安裝程式後，單擊它。導航到 Node.js 安裝程式歡迎螢幕。單擊“繼續”。您的計算機上將顯示以下螢幕：

步驟 4 - 同意 Nodejs 的條款協議。您的計算機上將顯示以下螢幕：

步驟 5 - 單擊“安裝”。

步驟 6 - 顯示 Nodejs 安裝成功訊息後，單擊“關閉”。您的計算機上將顯示以下螢幕：

步驟 7 - 要檢查 Nodejs 是否已成功安裝，請開啟終端並執行以下命令：

node

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

應顯示機器中安裝的 Nodejs 版本。

WebdriverIO - NPM 安裝

安裝 Nodejs 後，我們必須建立一個 NPM 資料夾。NPM 實際上是用於編寫 JavaScript 測試的包管理器。NPM 的官方頁面可在以下連結中找到：

https://www.npmjs.com/search?q=webdriverio

啟動此頁面後，在搜尋框中輸入 WebdriverIO 並單擊“搜尋”，以獲取 WebdriverIO 的 npm 包。您的計算機上將顯示以下螢幕：

建立 NPM 專案

建立 NPM 專案的步驟如下：

步驟 1 - 在某個位置建立一個空資料夾，例如 webdriverIO。

步驟 2 - 開啟終端並從當前目錄移動到我們建立的空資料夾的目錄。

步驟 3 - 執行以下命令：

npm init -y

給出 y 引數是為了設定預設值。您的計算機上將顯示以下螢幕：

步驟 4 - 在步驟 3 中執行命令後獲得的輸出表明所有預設配置都已捕獲到 package.json 檔案中。它在我們步驟 1 中建立的資料夾 (名為 webdriverIO) 中生成。

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

此 package.json 包含我們使用 WebdriverIO 專案所需的所有依賴項。要獲取 NPM 下的任何包，我們可以參考以下連結：

https://www.npmjs.com/

WebdriverIO - VS Code 安裝

在本章中，讓我們瞭解如何在 WebdriverIO 中安裝 Visual Studio (VS) Code。

安裝 Visual Studio Code 的步驟如下：

步驟 1 - 導航到以下連結：

https://vscode.com.tw/

步驟 2 - 根據我們擁有的本地作業系統（例如 macOS、Linux 或 Windows），我們需要選擇下載連結。

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

步驟 3 - 單擊“下載”按鈕後，將下載一個 zip 檔案。下載此檔案完成後，單擊它，Visual Studio Code 應用程式應該可以使用。

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

步驟 4 - 雙擊它，Visual Studio Code 應用程式應該啟動並顯示歡迎頁面。

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

步驟 5 - 單擊“開啟資料夾”連結並匯入包含 package.json 檔案的資料夾。package.json 檔案的建立細節在標題為“NPM 安裝”的章節中詳細討論。

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

WebdriverIO - package.json

生成 package.json 檔案後，我們需要為 WebdriverIO 安裝其他 npm 包。package.json 檔案的建立細節在標題為“NPM 安裝”的章節中詳細討論。

NPM 登錄檔中 WebdriverIO 的必要包可在以下連結中找到：

https://www.npmjs.com/package/webdriverio

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

要安裝 WebdriverIO，我們必須從終端執行以下命令：

npm i webdriverio 

或

npm install webdriverio.

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

命令成功執行後，package.json 現在顯示已安裝的 WebdriverIO 版本。

如果專案中建立的 node_modules 資料夾包含 webdriverio 資料夾，我們可以驗證 WebdriverIO 是否已成功安裝。

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

WebdriverIO - Mocha 安裝

Mocha 是一個基於 JavaScript 的測試框架，它構建在 Nodejs 之上。它使非同步測試執行流程變得有趣且簡單。Mocha 測試可以序列執行。

它能夠生成準確且可自定義的報告。此外，未捕獲的異常可以輕鬆地與正確的測試用例關聯。Mocha 的詳細資訊可在以下連結中找到：

https://tutorialspoint.tw/tesults/tesults_integrating_your_automated_tests.htm

要在 NPM 登錄檔中安裝 Mocha 包，命令如下：

npm install mocha

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

命令成功執行後，已安裝的 Mocha 版本將反映在 package.json 檔案中。

Selenium 獨立伺服器安裝

WebdriverIO 在 Selenium 的框架下工作。為了與瀏覽器建立通訊，我們需要安裝 Selenium 獨立伺服器。

要安裝 Selenium 獨立伺服器，我們需要執行以下命令：

npm install selenium-standalone

或者：

npm i selenium-standalone.

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

成功執行命令後，已安裝的 Selenium 獨立伺服器軟體包版本將反映在 package.json 檔案中。

WebdriverIO - 配置檔案生成

WebdriverIO 測試由配置檔案控制。它通常被認為是 WebdriverIO 的核心。它包含要執行的測試用例的詳細資訊、應執行測試的瀏覽器、全域性資訊——超時、報告、螢幕截圖等等。

在 WebdriverIO 中，我們不會執行單個測試。我們需要藉助測試執行器來觸發配置檔案。測試執行器掃描配置檔案中提供的資訊，然後相應地觸發測試。

要獲得測試執行器，我們必須安裝 WebdriverIO CLI 依賴項。要安裝它並將其儲存在 package.json 檔案中，我們必須執行以下命令：

npm i --save-dev @wdio/cli

成功執行此命令後，CLI 依賴項的版本將反映在 package.json 檔案中。您的計算機上將出現以下螢幕：

要建立配置檔案，我們必須執行以下命令：

npx wdio config -y

成功執行此命令後，名為 wdio.conf.js 的配置檔案將在我們的專案中建立。此外，package.json 檔案現在應該在 devDependencies 欄位下包含更多依賴項。

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

除了上圖中標明的依賴項外，我們還需要新增一個依賴項，以便 WebdriverIO 命令可以同步執行。

我們必須在 devDependencies 欄位下新增依賴項 - "@wdio/sync": "<版本號>"。然後執行以下命令：

npm install 

要從測試執行器執行配置檔案，我們必須執行以下命令：

npx wdio run wdio.conf.js

建立 Mocha Spec 檔案

建立配置檔案後，我們將在 WebdriverIO 專案中找到一個生成的測試資料夾。關於如何建立配置檔案的詳細資訊在名為“配置檔案生成”的章節中進行了描述。

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

如果我們展開此資料夾，我們將找到兩個子資料夾 - pageobjects 和 specs，其中包含預設建立的 JavaScript 檔案。這些基本上是提供的示例測試，以指導首次使用者熟悉 Mocha 框架。

Mocha 是一個基於 JavaScript 的測試框架，它構建在 Nodejs 之上。它使非同步測試執行流程變得有趣且簡單。Mocha 測試可以序列執行。

它能夠生成準確且可自定義的報告。此外，未捕獲的異常可以輕鬆地與正確的測試用例關聯。Mocha 的詳細資訊可在以下連結中找到：

www.tutorialspoint.com/tesults/tesults_integrating_your_automated_tests.htm

根據 Mocha 測試框架，所有測試檔案都稱為 spec 檔案，它們應該位於 specs 資料夾中。

測試檔案中的程式碼塊

測試檔案應包含以下程式碼塊：

• describe − 它在層次結構上高於 it 塊。測試檔案可以有多個 describe 塊。一個 describe 塊表示一個測試套件。它有兩個引數：測試套件的描述和一個匿名函式。

• it − 它在層次結構上低於 describe 塊。一個 describe 塊可以有多個 it 塊。一個 it 塊表示一個測試用例，並且在 describe 塊中是必須的。它有兩個引數：測試用例的描述和一個匿名函式。實際的 WebdriverIO 程式碼在 it 塊中實現。建立 Mocha 檔案的步驟

要建立 Mocha 檔案，讓我們按照以下步驟操作：

步驟 1 − 右鍵單擊 specs 資料夾（位於 test 資料夾中），然後選擇“新建檔案”。您的計算機上將出現以下螢幕：

步驟 2 − 輸入檔名，例如 testcase1.js。

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

步驟 3 − 在此檔案中新增以下程式碼：

// test suite name 
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Title', function (){
   // URL launching
      browser.url("https://tutorialspoint.tw/about/about_careers.htm")
      //print page title in console
      console.log(browser.getTitle())
   });    
});

在上面的程式碼中，瀏覽器是由 WebdriverIO 公開的全域性物件。

請注意 − 我們不能直接執行此單個檔案。我們將藉助配置檔案來執行它。

WebdriverIO - VS Code 智慧提示

完成 Visual Studio Code 的安裝後，我們應該在編輯器中新增 intellisense，以便一旦我們開始編寫 WebdriverIO 命令，就會顯示 WebdriverIO 方法的自動建議。

關於如何進行 VS Code 安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細討論。

這是一個非常重要的功能，應該新增它，以便終端使用者不需要記住 WebdriverIO 的原始程式碼。

向 VS Code 新增 intellisense

向 VS Code 新增 WebdriverIO 的 intellisense 的步驟如下：

步驟 1 − 單擊 WebdriverIO 專案右側出現的“新建檔案”按鈕。

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

步驟 2 − 將檔名輸入為 jsconfig.json。在這裡，我們必須指定實現測試的 spec 檔案的路徑。

如果我們想將 intellisense 功能應用於 test 資料夾中的所有 spec 檔案，我們可以將相對路徑指定為 test/spec/*.js。

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

步驟 3 − 在檔案中新增以下程式碼。

{
   "include": [
      //relative path of all spec files
      "test/specs/*.js",
      "**/*.json",
      "node_modules/@wdio/sync",
      "node_modules/@wdio/mocha-framework"
   ]
}

步驟 4 − 在 spec 檔案中，開始編寫 WebdriverIO 物件或方法，我們將獲得完整的自動建議。

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

WebdriverIO - wdio.conf.js 檔案

WebdriverIO 測試由配置檔案控制。它通常被認為是 WebdriverIO 的核心。它包含要執行的 spec 檔案的詳細資訊、應執行測試的瀏覽器、全域性資訊——基本 URL、超時、報告、螢幕截圖等等。

在 WebdriverIO 中，我們不會執行單個測試。我們需要藉助測試執行器來觸發配置檔案。測試執行器掃描配置檔案中提供的資訊，然後相應地觸發測試。

要建立配置檔案，我們必須執行以下命令：

npx wdio config -y

成功執行此命令後，名為 wdio.conf.js 的配置檔案將在我們的專案中建立。

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

在此檔案中，我們必須指定要在 specs 引數中執行的 spec 檔案的路徑。

預設情況下，提供的路徑是： ./test/specs/**/*.js。這意味著應選擇 specs 子資料夾（位於 test 資料夾下）下的任何 .js 檔案進行執行。

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

要使用 wdio.conf.js 檔案執行測試，我們必須執行以下命令：

npx wdio run wdio.conf.js

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

成功執行命令後，將在控制檯中獲得啟動的應用程式的頁面標題。

但是，許多日誌都捕獲在控制檯中。這是因為引數 logLevel 預設在 wdio.conf.js 檔案中設定為 info。

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

為了擺脫一些日誌並僅獲得測試用例指示的那些日誌，我們可以將此引數設定為 silent。

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

再次使用以下命令執行配置檔案：

npx wdio run wdio.conf.js

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

成功執行命令後，我們發現日誌減少了，並且在控制檯中獲得了啟動的應用程式的頁面標題 - 關於 Tutorials Point 的職業 - Tutorialspoint。

WebdriverIO - XPath 定位器

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

為此，我們的首要任務是識別元素。我們可以為元素建立 xpath 以進行識別。建立 xpath 表示式的規則如下：

xpath 的語法是

//tagname[@attribute='value']

此處，tagname 是可選的。

例如：

//img[@alt='tutorialspoint']

讓我們看看突出顯示的連結 - 首頁的 html 程式碼。您的計算機上將出現以下螢幕：

元素 Home 的 xpath 如下：

//a[@title='TutorialsPoint - Home']. 

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

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

$('value of the xpath expression')

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

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

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

上面突出顯示的元素的 xpath 應如下所示：

//li[@class='heading']

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath', function(){        
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with xpath then obtain text
      console.log($("//li[@class='heading']").getText() + " - is the text.")
   });
});

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

npx wdio run wdio.conf.js. 

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

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

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

帶有文字的 Xpath 定位器

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

我們可以為元素建立 xpath 以進行識別。但是，在某些情況下，沒有可用的 HTML 屬性或 tagname 來唯一標識元素。

在這種情況下，我們可以使用 text 函式，藉助頁面上可見的文字為元素建立 xpath。text 函式區分大小寫。

使用可見文字建立 xpath 表示式的規則如下：

xpath 的語法如下：

//tagname[text()='displayed text']. 

例如：

//li[text()='WebdriverIO']

讓我們使用 xpath 中的可見文字識別下圖中突出顯示的元素：

使用 text() 函式，上面突出顯示的元素的 xpath 應如下所示：

//li[text()='About Tutorialspoint'] 

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath - text()', function(){
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with xpath - visible text then obtain text
      console.log($("//li[text()='About Tutorialspoint']").getText() + " - is the text.")
   });
});

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

npx wdio run wdio.conf.js. 

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

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

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

WebdriverIO - CSS 定位器

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

為此，我們的首要任務是識別元素。我們可以為元素建立 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 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// 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 將列印在控制檯中。

WebdriverIO - 連結文字定位器

導航到網頁後，我們可能透過單擊連結與網頁元素互動以完成自動化測試用例。定位器連結文字用於具有錨標記的元素。

我們可以識別具有匹配文字的錨元素。在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的連結：

$('=value of the anchor text')

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

const p = $('=value of the anchor text')

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

上圖中突出顯示的連結具有標籤名 - a 和錨文字 - 使用條款。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

/ test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Link Text', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with link text then click
      $("=Terms of Use").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

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

npx wdio run wdio.conf.js. 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，單擊“使用條款”-Tutorialspoint 後的頁面標題將列印在控制檯中。

部分連結文字定位器

導航到網頁後，我們可能透過單擊連結與網頁元素互動以完成自動化測試用例。定位器部分連結文字用於具有錨標記的元素。

我們可以識別具有匹配文字的錨元素。在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的部分連結：

$('*=value of the anchor text which is matching')

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

const p = $('*=value of the anchor text which is matching')

部分連結文字類似於連結文字，唯一的區別在於它可以幫助處理錨元素的少量字元是固定的而其餘字元是動態的情況。

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

上圖中突出顯示的連結具有標籤名 - a 和錨文字 - 使用條款。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Partial Link Text', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with partial link text then click
      $("*=Terms of").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，單擊“使用條款”-Tutorialspoint 後的頁面標題將列印在控制檯中。

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 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// 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 檔案和名為配置檔案生成的章節中詳細討論。

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

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

WebdriverIO - 標籤名定位器

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

為此，我們的首要任務是識別元素。我們可以使用元素的 HTML 標籤名進行識別。在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的標籤名：

$('<element tagname>')

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

const p = $('element tagname')

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

上圖中突出顯示的元素具有標籤名 - h1。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Tagname', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with tagname then obtain text
      console.log($("<h1>").getText() + " - is the text.")
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

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

WebdriverIO - 類名定位器

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

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

在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的類名屬性值：

$('=.value of class attribute')

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

const p = $('=.value of class attribute')

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

上圖中突出顯示的元素的 class 屬性值為 heading。

程式碼實現如下：

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Class Name', function(){        
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with Class Name then obtain text
      console.log($(".heading").getText() + " - is the text.")
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。您的計算機上將出現以下螢幕：

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

WebdriverIO - 名稱定位器

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

為此，我們的首要任務是識別元素。我們可以使用元素的 name 屬性進行識別。此定位器現已棄用，僅與基於 JSONWireProtocol 或 Appium 的舊瀏覽器相容。

在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的 name 屬性值：

$('[name attribute=''value'']')

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

const p = $('[name attribute=''value'']')

讓我們識別下圖中突出顯示的編輯框並輸入文字：

上圖中突出顯示的元素的 name 屬性值為 search。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Name', function(){     
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')
      //identify element with Name then input text
      $('[name="search"]').setValue('Selenium')
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

WebdriverIO - 斷言的 Expect 語句

要將 WebdriverIO 用作自動化測試工具，我們需要設定檢查點，這將幫助我們得出測試是否透過或失敗的結論。WebdriverIO 提供各種斷言，我們可以用它們來驗證測試是否成功驗證了某個步驟。

在斷言中，我們可以將測試的預期結果與實際結果進行比較。如果兩者相似，則測試應透過，否則應失敗。WebdriverIO 中的 expect 語句可以應用於瀏覽器、模擬物件或元素。

我們必須新增一個名為 Chai 的 NodeJS 庫。Chai 庫包含用於斷言的 expect 語句。

我們必須在程式碼中新增以下語句來實現 Chai 斷言：

const e = require('chai').expect

應用於瀏覽器的斷言

這些斷言列在下面：

toHaveUrl

它檢查瀏覽器是否開啟特定頁面。語法如下：

expect(browser).toHaveUrl('https://tutorialspoint.tw/index.htm')

toHaveUrlContaining

它檢查頁面的 URL 是否具有特定值。

語法

語法如下：

expect(browser).toHaveUrlContaining('tutorialspoint')

toHaveUrl

它檢查頁面是否具有特定標題。

語法

語法如下：

expect(browser).toHaveTitle('Terms of Use - Tutorialspoint')

應用於元素的斷言

這些斷言列在下面：

toBeDisplayed

它檢查元素是否顯示。

語法

語法如下：

const e = $('#loc')
expect(e).toBeDisplayed()

toExist

它檢查元素是否存在。

語法

語法如下：

const e = $('#loc')
expect(e).toExist()

toBePresent

它檢查元素是否存在。

語法

語法如下：

const e = $('#loc')
expect(e).toBePresent()

toBeExisting

它與 toExist 相同。

toBeFocussed

它檢查元素是否獲得焦點。

語法

語法如下：

const e = $('#loc')
expect(e).toBeFocussed()

toHaveAttribute

它檢查元素屬性是否具有特定值。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveAttribute('name', 'search')

toHaveAttr

它與 toExist 相同。

toHaveAttributeContaining

它檢查元素屬性是否包含特定值。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveAttributeContaining('name', 'srch')

toHaveElementClass

它檢查元素是否具有特定類名。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveElementClass('name', { message: 'Not available!', })

toHaveElementClassContaining

它檢查元素類名是否包含特定值。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveElementClassContaining('nam')

toHaveElementProperty

它檢查元素是否具有特定屬性。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveElementProperty('width', 15)
//verify negative scenario
expect(e).not.toHaveElementProperty('width', 20)

toHaveValue

它檢查輸入元素是否具有特定值。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveValue('Selenium', { ignoreCase: false})

toHaveValueContaining

它檢查輸入元素是否包含特定值

語法

語法如下：

const e = $('#loc')
expect(e).toHaveValueContaining('srch')

toBeClickable

它檢查元素是否可點選。

語法

語法如下：

const e = $('#loc')
expect(e).toBeClickable()

toBeDisabled

它檢查元素是否被停用。

語法

語法如下：

const e = $('#loc')
expect(e).toBeDisabled()
//verify negative scenario
expect(e).not.toBeEnabled()

toBeEnabled

它檢查元素是否啟用。

語法

語法如下：

const e = $('#loc')
expect(e).toBeEnabled()

toBeSelected

它與 toBeEnabled 相同。

toBeChecked

它與 toBeEnabled 相同。

toHaveHref

它檢查連結元素是否具有特定連結目標。

語法

語法如下：

const e = $('<a>')
expect(e).toHaveHref('https://tutorialspoint.tw/index.htm')

toHaveLink

它與 toHaveHref 相同。

toHaveHrefContaining

它檢查連結元素是否包含特定連結目標。

語法

語法如下：

const e = $('<a>')
expect(e).toHaveHrefContaining('tutorialspoint.com')

toHaveLinkContaining

它與 HaveHrefContaining 相同。

toHaveId

它檢查元素是否具有特定 id 屬性值。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveId('loc')

toHaveText

它檢查元素是否具有特定文字。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveText('Learning WebdriverIO')

toHaveTextContaining

它檢查元素是否包含特定文字。

語法

語法如下：

const e = $('#loc')
expect(e).toHaveTextContaining('Learning WebdriverIO')

toBeDisplayedInViewpoint

它檢查元素是否在視野內。

語法

語法如下：

const e = $('#loc')
expect(e).toBeDisplayedInViewpoint()

應用於模擬物件的斷言

斷言列在下面：

toBeRequested

它檢查模擬是否被呼叫。

語法

語法如下：

const m = browser.mock('**/api/list*')
expect(m).toBeRequested()

toBeRequestedTimes

它檢查模擬是否被呼叫了預期次數。

語法

語法如下：

const m = browser.mock('**/api/list*')
expect(m).toBeRequestedTimes(2)

首先，按照名為使用 webdriverIO 的成功路徑流程的章節中的步驟 1 到 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Assertion with expect', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with link text then click
      $("=Terms of Use").click()
      browser.pause(1000)
      //verify page title with assertion
      expect(browser).toHaveTitleContaining('Terms of Use - Tuter')
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，我們發現結果為 1 個失敗。因為預期：是使用條款 - Tuter，而接收到的：輸出是使用條款 - Tutorialspoint。

此外，WebdriverIO expect 語句突出顯示了預期：和接收到的：文字不匹配的文字部分。

WebdriverIO - 成功路徑流程

讓我們建立一個簡單的成功流程來演示如何建立基本的 WebdriverIO 測試：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 - 建立規範檔案。關於如何執行此安裝的詳細資訊在名為 Mocha 安裝的章節中給出。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Happy Flow', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with link text then click
      $("=Team").click()
      //verify URL of next page with assertion
      expect(browser).toHaveUrlContaining('team')
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

步驟 8 - 透過進一步調查輸出，我們將看到規範檔案 testcase1.js 中的測試被標記為 PASSED。

測試執行的瀏覽器版本和作業系統、會話 ID、規範檔案名、測試套件名稱 - Tutorialspoint 應用程式、測試用例名稱 - 成功流程、測試執行持續時間等等，也已捕獲在控制檯中。

WebdriverIO - 常用瀏覽器命令

下面列出了一些 WebdriverIO 中使用的常用瀏覽器命令：

browser.url(URL)

此命令用於啟動一個應用程式，其 URL 作為引數傳遞。

語法

語法如下：

browser.url('https://the-internet.herokuapp.com/redirector')

首先，按照名為使用 webdriverIO 的成功路徑流程的章節中的步驟 1 到 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// 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())
   });
});

browser.getTitle()

此命令用於獲取當前在瀏覽器中啟動的頁面的標題。值為字串形式返回。此命令不接受任何引數。如果頁面沒有標題，則返回空字串。

語法

語法如下：

browser.getTitle()

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

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Title', function (){
      // URL launching
      browser.url("https://tutorialspoint.tw/about/about_careers.htm")
      //print page title in console
      console.log(browser.getTitle())
   });    
});

browser.getUrl()

此命令用於獲取當前在瀏覽器中啟動的頁面的 URL。值為字串形式返回。此命令不接受任何引數。

語法

語法如下：

browser.getUrl()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Url', function (){
      // URL launching
      browser.url("https://tutorialspoint.tw/index.htm")
      //print URL in console
      console.log(browser.getUrl())
   });    
});

browser.getPageSource()

此命令用於獲取當前在瀏覽器中啟動的頁面的頁面原始碼。值為字串形式返回。此命令不接受任何引數。

語法

語法如下：

browser.getPageSource()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Source', function (){
      // URL launching
      browser.url("https://tutorialspoint.tw/index.htm")
      //print URL in console
      console.log(browser.getPageSource())
   });    
});

browser.maximizeWindow()

此命令用於最大化當前瀏覽器視窗。

語法

語法如下：

browser.maximizeWindow()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Maximise Browser', function (){
      // URL launching
      browser.url("https://tutorialspoint.tw/questions/index.php")
      //maximize browser
      browser.maximizeWindow()
   });    
});

WebdriverIO - 處理瀏覽器大小

在 WebdriverIO 中處理自動化測試時，我們可能需要設定視窗大小並獲取視窗大小。視窗大小指視窗高度和寬度。

browser.setWindowSize(250, 450)

此命令用於設定視窗大小。此處，視窗大小將設定為寬度 - 250 和高度 - 450。

語法

語法如下：

browser.setWindowSize(250, 450)

browser.getWindowSize()

此命令用於獲取視窗尺寸。

語法

語法如下：

browser.getWindowSize()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Dimension', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')
      //set window size
      browser.setWindowSize(500, 450)
      //get window size
      console.log(browser.getWindowSize())
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，瀏覽器視窗的尺寸 - {width: 500, height: 450} 將列印在控制檯中。

WebdriverIO - 瀏覽器導航命令

下面列出了一些 WebdriverIO 中使用的瀏覽器導航命令：

browser.navigateTo(URL)

此命令用於導航到一個應用程式，其 URL 作為引數傳遞。

語法

語法如下：

browser.navigateTo('https://the-internet.herokuapp.com/redirector')

browser.back()

此命令用於在瀏覽器歷史記錄中後退。

語法

語法如下：

browser.back()

browser.forward()

此命令用於在瀏覽器歷史記錄中前進。

語法

語法如下：

browser.forward()

browser.refresh()

此命令用於重新整理當前網頁。

語法

語法如下：

browser.refresh()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Navigation', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      // navigate to another url
      browser.navigateTo("https://tutorialspoint.tw/codingground.htm")
      //navigate back in history  
      browser.back()
      //get title back in browser history
      console.log('Back in Browser history: ' + browser.getTitle())
      //navigate forward in history  
      browser.forward()
      //get title forward in browser history
      console.log('Forward in Browser history: ' + browser.getTitle())
      //refresh browser
      browser.refresh()
      //get title after refresh
      console.log('Page Title after refresh: ' + browser.getTitle())
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，列印在瀏覽器歷史記錄中後退時獲得的頁面標題 - 關於 Tutorials Point 的職業 - Tutorialspoint。

然後，列印在瀏覽器歷史記錄中前進時獲得的頁面標題 - 免費線上 IDE 和終端。

最後，列印頁面重新整理後獲得的頁面標題 - 免費線上 IDE 和終端。

處理複選框和下拉列表

在使用 WebdriverIO 自動化測試時，我們可以處理 UI 中的複選框。複選框在 html 程式碼中被標識為標籤名為 input，型別為 checkbox。

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

操作複選框的方法

操作複選框的一些方法如下：

click()

用於選中一個複選框。

語法

語法如下：

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

isSelected()

用於檢查 checkbox 型別元素是否被選中。它返回一個布林值（如果選中則為 true，否則為 false）。

語法如下：

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

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Checkbox', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/checkboxes')
      //identify checkbox with CSS then click
      const p = $("input[type='checkbox']") 
      p.click()
      //verify if checked with assertion
      expect(p).toBeSelected()
      //uncheck checkbox
      p.click()
      //verify if not checked with assertion
      expect(p).not.toBeSelected()
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，所有斷言都按預期執行，並且我們獲得了透過的測試。

處理下拉列表

在使用 WebdriverIO 自動化測試時，我們可以處理 UI 中的下拉列表。靜態下拉列表在 html 程式碼中被標識為標籤名為 select，其選項的標籤名為 option。

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

靜態下拉列表的方法

操作靜態下拉列表的一些方法如下：

selectByVisibleText

此方法用於選擇與作為引數傳遞給此方法的選項的可視文字匹配的選項。

語法如下：

let p = $('#loc')
p.selectByVisibleText('By Subject')

selectByAttribute

此方法用於選擇與作為引數傳遞給此方法的任何屬性的值匹配的選項。

語法如下：

let p = $('#loc')
p.selectByAttribute('value', 'subject')

這裡，選項的屬性值為 subject。

selectByIndex

此方法用於選擇與作為引數傳遞給此方法的選項的索引/位置匹配的選項。索引從 0 開始。

語法如下：

let p = $('#loc')
p.selectByIndex(1)

getValue()

此方法用於獲取下拉列表中所選選項的屬性值。

語法如下：

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

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
    //test case
    it('Drodowns', 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')
        //select by visible text
        p.selectByVisibleText('By Subject')
        //get option selected
        console.log(p.getValue() + ' - option selected by visible text')
         //select by value attribute
         p.selectByAttribute('value', 'name')
         //get option selected
         console.log(p.getValue() + ' - option selected by attribute value')
    });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，首先在控制檯中列印使用選項索引選擇的選項的值 - name。

然後，在控制檯中列印使用選項可見文字選擇的選項的值 - subject。

最後，在控制檯中列印使用選項屬性值選擇的選項的值 - name。

WebdriverIO - 滑鼠操作

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

語法

語法如下：

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

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

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

首先，請按照題為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到 5 操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// 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。

WebdriverIO - 處理子視窗/彈出視窗

單擊連結或按鈕可以開啟新的子視窗。WebdriverIO 預設情況下控制主瀏覽器視窗，為了訪問子視窗上的元素，必須將 WebdriverIO 控制從主頁切換到子視窗。

子視窗的方法

操作子視窗的一些方法如下：

browser.getWindowHandles()

此方法以列表的形式生成所有當前開啟的瀏覽器視窗的視窗控制代碼 ID。如果有兩個開啟的視窗，則列表的零索引具有父視窗的控制代碼 ID，第一個索引將指向子視窗的視窗控制代碼。

語法

語法如下：

var x = browser.getWindowHandles()

browser.getWindowHandle()

此方法生成處於焦點的瀏覽器的視窗控制代碼 ID。

語法

語法如下：

let l = browser.getWindowHandle()

browser.switchToWindow('<window handle id>')

此方法用於將焦點從一個瀏覽器視窗切換到另一個已開啟的視窗，其視窗控制代碼 ID 作為引數傳遞給此方法。

語法

語法如下：

browser.switchToWindow(x)

在下圖中，單擊“使用 Apple 帳戶登入”按鈕時，將開啟一個子視窗，其瀏覽器標題為“使用 Apple ID 登入”。讓我們嘗試切換到子視窗並訪問那裡的元素。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Child Window', function(){    
      // launch url
      browser.url('https://secure.indeed.com/account/login')  
      //identify element then click
      $('#apple-signin-button').click()
      //get all window handle ids in list
      var l = browser.getWindowHandles()
      //switch to child window
      browser.switchToWindow(l[1])
      //get page title of child window
      console.log(browser.getTitle() + ' - Page title of child window')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(l[0])
      //get page title of parent window
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，首先在控制檯中列印子視窗的頁面標題 - 使用 Apple ID 登入。然後，在控制檯中列印父視窗的頁面標題 - 登入 | Indeed 帳戶。

WebdriverIO - 隱藏元素

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

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

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

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// 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 登入將在控制檯中列印。

WebdriverIO - Frame

html 程式碼中的框架由 frames/iframe 標籤表示。WebdriverIO 可以透過從主頁切換到框架來處理框架。

框架的方法

操作框架的一些方法如下：

browser.switchToFrame('<frame id/index/locator>')

此方法用於將焦點從主頁切換到框架。框架 ID、索引或定位器作為引數傳遞給此方法。

語法

語法如下：

browser.switchToWindow(x)

要將焦點從框架切換到主頁，我們必須將 null 作為引數傳遞給 browser.switchToFrame 方法。

讓我們看看框架內元素的 html 程式碼，並獲取其中的文字 - BOTTOM。

上圖中突出顯示的標籤名為 frame，其 name 屬性的值為 frame-bottom。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Frames', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/nested_frames')  
      //switch to frame
      browser.switchToFrame($("frame[name='frame-bottom']"))
      //identify element with tagname
      const p = $('<body>')
      //get text inside frame
      console.log(p.getText() + ' - Text inside frame')   
      //switch to main page
      browser.switchToFrame(null)           
   });
});

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

npx wdio run wdio.conf.js

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

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

命令成功執行後，框架內的文字 - BOTTOM 將列印在控制檯中。

WebdriverIO - 拖放

WebdriverIO 可以使用 dragAndDrop 方法執行諸如拖放之類的滑鼠操作。透過此方法，我們對當前物件（源）執行單擊和按住事件，然後將物件傳遞給目標元素。最後，釋放滑鼠。

語法

語法如下：

let p = $('#loc')
let t = $('#target')
p.dragAndDrop(t)

這裡，p 是源定位器，t 是目標定位器。

讓我們對以下元素執行拖放功能：

在上圖中，名為“將我拖到我的目標”的元素必須拖放到名為“已放下！”的元素上。

首先，請按照題為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到 5 操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Drag and Drop', function(){    
      // launch url
      browser.url('https://jqueryui.com/droppable/')  
      //maximize browser
      browser.maximizeWindow()
      //switch to frame
      browser.switchToFrame($(".demo-frame"))
      //identify source element
      const src = $('#draggable')   
      //identify target element
      const trg = $('#droppable')  
      //drag and drop
      src.dragAndDrop(trg)
   });
});

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

執行後，名為“將我拖到我的目標”的元素已拖放到名為“已放下！”的元素上。

WebdriverIO - 雙擊

WebdriverIO 可以使用 doubleClick 方法執行諸如雙擊之類的滑鼠操作。透過此方法，我們可以對網頁上的給定元素執行雙擊操作。

語法

語法如下：

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

讓我們對以下元素執行雙擊操作：

在這裡，可以看到雙擊“雙擊我以檢視警報”按鈕時，會生成一個警報框。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Double Click', function(){    
      // launch url
      browser.url('http://only-testing-blog.blogspot.com/2014/09/selectable.html')  
      //identify element then double click
      $("button").doubleClick()
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //accept Alert
      browser.acceptAlert()
   });
});

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

npx wdio run wdio.conf.js

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

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

命令成功執行後，雙擊時生成的警報文字 - 您雙擊了我.. 謝謝.. 將列印在控制檯中。

WebdriverIO - Cookie

我們可以使用 WebdriverIO 處理 Cookie。Cookie 有助於識別使用者。它是一種有效的技術，可以將資訊從一個站點會話傳遞到另一個站點會話，或者在兩個連線的網站的會話之間傳遞。

Cookie 的方法

我們可以使用以下方法使用 WebdriverIO 新增、刪除和獲取 Cookie：

browser.setCookies

這用於為當前頁面設定單個 Cookie 或多個 Cookie。要為頁面設定 Cookie，我們必須首先啟動並停留在該頁面上。

語法

語法如下：

browser.setCookies(
   {
      cookie, cookie.name, cookie.value, cookie.path, cookie.domain, 
      cookie.secure, cookie.httpOnly, cookie.expiry
   }
)

這裡，cookie 是 cookie 物件或物件陣列，可以包含以下值：

• cookie.name − 這是一個可選引數，指的是 Cookie 名稱。

• cookie.value − 這是一個可選引數，指的是 Cookie 值。

• cookie.path − 這是一個可選引數，指的是 Cookie 路徑。預設值為 /(如果在新增 Cookie 時未新增)。

• cookie.domain − 這是一個可選引數，指的是 Cookie 域名。預設值為當前瀏覽上下文活動文件的 URL 域名（如果在新增 Cookie 時未新增）。

• cookie.secure − 這是一個可選引數，用於檢查 Cookie 是否安全。預設值為 false（如果在新增 Cookie 時未新增）。

• cookie.httpOnly − 這是一個可選引數，用於檢查 Cookie 是否為 HTTP 型別。預設值為 false（如果在新增 Cookie 時未新增）。

• cookie.expiry.

browser.getCookies

這用於從現有頁面獲取 Cookie。如果將 Cookie 名稱作為引數提供給此方法，則將獲取該特定 Cookie。否則，將獲取當前頁面上的所有 Cookie。

語法

語法如下：

//to get a specific cookie
browser.getCookies(['Topic'])

或者：

//to get all cookies
browser.getCookies()

browser.deleteCookies

這用於從現有頁面刪除 Cookie。如果將 Cookie 名稱作為引數提供給此方法，則將刪除該特定 Cookie。否則，將刪除當前頁面上的所有 Cookie。

語法

語法如下：

//to delete a specific cookie
browser.deleteCookies(['Topic'])

或者：

//to delete all cookies
browser.deleteCookies()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Cookies', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')
      //set cookies
      browser.setCookies([
         {name: 'topic1', value: 'WebdriverIO'},
         {name: 'topic2', value: 'Selenium'}
      ])
      //get a particular cookie
	   const t = browser.getCookies(['topic1'])
      console.log(t);
      //get all cookies
      const a = browser.getCookies()
      console.log(a);
      //delete a cookie with name topic2
      browser.deleteCookies(['topic2'])
      d = browser.getCookies()
      console.log(d)
      //delete all cookies
      browser.deleteCookies()
      m = browser.getCookies()
      console.log(m) 
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，首先在控制檯中列印名稱為 topic1 的 Cookie 詳情。然後，將顯示名稱為 topic1 和 topic2 的 Cookie 詳情。

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

然後，我們刪除了名稱為 topic2 的 Cookie，因此其他 Cookie 將列印在控制檯中。最後，刪除所有 Cookie 後，將在控制檯中列印一個空陣列。

WebdriverIO - 處理單選按鈕

在使用 WebdriverIO 自動化測試時，我們可以處理 UI 中的單選按鈕。單選按鈕在 html 程式碼中被標識為標籤名為 input，型別為 radio。

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

單選按鈕的方法

操作單選按鈕的一些方法如下：

click()

用於選擇一個單選按鈕。

語法

語法如下：

const l = $('.rad')
l.click()

isSelected()

用於檢查 radio 型別元素是否被選中。它返回一個布林值（如果選中則為 true，否則為 false）。

語法

語法如下：

const l = $('.rad')
l.isSelected()

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Radio Button', function(){    
   // launch url
   browser.url('https://tutorialspoint.tw/selenium/selenium_automation_practice.htm')
      //identify radio button with CSS then click
      const p = $("input[value='1']") 
      p.click()
      //verify if selected 
      console.log(p.isSelected())
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，布林值將列印在控制檯中。這是 isSelected() 函式返回的值，因為它在之前的步驟中選中了單選按鈕，所以返回 true。

WebdriverIO - webelements 的 Chai 斷言

Chai 是一個 Node.js 的斷言庫，主要用於 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 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

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 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

//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() 方法返回的。然後，會在控制檯中列印警報文字 - I am a JS prompt。

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

WebdriverIO - 多個視窗/標籤頁

單擊連結或按鈕可能會開啟多個視窗/標籤頁。WebdriverIO 預設情況下控制主瀏覽器，為了訪問其他標籤頁上的元素，必須將 WebdriverIO 的控制從主瀏覽器視窗切換到開啟的標籤頁。

多視窗方法

一些處理多個視窗或標籤頁的方法如下：

browser.getWindowHandles()

此方法以列表的形式返回所有當前開啟的瀏覽器視窗的視窗控制代碼 ID。如果有兩個開啟的視窗，列表的零索引具有父視窗的控制代碼 ID，而第一個索引將指向標籤頁的視窗控制代碼。

語法

語法如下：

var x = browser.getWindowHandles()

browser.getWindowHandle()

此方法生成處於焦點的瀏覽器的視窗控制代碼 ID。

語法如下：

let l = browser.getWindowHandle()

browser.switchToWindow('window handle id')

此方法用於將焦點從當前焦點瀏覽器視窗切換到另一個開啟的瀏覽器視窗，其視窗控制代碼 ID 作為引數傳遞給此方法。

語法

語法如下：

browser.switchToWindow(x)

在下圖中，單擊“Click Here”連結後，將開啟一個新標籤頁，其瀏覽器標題為“New Window”。讓我們切換到新標籤頁並訪問其中的元素。

首先，請按照題為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到 5 操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Tab windows', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/windows')  
      //identify element then click
      $('=Click Here').click()
      //get all window handle ids in list
      let w = browser.getWindowHandles()
      //switch to tab
      browser.switchToWindow(w[1])
      //get page title of tab
      console.log(browser.getTitle() + ' - Page title of tab')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(w[0])
      //get page title of parent
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，標籤頁視窗的頁面標題 - New Window 將列印到控制檯。然後，父視窗的頁面標題 - The Internet 將列印到控制檯。

WebdriverIO - 滾動操作

我們可以使用 scrollIntoView 方法透過 WebdriverIO 執行滾動操作。此方法不接受任何引數，可以應用於瀏覽器物件或特定元素。

語法

語法如下：

const p = $('#loc')
p.scrollIntoView()

或者：

browser.scrollIntoView()

在下圖中，讓我們滾動到頁尾元素連結 - Helping 並單擊它。

首先，請按照“使用 WebdriverIO 的最佳實踐流程”章節中的步驟 1 到步驟 5 進行操作。

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Scroll', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')  
      //identify element 
      const e = $("=Helping")
      //scroll to element
      e.scrollIntoView()
      e.click()
      //get page title
      console.log(browser.getTitle() + ' - Page time after click')
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，單擊滾動後連結 - Helping Tutorials Point - Tutorialspoint 獲得的頁面的頁面標題將列印到控制檯。

WebdriverIO - 警報

WebdriverIO 能夠處理警報。

警報方法

一些處理警報的方法如下：

browser.isAlertopen()

此方法用於驗證頁面中是否存在警報。如果存在警報，則返回 true，否則返回 false。

語法

語法如下：

browser.isAlertopen()

browser.getAlertText()

此方法用於獲取警報中顯示的文字。

語法

語法如下：

browser.getAlertText()

browser.acceptAlert()

此方法用於接受警報。

語法

語法如下：

browser.acceptAlert()

browser.dismissAlert()

此方法用於關閉警報。

語法

語法如下：

browser.dismissAlert()

在下圖中，單擊“Click for JS Alert”後，將顯示一個警報。讓我們獲取警報中的文字。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Alerts', 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') 
      //accept Alert
      browser.acceptAlert()
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

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

WebdriverIO - 除錯程式碼

要在 Visual Studio Code 編輯器中除錯 WebdriverIO 程式碼，我們必須啟用 JavaScript 偵錯程式的夜間版本。除錯是識別程式碼中錯誤根本原因的最重要步驟之一。

它還有助於理解程式流程。

啟用除錯

啟用除錯的步驟如下：

**步驟 1** - 如果您使用的是 Windows 或 Linux 作業系統，請導航到以下連結：

https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

**步驟 2** - 單擊“安裝”。您的計算機上將出現以下螢幕：

如果使用的是 Mac 作業系統，可以跳過步驟 1 和 2。

**步驟 3** - 在專案中建立一個名為 .vscode 的資料夾。然後在此資料夾中建立一個名為 launch.json 的檔案。您的計算機上將出現以下螢幕：

**步驟 4** - 在 launch.json 檔案中新增以下程式碼。

{
   "configurations": [
      {
         "name": "Webdriver IO",
         "type": "node",
         "request": "launch",
         "args": ["wdio.conf.js", "--spec", "${file}"],
         "cwd": "${workspaceFolder}",
         "autoAttachChildProcesses": true,
         "program": "${workspaceRoot}/node_modules/@wdio/cli/bin/wdio.js",
         "console": "integratedTerminal",
         "skipFiles": [
            "${workspaceFolder}/node_modules/**/*.js",
            "${workspaceFolder}/lib/**/*.js",
            "<node_internals>/**/*.js"
         ]
      },
   ]
}

**步驟 5** - 在規範檔案中新增斷點。您的計算機上將出現以下螢幕：

**步驟 6** - 轉到“執行”選單，然後選擇“啟動除錯”選項。您的計算機上將出現以下螢幕：

**步驟 7** - 執行將在除錯模式下觸發，底部會有一個橙色條帶。偵錯程式已附加訊息應反映在終端控制檯中。此外，執行將在斷點處暫停。我們必須手動再次恢復它。

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

WebdriverIO - 捕獲螢幕截圖

使用 saveScreenshot 方法，我們可以在使用 WebdriverIO 開發的自動化測試中捕獲螢幕截圖。如果遇到應用程式錯誤，通常會捕獲螢幕截圖。斷言失敗等等。

語法

捕獲螢幕截圖的語法如下：

browser.saveScreenshot("name along with path to store screenshot")

這裡，將名稱以及要儲存螢幕截圖的路徑作為引數傳遞給方法。在 WebdriverIO 中，我們沒有為特定元素捕獲螢幕截圖的選項。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Screenshot', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/index.htm')  
      //identify element then enter text
      const e = $("#gsc-i-id1")
      e.setValue('WebdriverIO')
      //capture screenshot of page
      browser.saveScreenshot("screenshot.png")
   });
});

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。您的計算機上將出現以下螢幕：

命令成功執行後，將在專案資料夾中生成一個名為 screenshot.png 的檔案。它包含頁面捕獲的螢幕截圖。

WebdriverIO - JavaScript 執行器

在 WebdriverIO 內部，JavaScript 執行器被捆綁並稱為 executeScript。當普通的 WebdriverIO 方法無法按預期工作時，JavaScript 執行器能夠執行頁面上的所有任務。

語法

JavaScript 執行器的語法如下：

browser.executeScript("JavaScript command")

使用 JavaScript 執行器執行的操作

使用 JavaScript 執行器執行的一些操作如下：

要在 ID 為 txt 的編輯框中輸入文字 - AB，請使用以下命令：

browser.executeScript("document.getElementById('txt').value='AB'")

要單擊連結，請使用以下命令：

browser.executeScript("document.querySelector('.lnk').click()") 

以下命令用於重新整理視窗：

browser.executeScript("history.go(0)")
var t = js.executeScript("return document.getElementById('bln').innerHTML").toString()

向下滾動頁面 350 畫素的命令如下：

browser.executeScript("window.scrollBy(0,350)")
browser.executeScript("window.scrollTo(0, document.body.scrollHeight)")

以下命令用於向下滾動到類為 tcl 的元素。

browser.executeScript("document.querySelector('.tcl').scrollIntoView()")
browser.executeScript("window.history.back()")

以下命令用於在瀏覽器歷史記錄中前進：

browser.executeScript("window.history.forward()")
browser.executeScript("return document.title")

WebdriverIO - 等待

WebdriverIO 中的 waitUnit 方法是等待頁面上的操作/元素的標準方法。它等待滿足條件（真值）。

例如，我們經常等待文字出現在頁面上。

語法

waitUnit 方法的語法如下：

browser.waitUntil(condition, { timeout, timeoutMsg, interval })

這裡，

• condition = 等待的條件。

• 超時以毫秒為單位。預設值為 5000，是一個可選引數。

• timeoutMsg 是超時時丟擲的錯誤訊息，它是一個可選引數。

• interval 是驗證之間的間隔。預設值為 500，它也是一個可選引數。

在下圖中，讓我們單擊連結 - Team 並等待文字 - Team @ Tutorials Point 出現在頁面上。

單擊連結 Team 後，頁面上會顯示突出顯示的訊息。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

// test suite name
describe('Tutorialspoint Application', function(){
   //test case
   it('Waits', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')  
      //identify then click link - Team
      const p = $('=Team')
      p.click()
      //wait for text
      browser.waitUntil(
         () => $('<h1>').getText() === 'Team @ Tutorials Point', {
            timeout: 6000,
            timeoutMsg: 'expected text did not match'
         }
      );
      //identify required text
      const m = $('<h1>')
      console.log(m.getText())   
   });
});

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

npx wdio run wdio.conf.js

如何建立配置檔案的詳細資訊將在名為 wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。您的計算機上將出現以下螢幕：

命令成功執行後，單擊 Team 連結生成的文字 - Team @ Tutorials Point 將列印到控制檯。

WebdriverIO - 並行執行測試

我們可以並行模式執行 WebdriverIO 測試。為此，我們必須在測試資料夾中建立多個規範檔案。並行測試可以執行的執行緒數量由配置檔案 - wdio.conf.js 檔案中的引數定義。

如何建立配置檔案的詳細資訊將在“wdio.conf.js 檔案”和“配置檔案生成”章節中詳細討論，以儲存 WebdriverIO 設定。

讓我們以一個在測試資料夾中具有三個規範檔案的專案為例。您的計算機上將出現以下螢幕：

要在並行模式下執行所有這些檔案，我們首先必須在 wdio.conf.js 檔案的 specs 欄位下指定**'./test/specs/**/*.js'**。這意味著在執行以下命令時，測試資料夾中的所有規範檔案都將被觸發：

npx wdio run wdio.conf.js.

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

命令成功執行後，我們將看到所有三個規範檔案 - testcase1.js、testcase2.js 和 testcase3.js 同時被觸發執行。

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

此外，wdio.conf.js 中的 maxInstances 欄位決定了觸發並行執行的最大執行緒數。預設情況下，該值設定為 10。這裡，我們有三個規範檔案，因此 maxInstances = 10 成立。

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

還有一個名為 capabilities 的欄位位於 wdio.conf.js 檔案中。在此欄位中，我們有一個名為 maxInstances 的引數。它決定了在並行執行期間 Chrome 瀏覽器可以同時開啟的例項數。

讓我們將 capabilities 欄位外部的 maxInstances 引數值設定為 3，然後將 capabilities 欄位內部的 maxInstances 欄位值設定為 2。為 capabilities 內部 maxInstances 設定的值將覆蓋為 capabilities 外部 maxInstances 設定的值。

執行以下命令：

npx wdio run wdio.conf.js

命令成功執行後，我們將看到兩個規範檔案 - testcase1.js 和 testcase2.js 在 Chrome 中同時被觸發執行。它們最初處於 RUNNING 狀態。

一旦 testcase2.js 的狀態變為 PASSED，第三個規範檔案 testcase3.js 將變為 RUNNING 狀態。您的計算機上將出現以下螢幕：

WebdriverIO - 資料驅動測試

我們可以使用 WebdriverIO 實現資料驅動測試。當我們需要使用不同的資料組合多次執行相同的測試用例時，需要資料驅動測試。這裡，我們將看到如何使用外部 JSON 檔案來儲存資料。

在 WebdriverIO 專案中，所有測試檔案都在 specs 資料夾中建立。specs 資料夾位於 test 資料夾中。我們將在 test 資料夾中建立另一個資料夾，例如 testData。

testData 資料夾將包含以鍵值對形式儲存不同資料集的 JSON 檔案。此外，如果我們在 spec 資料夾中有三個測試檔案，並且想要對所有這些檔案進行資料驅動測試，我們需要建立三個 JSON 檔案。

這些 JSON 檔案中的每一個都應專門用於 spec 資料夾中的每個測試檔案。我們將在 testData 資料夾中建立一個 JSON 檔案，例如 test1.json。

現在，在此檔案中新增以下資料：

[
   {
      "email":"test@gmail.com",
      "password":"12"
   },
   {
      "email":"test12@gmail.com",
      "password":"34"
   }
]

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

我們將解析此 JSON 檔案並將其轉換為字串格式。這是透過新增以下庫來完成的：

const s =require('fs')

然後要解析 JSON 檔案，我們將使用 readFileSync 方法並將 JSON 檔案檔案的相對路徑作為引數傳遞給此方法。最後，將其儲存在一個物件中，例如 c。此物件將包含所有資料。

let c = JSON.parse(s.readFileSync('test/testData/test1.json'))

然後，我們將藉助迴圈迭代這兩個資料集上的同一個測試用例。此迴圈必須在程式碼塊之前實現，並且應該傳遞 JSON 檔案中宣告的資料鍵。

使用上述資料集，我們將驗證 LinkedIn 應用程式的登入頁面。在輸入少於 6 個字元的電子郵件和密碼後，點選“登入”按鈕，應該會丟擲一個錯誤訊息 - 您提供的密碼必須至少包含 6 個字元。

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

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

//import chai library
const c = require('chai').expect
//library for parsing JSON file
const s =require('fs')
let h = JSON.parse(s.readFileSync('test/testData/test1.json'))
// test suite name
describe('Tutorialspoint application', function(){
   //iterate the test case
   h.forEach(  ({email,password})  =>{
      //test case
      it('Data Driven testing', function(){    
         // launch url
         browser.url('https://www.linkedin.com/login')  
         //identify the email field then enter key - email
         $("#username").setValue(email)
         //identify password field then enter key - password
         $("#password").setValue(password)
         //identify Sign in button then click
         $("button[type='submit']").click() 
         //verify error message
         const e = $('#error-for-password')
         console.log(e.getText() + ' - Error Text') 
         //verify Alert text with Chai assertion
         c(e.getText()).to.equal("The password you provided must have at least 6     characters.")
      });
   });
});  

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

npx wdio run wdio.conf.js 

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，錯誤文字 - 您提供的密碼必須至少包含 6 個字元 - 將在控制檯中列印兩次。

此外，它還顯示訊息“2 透過”，因為在一個程式碼塊中定義的同一個測試用例已使用兩個不同的資料集執行了兩次。

從命令列引數執行測試

我們可以使用命令列引數控制測試執行。讓我們來看一個場景，在這個場景中，WebdriverIO 專案的 spec 資料夾中包含四個測試檔案。

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

假設我們想僅使用命令列引數觸發 testcase1.js 和 testcase2.js 檔案。為此，我們必須在配置檔案 wdio.conf.js 檔案中新增一個名為 suites 的引數。

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

讓我們假設檔案 testcase1.js 和 testcase2.js 屬於名為 group1 的套件，檔案 testcase3.js 和 testcase4.js 屬於名為 group2 的套件。我們需要將此資訊新增到 wdio.conf.js 檔案的 suite 引數下，如下所示。

suites: {
   group1: ['test/specs/testcase1.js', 'test/specs/testcase2.js'],
   group2: ['test/specs/testcase3.js', 'test/specs/testcase4.js']
},

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

要觸發屬於 group1 的測試檔案 testcase1.js 和 testcase2.js，我們必須執行以下命令：

npx wdio run wdio.conf.js --suite group1

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

命令成功執行後，我們看到 specs 資料夾下只有兩個測試檔案 testcase1.js 和 testcase2.js 被觸發執行。

假設我們想只使用命令列引數觸發檔案 testcase3.js。要只觸發測試檔案 testcase3.js，我們必須執行以下命令：

npx wdio run wdio.conf.js --spec test/specs/testcase3.js

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

命令成功執行後，我們看到 specs 資料夾下只有測試檔案 testcase3.js 被觸發執行。

此外，如果我們想觸發多個測試檔案 testcase3.js 和 testcase4.js，則命令應如下所示：

npx wdio run wdio.conf.js --spec test/specs/testcase3.js, test/specs/testcase4.js

假設我們想排除檔案 testcase4.js 不執行。為此，我們必須在配置檔案 wdio.conf.js 檔案的 exclude 引數下新增要排除的檔案的相對路徑，如下所示。

exclude: [
   // 'path/to/excluded/files'
   'test/specs/testcase4.js'
],

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

然後，我們必須執行以下命令：

npx wdio run wdio.conf.js 

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

命令成功執行後，我們看到 specs 資料夾下的測試檔案 testcase4.js 已被排除在執行之外。

使用 Mocha 選項執行測試

specs 資料夾中的測試檔案包含 describe 和 it 程式碼塊。describe 程式碼塊指的是測試套件，it 程式碼塊指的是測試用例。一個 describe 程式碼塊可以包含多個 it 程式碼塊。

關於如何建立 describe 和 it 程式碼塊的詳細資訊，將在標題為“使用 Webdriverio 的快樂路徑流程”的章節中詳細討論。

為了驗證從開發團隊獲得的新版本是否健康，我們不需要執行套件中的所有測試用例。一些測試用例被確定用於冒煙/健全性測試，一旦我們有了新版本，就會執行這些測試用例。

我們可以使用名為 Grep 的 Mocha 選項來分組測試用例並一起執行它們。為此，我們必須在 it 描述中新增一個關鍵字，例如 Smoke。然後在執行時，我們可以指示 WebdriverIO 測試只觸發描述中包含 Smoke 的 it 程式碼塊。

讓我們來看一個包含四個 it 程式碼塊的測試檔案。在這四個 it 程式碼塊中，有兩個 it 程式碼塊的描述中包含關鍵字 Smoke。

首先，請按照名為“使用 WebdriverIO 的快樂路徑流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 − 安裝 NodeJS。關於如何執行此安裝的詳細資訊在名為“NodeJS 入門”的章節中進行了詳細介紹。

步驟 2 − 安裝 NPM。關於如何執行此安裝的詳細資訊在名為“NPM 安裝”的章節中進行了詳細介紹。

步驟 3 − 安裝 VS Code。關於如何執行此安裝的詳細資訊在名為“VS Code 安裝”的章節中進行了詳細介紹。

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

步驟 5 − 建立一個 spec 檔案。關於如何執行此安裝的詳細資訊在名為“Mocha 安裝”的章節中進行了詳細介紹。

步驟 6 − 在建立的 Mocha spec 檔案中新增以下程式碼。

//import chai library
const c = require('chai').expect
//library for parsing JSON file
const s =require('fs')
let h = JSON.parse(s.readFileSync('test/testData/test1.json'))
// test suite name
describe('Tutorialspoint application', function(){
   //iterate the test case
   h.forEach(  ({email,password})  =>{
      //test case
      it('Data Driven testing', function(){   
         // launch url
         browser.url('https://www.linkedin.com/login')  
         //identify the email field then enter key - email
         $("#username").setValue(email)
         //identify password field then enter key - password
         $("#password").setValue(password)
         //identify SSign in button then click
         $("button[type='submit']").click() 
         //verify error message
         const e = $('#error-for-password')
         console.log(e.getText() + ' - Error Text') 
         //verify Alert text with Chai assertion
         c(e.getText()).to.equal("The password must be provided.")
      });
   });
   // it is blocked with Smoke keyword
   it('Identify element with Id - Smoke', 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())
   });
   // it block with Smoke keyword
   it('Identify element with Tagname - Smoke', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with tagname then obtain text
      console.log($("<h1>").getText() + " - is the text.")
   });
   //test case
   it('Identify element with Class Name', function(){        
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with Class Name then obtain text
      console.log($(".heading").getText() + " - is the text.")
   });
});

要只觸發與 Smoke 相關的 it 程式碼塊，請使用以下命令執行配置檔案 wdio.conf.js 檔案：

npx wdio run wdio.conf.js --mochaOpts.grep Smoke

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，我們發現四個 it 程式碼塊中，只有兩個 it 程式碼塊（描述中帶有 Smoke 標籤）被執行。

從 Allure 生成 HTML 報告

在 WebdriverIO 中，我們有一個 reporter 外掛來生成 Allure 測試報告。Allure 是一款輕量級的測試報告工具，它根據自動化執行的測試結果建立一個簡短且有良好文件記錄的報告。

要安裝 Allure 並建立其在 package.json 檔案中的條目，我們必須執行以下命令：

npm install @wdio/allure-reporter --save-dev

有關 package.json 的詳細資訊，請參閱標題為“package.json 檔案”的章節。

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

安裝 Allure 後，我們必須透過新增以下程式碼在配置檔案 wdio.conf.js 的 reporter 選項中配置輸出目錄。

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

reporters: [['allure', {
   outputDir: 'allure-results',
   disableWebdriverScreenshotsReporting: false,
}]],

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

這裡，outputDir 具有預設目錄 /allure-results。自動化完成後，我們將發現此目錄已生成。它將包含執行中包含的 specs 資料夾中每個測試檔案的 .xml 檔案以及 .txt、.png 和其他檔案。

此外，為了附加失敗測試的螢幕截圖，我們將引數 disableWebdriverScreenshotsReporting 設定為 false。

但是，我們還需要在 wdio.conf.js 檔案中新增一個 afterStep hook，程式碼如下所示：

afterStep: function (test, scenario, { error, duration, passed }) {
   if (error) {
      browser.takeScreenshot();
   }
}

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

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

npx wdio run wdio.conf.js

關於如何建立配置檔案的詳細資訊在名為 Wdio.conf.js 檔案和名為配置檔案生成的章節中詳細討論。

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

命令成功執行後，將在 WebdriverIO 專案中生成一個名為 allure-results（在 wdio.conf.js 中指定）的資料夾。它包含 xml 格式的報告。

接下來，我們必須將這些報告轉換為 HTML 格式。為此，我們將首先安裝 Allure 命令列工具，以根據測試結果生成 Allure 報告。

這是透過執行以下命令完成的：

npm install -g allure-commandline --save-dev

安裝後，我們可以使用以下命令生成 HTML 格式的結果：

allure generate [allure_output_dir] && allure open

要覆蓋現有結果，我們必須執行以下命令：

allure generate [allure_output_dir] --clean && allure open

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

命令成功執行後，將開啟一個包含測試結果的瀏覽器。您的計算機上將出現以下螢幕：

點選失敗的測試（標記為紅色），我們將獲得測試的詳細資訊，包括預期輸出、實際輸出和失敗的螢幕截圖（展開響應後獲得）。

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