WebdriverIO是基于nodeJs的基于Java的測試自動化框架。這是為自動化測試社區開發的開源項目。WebdriverIO是可擴展的，兼容的，功能豐富的，并且易于安裝。這被視為支持桌面瀏覽器和移動應用程序的下一代測試自動化框架。這使WebDriverIO成為Selenium自動化測試的理想選擇。它支持BDD和TDD測試框架。WebdriverIO的最新版本是5.X。在此用于Selenium自動化測試的WebDriverIO教程中，我將向您展示如何開始編寫WebdriverIO的第一個Selenium腳本。

　　WebdriverIO架構

您將在本WebdriverIO教程中學習的第一個也是最重要的主題將是WebdriverIO體系結構。這是運行WebDriverIO測試腳本時發生的情況。

NodeJS： NodeJS是一個開源項目，可幫助運行Javascript運行時環境。

WebdriverIO： WebdriverIO建立在與NodeJS進行通信的NodeJS之上。

JavaScript： 該腳本由用戶在WebdriverIO庫的幫助下編寫。

當用戶運行WebdriverIO測試腳本時，將執行以下流程：

用戶編寫的JavaScript通過NodeJS將WebdriverIO的請求通過JSON Wire Protocol通過HTTP命令的形式發送到服務。現在，服務將請求轉發給瀏覽器以執行用戶操作。

　　為什么WebdriverIO是流行的測試框架？

WebdriverIO 是Javascript中廣泛使用的測試自動化框架。它具有各種功能，例如，它支持許多報告和服務，測試框架和WDIO CLI測試運行程序。以下是受支持的報告程序示例：

魅力記者

簡明記者

點記者

JUnit記者

規格報告者

社會學記者

　　以下是受支持服務的示例

鴉片服務

Devtools服務

Firefox個人資料服務

硒獨立服務

共享商店服務

靜態服務器服務

此外，它在開發人員和測試人員中非常受歡迎。每日下載量約為84,957，每周下載量約為414,847，每年下載量為1,848,479。到目前為止，它已經發布了243個發行版本。此外，有活躍的社區和對此問題的支持，Github中有5.3K星。

此WebDriverIO教程的先決條件

在我們繼續執行本WebDriverIO教程中的Selenium自動化測試腳本之前，請確保進行以下設置。

　　安裝Node和npm

為了進行基本設置，您需要安裝node.js。要檢查是否已安裝node.js，而不僅僅是鍵入 node -v 命令并運行，您應該看到node.js版本。

　　$ node -v

如果節點安裝正確，那么您將看到節點安裝版本。

當您安裝nodejs時，node為您提供了一個javascript運行時環境。另外，它默認安裝了npm，它不過是節點軟件包管理器。npm幫助用戶安裝第三方庫。您可以通過在終端上鍵入以下命令來檢查已安裝的npm版本。

　　$ npm -v

如果看到任何錯誤，請按照NodeJs官方網站上給出的說明進行操作。

　　為WebDriverIO創建項目工作區

通過創建工作區文件夾來設置項目文件夾，我們將所有文件保留在其中。作為用于Selenium測試的WebDriverIO教程的示例 ，我們將該文件夾稱為“ LambdaTestProject ”。在終端中運行以下命令。

mkdir LambdaTestProject && cd LambdaTestProject

　　初始化package.json

通過鍵入以下命令來創建package.json文件：

npm init -y

使用此命令，我們創建了 package.json 文件，可以在其中添加運行自動化所需的依賴項。我們在npm init命令中添加了-y選項。當您添加-y選項時，您將跳過所有詢問“是”提示的輸入，并為您設置默認的package.json設置。請記住，參數“ -y”是可選的。

　　如果不輸入“ -y”選項，則應提供以下選項

安裝WebdriverIO CLI

此WebdriverIO教程的下一步將是CLI依賴項的安裝，我們需要運行以下命令：

npm i --save-dev @wdio/cli

作為以上命令的結果，您可以看到在package.json文件中添加了依賴項(“ @ wdio / cli”：“ ^ 5.16.11”)。

{

"name": "lambdatestproject",

"version": "1.0.0",

"description": "Webdriver First Script",

"main": "index.js",

"scripts": {

"test": "echo "Error: no test specified" && exit 1"

},

"author": "",

"license": "ISC",

"devDependencies": {

"@wdio/cli": "^5.16.11"

}

}

注意：如果發現任何權限錯誤，請嘗試使用sudo命令運行。

sudo npm i --save-dev @wdio/cli

將依賴項添加到程序包后，您需要創建一個webdriverIO配置文件以通過WebdriverIO執行Selenium腳本。

　　WebdriverIO配置

輸入以下命令以創建WebdriverIO配置文件：

./node_modules/.bin/wdio config -y

通過此命令，將自動配置以下軟件包，當然，您以后可以更改。

@ wdio / local-runner

@ wdio / mocha-framework

@ wdio / spec-reporter

@ wdio-chromedriver-service

@ wdio / sync – chromedriver

　　這是命令的輸出，該命令說明需要運行哪個文件

同樣，這里我們使用了-y選項，因此可以為您設置所有默認選項。然后在項目根文件夾下創建了文件。我們將使用此文件來配置我們的項目。

默認情況下，此自動配置將服務設置為chromedriver，框架設置為Mocha with BDD options。

最后兩行告訴您如何執行書面的自動化腳本。如果要避免使用“ -y”選項，請鍵入以下命令，并且必須提供如下所示的輸入：

./node_modules/.bin/wdio config

您可以根據需要選擇顯示的選項。并且，這是輸入上述選項后的最終輸出。

　　創建一個測試文件夾

在每個測試項目中，我們都需要創建一個文件夾，將所有Selenium測試用例放在一個位置。在終端中鍵入以下命令以為此WebDriverI0教程創建測試文件夾。

mkdir -p ./test/specs

注意： 如果您在上述命令中提供了不同的specs路徑，則需要確保 在文件中提到了相同的文件夾路徑 specs:

　　創建一個測試腳本文件

WebdriverIO教程的下一個前提條件是測試腳本，這是一個JavaScript文件，我們將在其中編寫Selenium自動化測試腳本。

touch ./test/specs/myFirstScript.js

在您喜歡的任何編輯器中打開此 myFirstScript.js，并開始編寫您的第一個Selenium測試腳本。

　　驗證wdio測試運行程序

WebdriverIO提供了一個名為wdio的測試運行程序，您可以在其中運行腳本。它直接放在/node_modules/.bin下。

./node_modules/.bin/wdio run 

它會掃描您的文件，并根據文件中提到的配置準備Selenium測試套件。然后，它選擇中提到的specs文件并開始執行腳本。在我們的例子中，我們設置了 specs：['./test/specs/**/*. js ']因此，它將啟動'./test/specs文件夾'下存在的所有js文件 。

　　在本地Selenium WebDriver上執行第一個WebdriverIO腳本

現在，我們已經為該WebDriverI0教程設置了所有先決條件。現在是時候解決問題了，并 使用WebDriverI0 運行我們的第一個Selenium自動化測試腳本。由于您已經設置了本地環境以使用chrome運行第一個腳本。您可以使用以下腳本開始。復制以下代碼，然后粘貼到 myFirstScript.js 文件中。

WebdriverIO示例腳本

const assert = require("assert");

describe("Lambdatest Demo Test", function() {

it("Lambdatest Demo TestCase", function() {

browser.url("https://lambdatest.github.io/sample-todo-app/");

$("*[name='li1']").click();

$("*[name='li2']").click();

$("#sampletodotext").setValue("Lambdatest ");

assert.strictEqual(browser.getTitle(), "Sample page - lambdatest.com");

});

});

　　WebdriverIO示例腳本演練

讓我們了解給定的代碼。在第一行中，您已經導入了assert庫，以便我們可以在程序中使用assert。

describe()塊允許您將所有測試保持在一個describe函數下。在這種情況下，您已經定義了描述“ Lambdatest Demo Test ”。換句話說，您可以考慮套件塊。

每個describe()可以具有多個it()。it()只是您的測試用例。您可以在describe函數下編寫N個測試用例。

現在，讓我們了解我們編寫的Selenium測試步驟。首先，瀏覽器是一個全局定義的對象。您也可以使用驅動程序對象代替“瀏覽器”。browser.url()方法將打開作為參數提供的URL。

$()將Web元素返回給用戶，然后用戶可以執行click()操作。

語法是$（選擇器）。

在此示例中，我將選擇器用作XPath和ID。下面是帶有Name參數的XPath示例。

另一個選擇器示例是ID。如果要在ID的幫助下選擇元素，則只需在ID名稱前添加#。因此， #sampletodotext 是ID選擇器。此外，您可以看到click()方法用于在元素上單擊（click），setValue()用于在文本框中輸入值。

最后，我們已經使用Assert.strictEqual()方法來驗證瀏覽器標題。有許多斷言方法可以幫助您在腳本中執行更多斷言。

在本地計算機上使用Selenium Webdriver測試執行

現在，我們將快速了解如何在不同的操作系統上執行這些WebdriverIO教程測試腳本。

　　Mac作業系統

如果您已完成Mac操作系統上的設置和配置，則不必擔心其他設置。只需從項目根目錄鍵入以下命令。

./node_modules/.bin/wdio run 

這是完整的執行結果控制臺日志。在中， 默認日志級別為“信息”，因此您可以查看信息級別的詳細信息。

　　Windows操作系統

為了在Windows 10操作系統上運行相同的腳本，請執行以下步驟

打開“指定測試文件”，這是項目根文件夾下

找到“功能”部分

添加“ platformName：'Windows 10'”

榮譽！您已經 通過此WebdriverIO教程成功運行了第一個 Selenium測試腳本。現在，我們將研究有關使用Selenium和WebdriverIO進行自動化測試的更多實際問題。當您的項目需要更廣泛的自動化瀏覽器測試范圍并具有快速執行結果時。在這種情況下，本地硒設置將不是真正的理想選擇。讓我們明白為什么嗎？

　　內部硒設置的挑戰

在當今世界，大多數企業都在采用敏捷SDLC。因此，我們見證了主要供應商針對瀏覽器，移動操作系統，臺式機操作系統等的快速發布。無論是WebdriverIO還是任何其他測試自動化框架，如果市場以如此快的速度進行更新，那么創建和維護Selenium Grid基礎設施都可能是一個挑戰性的挑戰。使用內部Selenium測試設置進行擴展時，有以下缺點。

測試用例覆蓋范圍更大，結果變慢！

從長遠來看，一個項目需要更多的測試用例覆蓋和更快的結果。使用不同的瀏覽器組合和操作系統在本地執行需要花費大量時間，因此團隊必須等到執行得到結果之后才能執行。

更多的瀏覽器和操作系統，以及其版本范圍。

如今，由于市場用戶可以選擇許多產品，因此產品對瀏覽器和操作范圍的要求更高。在這種情況下，如果您在本地設置了硒網格，則需要付出巨大的努力來維護包括不同瀏覽器在內的硒網格，并考慮為不同的操作系統及其版本進行設置。對于更長的運行，幾乎不可能在本地進行維護。

　　昂貴的通話

如您所知，當前的市場用戶擁有許多瀏覽器選項和操作系統。要管理包括腳本升級在內的整個設置，執行和修復的成本將很高，因為您需要一個專門的團隊來完成所有這些任務，而長期運行會更加昂貴。您還必須在硬件上投入大量資金。

　　維護

最后但并非最不重要的一點是，維護整個設置是一個巨大的挑戰。專門的團隊必須維護腳本，本地服務器并進行設置和環境升級。在這種情況下，專職團隊將花費更多的時間進行維護，而不是進行實際的質量檢查工作。

　　那么，您該如何克服這些挑戰呢？

　　使用在線硒網格克服挑戰

這是 基于云的Selenium自動化測試（例如LambdaTest）可以在少數地方進行的地方。用于自動化測試的在線Selenium Grid可以幫助您更快地擴展規模，快速交付產品以及強大的渠道。這是怎么了！

　　具有成本效益的

如果使用不同的瀏覽器及其版本（包括各種平臺）運行腳本，則比運行本地設置環境的成本要低。如今，基于云的平臺提供了按需測試環境，基于會話的并發會話，這具有成本效益。為什么？因為云上提供的基礎架構由一組用戶共享。因此，您不必自己動手做一個設備實驗室。您可以選擇使用預先構建的基于云的Selenium Grid。

　　更大的覆蓋范圍和更快的結果

通過最少的配置，基于云的測試自動化提供了許多選項來同時運行腳本，您可以在多個瀏覽器和平臺上涵蓋許多測試用例，并獲得更快的結果。

　　輕松訪問

借助基于云的測試自動化平臺，用戶可以隨時隨地訪問整個項目。您不必依賴于專用訪問權限和實驗室即可訪問，只需登錄到基于云的平臺即可準備訪問其資源和項目。

　　更多的環境和平臺

對于測試覆蓋范圍，涵蓋許多平臺和瀏覽器非常重要。采購這些都是非常昂貴的。因此，已經建立了基于云的平臺，以便您可以為項目利用多個平臺和環境。

　　支持團隊

許多基于云的平臺都有專門的支持團隊，他們將在其中幫助您解決與環境有關的問題。擁有一支專門的支持團隊將真正幫助您節省環境維護的大量時間。

　　團隊協作

基于云的測試平臺可幫助團隊從任何位置進行單個項目。因此，測試人員可以在任何地理位置和零變化的任何時間運行腳本。

　　與第三方工具的大量集成

使用LambdaTest，您可以使用WebdriverIO執行Selenium自動化測試，并享受項目管理，CI CD管道，無代碼自動化，錯誤跟蹤，即時消息傳遞等更多第三方集成的便利。

　　在線Selenium網格上的WebdriverIO測試執行

在用于Selenium自動化測試的WebdriverIO教程的這一部分中，我們將通過LambdaTest提供的2000多個真實瀏覽器的在線Selenium Grid來執行Selenium腳本執行。在LamdaTest上運行測試之前，您需要安裝dev Dependency。您可以通過輸入以下命令進行安裝

npm install @wdio/selenium-standalone-service --save-dev

現在，假設您要運行為本地計算機編寫的相同腳本，在LamdaTest上，您只需要更改指定測試文件即可。

以下配置在Windows 10操作系統上的Chrome版本79.0上運行。

注意：從LamdaTest網站添加實際的用戶名和accessKey。

最重要的是服務參數。您需要設置為selenium-standalone，否則腳本將無法在LamdaTest上運行。此外，您必須更改path和baseUrl參數，如下所示。

path: "/wd/hub",

capabilities: [

{

maxInstances: 5,

name: "My First Script - Chrome-Window", // name of the test,

user: "",

accessKey: "",

build: "FirstScript-Demo",

platformName: "Windows 10",

browserName: "Chrome",

browserVersion: "79.0",

video: true,

console: true,

visual: false

}

],

coloredLogs: true,

hostname: "hub.lambdatest.com",

port: 80,

baseUrl: "",

運行 ./node_modules/.bin/wdio 之后 ，您可以在LambdaTest帳戶上找到正在執行的測試用例。如果轉到LambdaTest 自動化儀表板，則可以找到有關WebdriverIO和Selenium測試腳本執行的所有相關詳細信息。這是本地控制臺日志：

　　您將在LamdaTest儀表板上獲得哪些詳細信息？

儀表板： 在“儀表板”視圖中，您可以檢查摘要，在其中運行總測試的概述以及并發會話詳細信息以及其他更多信息。

時間軸：在時間軸屏幕上，您可以看到自動化腳本構建版本。您可以在功能中提供構建版本名稱。

自動化日志： 在自動化日志中，您可以詳細查看每次執行，包括瀏覽器版本，操作系統版本，執行日期和時間，視頻，屏幕截圖和執行步驟。

例外： 如果在LambdaTest上執行Selenium和WebdriverIO腳本時遇到任何例外，則它們都將列在“例外”選項卡下。

命令： 在命令視圖中，您可以查看每個步驟元素的狀態。

日志： 您可以查看Selenium日志和控制臺日志。

元數據：“ 元數據”視圖為您提供了提供的元詳細信息，輸入配置以及您通過的瀏覽器配置。

分析： 在此選項卡中，用戶可以按今天，每周和每月查看構建狀態以及其他重要信息。

直觀的儀表板并不是您可以選擇LambdaTest的唯一功能。另一個非常重要的關鍵功能是能夠使用Selenium執行并行測試。

　　用于并行硒測試的WebdriverIO示例

當您的項目測試腳本增長時，執行和產生結果將花費更多時間。您還需要找到一種解決方案，以便以更快的方式生成結果，許多不同類型的瀏覽器正在進入市場，我們必須對此進行應對。在這種情況下，并行執行將幫助我們找到正確的解決方案。

使用并行瀏覽器的優點是：

　　加快執行速度

　　瀏覽器和操作系統范圍

在WebdriverIO中，有一個名為maxInstances 的屬性 ，可幫助您運行并行瀏覽器。 使用多個瀏覽器功能更改當前的并運行相同的腳本。

以下功能將在Mac操作系統上運行Safari瀏覽器，在Windows操作系統上運行Chrome瀏覽器。

capabilities: [

{

maxInstances: 5,

name: "My First Script - Chrome-Window", // name of the test,

user: "",

accessKey: "",

build: "MyFirstScript-Demo",

platformName: "Windows 10", // macOS High Sierra & Windows 10

browserName: "Chrome",

browserVersion: "79.0",

video: true,

console: true,

visual: false

},

{

name: "My First Script - Safari-Mac", // name of the test,

user: "",

accessKey: "",

build: "MyFirstScript-Demo",

platformName: "macOS High Sierra", // macOS High Sierra & Windows 10

browserName: "Safari",

browserVersion: "11.0",

video: true,

console: true,

visual: false

}

],

您可以根據目標操作系統的CPU容量添加多個實例。 為了獲得穩定的結果，建議根據需要創建 maxInstances。

讓我們查看LamdaTest自動化儀表板并查看執行詳細信息。您可以看到在并發會話下運行了兩個測試，下面的屏幕快照中顯示了詳細信息。

您可以在功能部分中看到我們設置的內部版本名稱。更多關于WebdriverIO的信息，請繼續關注中培偉業。