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

　　WebdriverIO架構(gòu)

您將在本W(wǎng)ebdriverIO教程中學(xué)習(xí)的第一個(gè)也是最重要的主題將是WebdriverIO體系結(jié)構(gòu)。這是運(yùn)行WebDriverIO測試腳本時(shí)發(fā)生的情況。

NodeJS： NodeJS是一個(gè)開源項(xiàng)目，可幫助運(yùn)行Javascript運(yùn)行時(shí)環(huán)境。

WebdriverIO： WebdriverIO建立在與NodeJS進(jìn)行通信的NodeJS之上。

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

當(dāng)用戶運(yùn)行WebdriverIO測試腳本時(shí)，將執(zhí)行以下流程：

用戶編寫的JavaScript通過NodeJS將WebdriverIO的請求通過JSON Wire Protocol通過HTTP命令的形式發(fā)送到服務(wù)。現(xiàn)在，服務(wù)將請求轉(zhuǎn)發(fā)給瀏覽器以執(zhí)行用戶操作。

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

WebdriverIO 是Javascript中廣泛使用的測試自動(dòng)化框架。它具有各種功能，例如，它支持許多報(bào)告和服務(wù)，測試框架和WDIO CLI測試運(yùn)行程序。以下是受支持的報(bào)告程序示例：

魅力記者

簡明記者

點(diǎn)記者

JUnit記者

規(guī)格報(bào)告者

社會學(xué)記者

　　以下是受支持服務(wù)的示例

鴉片服務(wù)

Devtools服務(wù)

Firefox個(gè)人資料服務(wù)

硒獨(dú)立服務(wù)

共享商店服務(wù)

靜態(tài)服務(wù)器服務(wù)

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

此WebDriverIO教程的先決條件

在我們繼續(xù)執(zhí)行本W(wǎng)ebDriverIO教程中的Selenium自動(dòng)化測試腳本之前，請確保進(jìn)行以下設(shè)置。

　　安裝Node和npm

為了進(jìn)行基本設(shè)置，您需要安裝node.js。要檢查是否已安裝node.js，而不僅僅是鍵入 node -v 命令并運(yùn)行，您應(yīng)該看到node.js版本。

　　$ node -v

如果節(jié)點(diǎn)安裝正確，那么您將看到節(jié)點(diǎn)安裝版本。

當(dāng)您安裝nodejs時(shí)，node為您提供了一個(gè)javascript運(yùn)行時(shí)環(huán)境。另外，它默認(rèn)安裝了npm，它不過是節(jié)點(diǎn)軟件包管理器。npm幫助用戶安裝第三方庫。您可以通過在終端上鍵入以下命令來檢查已安裝的npm版本。

　　$ npm -v

如果看到任何錯(cuò)誤，請按照NodeJs官方網(wǎng)站上給出的說明進(jìn)行操作。

　　為WebDriverIO創(chuàng)建項(xiàng)目工作區(qū)

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

mkdir LambdaTestProject && cd LambdaTestProject

　　初始化package.json

通過鍵入以下命令來創(chuàng)建package.json文件：

npm init -y

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

　　如果不輸入“ -y”選項(xiàng)，則應(yīng)提供以下選項(xiàng)

安裝WebdriverIO CLI

此WebdriverIO教程的下一步將是CLI依賴項(xiàng)的安裝，我們需要運(yùn)行以下命令：

npm i --save-dev @wdio/cli

作為以上命令的結(jié)果，您可以看到在package.json文件中添加了依賴項(xiàng)(“ @ 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"

}

}

注意：如果發(fā)現(xiàn)任何權(quán)限錯(cuò)誤，請嘗試使用sudo命令運(yùn)行。

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

將依賴項(xiàng)添加到程序包后，您需要?jiǎng)?chuàng)建一個(gè)webdriverIO配置文件以通過WebdriverIO執(zhí)行Selenium腳本。

　　WebdriverIO配置

輸入以下命令以創(chuàng)建WebdriverIO配置文件：

./node_modules/.bin/wdio config -y

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

@ wdio / local-runner

@ wdio / mocha-framework

@ wdio / spec-reporter

@ wdio-chromedriver-service

@ wdio / sync – chromedriver

　　這是命令的輸出，該命令說明需要運(yùn)行哪個(gè)文件

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

默認(rèn)情況下，此自動(dòng)配置將服務(wù)設(shè)置為chromedriver，框架設(shè)置為Mocha with BDD options。

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

./node_modules/.bin/wdio config

您可以根據(jù)需要選擇顯示的選項(xiàng)。并且，這是輸入上述選項(xiàng)后的最終輸出。

　　創(chuàng)建一個(gè)測試文件夾

在每個(gè)測試項(xiàng)目中，我們都需要?jiǎng)?chuàng)建一個(gè)文件夾，將所有Selenium測試用例放在一個(gè)位置。在終端中鍵入以下命令以為此WebDriverI0教程創(chuàng)建測試文件夾。

mkdir -p ./test/specs

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

　　創(chuàng)建一個(gè)測試腳本文件

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

touch ./test/specs/myFirstScript.js

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

　　驗(yàn)證wdio測試運(yùn)行程序

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

./node_modules/.bin/wdio run 

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

　　在本地Selenium WebDriver上執(zhí)行第一個(gè)WebdriverIO腳本

現(xiàn)在，我們已經(jīng)為該WebDriverI0教程設(shè)置了所有先決條件。現(xiàn)在是時(shí)候解決問題了，并 使用WebDriverI0 運(yùn)行我們的第一個(gè)Selenium自動(dòng)化測試腳本。由于您已經(jīng)設(shè)置了本地環(huán)境以使用chrome運(yùn)行第一個(gè)腳本。您可以使用以下腳本開始。復(fù)制以下代碼，然后粘貼到 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示例腳本演練

讓我們了解給定的代碼。在第一行中，您已經(jīng)導(dǎo)入了assert庫，以便我們可以在程序中使用assert。

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

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

現(xiàn)在，讓我們了解我們編寫的Selenium測試步驟。首先，瀏覽器是一個(gè)全局定義的對象。您也可以使用驅(qū)動(dòng)程序?qū)ο蟠妗盀g覽器”。browser.url()方法將打開作為參數(shù)提供的URL。

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

語法是$（選擇器）。

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

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

最后，我們已經(jīng)使用Assert.strictEqual()方法來驗(yàn)證瀏覽器標(biāo)題。有許多斷言方法可以幫助您在腳本中執(zhí)行更多斷言。

在本地計(jì)算機(jī)上使用Selenium Webdriver測試執(zhí)行

現(xiàn)在，我們將快速了解如何在不同的操作系統(tǒng)上執(zhí)行這些WebdriverIO教程測試腳本。

　　Mac作業(yè)系統(tǒng)

如果您已完成Mac操作系統(tǒng)上的設(shè)置和配置，則不必?fù)?dān)心其他設(shè)置。只需從項(xiàng)目根目錄鍵入以下命令。

./node_modules/.bin/wdio run 

這是完整的執(zhí)行結(jié)果控制臺日志。在中， 默認(rèn)日志級別為“信息”，因此您可以查看信息級別的詳細(xì)信息。

　　Windows操作系統(tǒng)

為了在Windows 10操作系統(tǒng)上運(yùn)行相同的腳本，請執(zhí)行以下步驟

打開“指定測試文件”，這是項(xiàng)目根文件夾下

找到“功能”部分

添加“ platformName：'Windows 10'”

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

　　內(nèi)部硒設(shè)置的挑戰(zhàn)

在當(dāng)今世界，大多數(shù)企業(yè)都在采用敏捷SDLC。因此，我們見證了主要供應(yīng)商針對瀏覽器，移動(dòng)操作系統(tǒng)，臺式機(jī)操作系統(tǒng)等的快速發(fā)布。無論是WebdriverIO還是任何其他測試自動(dòng)化框架，如果市場以如此快的速度進(jìn)行更新，那么創(chuàng)建和維護(hù)Selenium Grid基礎(chǔ)設(shè)施都可能是一個(gè)挑戰(zhàn)性的挑戰(zhàn)。使用內(nèi)部Selenium測試設(shè)置進(jìn)行擴(kuò)展時(shí)，有以下缺點(diǎn)。

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

從長遠(yuǎn)來看，一個(gè)項(xiàng)目需要更多的測試用例覆蓋和更快的結(jié)果。使用不同的瀏覽器組合和操作系統(tǒng)在本地執(zhí)行需要花費(fèi)大量時(shí)間，因此團(tuán)隊(duì)必須等到執(zhí)行得到結(jié)果之后才能執(zhí)行。

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

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

　　昂貴的通話

如您所知，當(dāng)前的市場用戶擁有許多瀏覽器選項(xiàng)和操作系統(tǒng)。要管理包括腳本升級在內(nèi)的整個(gè)設(shè)置，執(zhí)行和修復(fù)的成本將很高，因?yàn)槟枰粋€(gè)專門的團(tuán)隊(duì)來完成所有這些任務(wù)，而長期運(yùn)行會更加昂貴。您還必須在硬件上投入大量資金。

　　維護(hù)

最后但并非最不重要的一點(diǎn)是，維護(hù)整個(gè)設(shè)置是一個(gè)巨大的挑戰(zhàn)。專門的團(tuán)隊(duì)必須維護(hù)腳本，本地服務(wù)器并進(jìn)行設(shè)置和環(huán)境升級。在這種情況下，專職團(tuán)隊(duì)將花費(fèi)更多的時(shí)間進(jìn)行維護(hù)，而不是進(jìn)行實(shí)際的質(zhì)量檢查工作。

　　那么，您該如何克服這些挑戰(zhàn)呢？

　　使用在線硒網(wǎng)格克服挑戰(zhàn)

這是 基于云的Selenium自動(dòng)化測試（例如LambdaTest）可以在少數(shù)地方進(jìn)行的地方。用于自動(dòng)化測試的在線Selenium Grid可以幫助您更快地?cái)U(kuò)展規(guī)模，快速交付產(chǎn)品以及強(qiáng)大的渠道。這是怎么了！

　　具有成本效益的

如果使用不同的瀏覽器及其版本（包括各種平臺）運(yùn)行腳本，則比運(yùn)行本地設(shè)置環(huán)境的成本要低。如今，基于云的平臺提供了按需測試環(huán)境，基于會話的并發(fā)會話，這具有成本效益。為什么？因?yàn)樵粕咸峁┑幕A(chǔ)架構(gòu)由一組用戶共享。因此，您不必自己動(dòng)手做一個(gè)設(shè)備實(shí)驗(yàn)室。您可以選擇使用預(yù)先構(gòu)建的基于云的Selenium Grid。

　　更大的覆蓋范圍和更快的結(jié)果

通過最少的配置，基于云的測試自動(dòng)化提供了許多選項(xiàng)來同時(shí)運(yùn)行腳本，您可以在多個(gè)瀏覽器和平臺上涵蓋許多測試用例，并獲得更快的結(jié)果。

　　輕松訪問

借助基于云的測試自動(dòng)化平臺，用戶可以隨時(shí)隨地訪問整個(gè)項(xiàng)目。您不必依賴于專用訪問權(quán)限和實(shí)驗(yàn)室即可訪問，只需登錄到基于云的平臺即可準(zhǔn)備訪問其資源和項(xiàng)目。

　　更多的環(huán)境和平臺

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

　　支持團(tuán)隊(duì)

許多基于云的平臺都有專門的支持團(tuán)隊(duì)，他們將在其中幫助您解決與環(huán)境有關(guān)的問題。擁有一支專門的支持團(tuán)隊(duì)將真正幫助您節(jié)省環(huán)境維護(hù)的大量時(shí)間。

　　團(tuán)隊(duì)協(xié)作

基于云的測試平臺可幫助團(tuán)隊(duì)從任何位置進(jìn)行單個(gè)項(xiàng)目。因此，測試人員可以在任何地理位置和零變化的任何時(shí)間運(yùn)行腳本。

　　與第三方工具的大量集成

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

　　在線Selenium網(wǎng)格上的WebdriverIO測試執(zhí)行

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

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

現(xiàn)在，假設(shè)您要運(yùn)行為本地計(jì)算機(jī)編寫的相同腳本，在LamdaTest上，您只需要更改指定測試文件即可。

以下配置在Windows 10操作系統(tǒng)上的Chrome版本79.0上運(yùn)行。

注意：從LamdaTest網(wǎng)站添加實(shí)際的用戶名和accessKey。

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

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: "",

運(yùn)行 ./node_modules/.bin/wdio 之后 ，您可以在LambdaTest帳戶上找到正在執(zhí)行的測試用例。如果轉(zhuǎn)到LambdaTest 自動(dòng)化儀表板，則可以找到有關(guān)WebdriverIO和Selenium測試腳本執(zhí)行的所有相關(guān)詳細(xì)信息。這是本地控制臺日志：

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

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

時(shí)間軸：在時(shí)間軸屏幕上，您可以看到自動(dòng)化腳本構(gòu)建版本。您可以在功能中提供構(gòu)建版本名稱。

自動(dòng)化日志： 在自動(dòng)化日志中，您可以詳細(xì)查看每次執(zhí)行，包括瀏覽器版本，操作系統(tǒng)版本，執(zhí)行日期和時(shí)間，視頻，屏幕截圖和執(zhí)行步驟。

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

命令： 在命令視圖中，您可以查看每個(gè)步驟元素的狀態(tài)。

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

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

分析： 在此選項(xiàng)卡中，用戶可以按今天，每周和每月查看構(gòu)建狀態(tài)以及其他重要信息。

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

　　用于并行硒測試的WebdriverIO示例

當(dāng)您的項(xiàng)目測試腳本增長時(shí)，執(zhí)行和產(chǎn)生結(jié)果將花費(fèi)更多時(shí)間。您還需要找到一種解決方案，以便以更快的方式生成結(jié)果，許多不同類型的瀏覽器正在進(jìn)入市場，我們必須對此進(jìn)行應(yīng)對。在這種情況下，并行執(zhí)行將幫助我們找到正確的解決方案。

使用并行瀏覽器的優(yōu)點(diǎn)是：

　　加快執(zhí)行速度

　　瀏覽器和操作系統(tǒng)范圍

在WebdriverIO中，有一個(gè)名為maxInstances 的屬性 ，可幫助您運(yùn)行并行瀏覽器。 使用多個(gè)瀏覽器功能更改當(dāng)前的并運(yùn)行相同的腳本。

以下功能將在Mac操作系統(tǒng)上運(yùn)行Safari瀏覽器，在Windows操作系統(tǒng)上運(yùn)行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

}

],

您可以根據(jù)目標(biāo)操作系統(tǒng)的CPU容量添加多個(gè)實(shí)例。 為了獲得穩(wěn)定的結(jié)果，建議根據(jù)需要?jiǎng)?chuàng)建 maxInstances。

讓我們查看LamdaTest自動(dòng)化儀表板并查看執(zhí)行詳細(xì)信息。您可以看到在并發(fā)會話下運(yùn)行了兩個(gè)測試，下面的屏幕快照中顯示了詳細(xì)信息。

您可以在功能部分中看到我們設(shè)置的內(nèi)部版本名稱。更多關(guān)于WebdriverIO的信息，請繼續(xù)關(guān)注中培偉業(yè)。