測(cè)試是軟件開發(fā)生命周期 (SDLC) 的一個(gè)重要階段，其中的主要議程是發(fā)現(xiàn)最大的 bug 并挖掘出能成功發(fā)布產(chǎn)品所需的缺失要求。為了增加產(chǎn)品測(cè)試覆蓋率并以最快的方式交付無(wú)錯(cuò)誤的產(chǎn)品，重要的是將功能自動(dòng)化測(cè)試引入圖片中，以確保產(chǎn)品按預(yù)期運(yùn)行并為最終用戶提供完美的體驗(yàn)。
如今，我們有很多自動(dòng)化測(cè)試工具和框架來自動(dòng)化 Web 操作。然而，Selenium 是最流行和最可行的Web自動(dòng)化框架之一。
Selenium 是一個(gè)開源測(cè)試框架，用于通過應(yīng)用程序的前端自動(dòng)化端到端的測(cè)試過程。它進(jìn)一步分類為：
- ?
Selenium IDE?： Selenium 集成開發(fā)環(huán)境 (IDE) 主要是一種記錄和回放工具，可用于自動(dòng)執(zhí)行 Web 操作。它易于使用，只需向?yàn)g覽器添加擴(kuò)展程序即可進(jìn)行配置。它是一個(gè)基于 GUI 的應(yīng)用程序，用于記錄與網(wǎng)站的交互并在 IDE 中創(chuàng)建測(cè)試套件。 - ?
Selenium WebDriver?：是一個(gè)遠(yuǎn)程控制接口，提供對(duì)用戶代理的控制。?Selenium WebDriver?是一個(gè)瀏覽器自動(dòng)化框架，它接受來自語(yǔ)言綁定的命令并將它們轉(zhuǎn)發(fā)到瀏覽器。它通過直接與瀏覽器通信來控制瀏覽器，并通過瀏覽器特定驅(qū)動(dòng)程序?qū)崿F(xiàn)。 - ?
Selenium Grid?：是一種趨勢(shì)工具，用于針對(duì)由不同瀏覽器、瀏覽器版本和不同操作系統(tǒng)創(chuàng)建的不同環(huán)境并行運(yùn)行多個(gè)自動(dòng)化測(cè)試。?Selenium Grid? 基本上是集線器和節(jié)點(diǎn)的組合，其中集線器是 Selenium 獨(dú)立集線器，節(jié)點(diǎn)是連接到單個(gè)集線器的不同瀏覽器。
Selenium 支持多種腳本語(yǔ)言，如 ?Java?、?Ruby?、?C#?、?Python?、?JavaScript ?等。 ?JavaScript? 是一種高級(jí)、多范式的編程語(yǔ)言，用于客戶端和服務(wù)器端，允許您將靜態(tài)網(wǎng)頁(yè)轉(zhuǎn)換為交互式網(wǎng)頁(yè)那些。我們將研究如何將 ?Selenium Webdriver? 與 ?Javascript ?一起用于Web 應(yīng)用程序的自動(dòng)化測(cè)試。
為什么選擇 JavaScript 來實(shí)現(xiàn)基于 Selenium 的 UI 自動(dòng)化？
JavaScript 主要用于開發(fā) Web 應(yīng)用程序，因?yàn)樵S多 Web 應(yīng)用程序基于 MEAN 堆棧（MongoDB、Express.js、AngularJS 和 Node.js）或 MERN 堆棧（MongoDB、ExpressJS、ReactJS、Node.js）。根據(jù)Stack Overflow 調(diào)查，JavaScript 是世界上使用最多的編程語(yǔ)言。
由于它受到許多 Web 開發(fā)受眾的青睞，因此，將其與 Selenium 集成以增強(qiáng)測(cè)試自動(dòng)化可能是一個(gè)主要想法。以下幾點(diǎn)重點(diǎn)說明了為什么選擇 JavaScript 和 Selenium：
- JavaScript 是一種開發(fā)良好且結(jié)構(gòu)化的模式語(yǔ)言，它使自動(dòng)化腳本更加緊湊??且易于理解。
- 基于 Selenium 的 UI 自動(dòng)化與 Javascript 可以是許多組織的良好組合，因?yàn)樗麄兛梢詧?jiān)持使用一種技術(shù)進(jìn)行 Web 開發(fā)和測(cè)試自動(dòng)化。
- 這些技術(shù)是開源和免費(fèi)使用的，并且正在逐步增強(qiáng)以更好地發(fā)展。
- 它被高級(jí)安全包裹，使用起來相對(duì)安全。
- JavaScript 是一種腳本語(yǔ)言，它提供了巨大的優(yōu)勢(shì)，因?yàn)樗梢灾苯涌刂品?wù)器或客戶端腳本。
排名前四的 JavaScript 測(cè)試框架
1. JEST
?JEST ?是 Facebook 開發(fā)的自動(dòng)化測(cè)試框架，用于測(cè)試使用 React JS 開發(fā)的應(yīng)用程序的 JavaScript 代碼。它被認(rèn)為是一個(gè)記錄良好且性能快速的 JavaScript 測(cè)試框架。使用 ?JEST ?的主要優(yōu)點(diǎn)是可以使用行為驅(qū)動(dòng)的開發(fā)方法編寫測(cè)試用例，并且該框架還可用于通過捕獲屏幕截圖來執(zhí)行可視化回歸測(cè)試。
2. Nightwatch
?Nightwatch ?是一個(gè)由 node.js 驅(qū)動(dòng)的自動(dòng)化測(cè)試框架。它通過利用 W3C Selenium WebDriver API 促進(jìn)了 Web 應(yīng)用程序的端到端測(cè)試。它可用于單元測(cè)試和集成測(cè)試。它有一個(gè)內(nèi)置的命令行測(cè)試運(yùn)行器，用于通過重試和隱式等待來執(zhí)行測(cè)試。?Nightwatch ?框架的語(yǔ)法非常干凈且易于理解，有助于測(cè)試人員編寫更有效的測(cè)試用例。
3.Protractor
正如我們上面所研究的，JEST 主要用于基于 React JS 的應(yīng)用程序，類似地，對(duì)于基于 Angular JS 的 Web 應(yīng)用程序，我們有 ?Protractor?。它通常用于 Angular 應(yīng)用程序的端到端測(cè)試，并支持與 Selenium 定位器類似的其他定位器，例如：repeater, model, binding等等。設(shè)置針對(duì)不同環(huán)境的測(cè)試用例的并行執(zhí)行非常簡(jiǎn)單。此外，使用?Protractor?可以更輕松地自動(dòng)截取和比較屏幕截圖。
4. Mocha
自 2011 年以來，?Mocha JS? 一直是流行的自動(dòng)化測(cè)試框架。它是一個(gè)開源測(cè)試框架，主要由 JavaScript 開發(fā)人員用于單元測(cè)試。它在 Node.js 上運(yùn)行，并為前端和后端測(cè)試提供兼容性。它廣泛用于第三方斷言、嘲笑和間諜活動(dòng)。它支持 node.js 調(diào)試器，使錯(cuò)誤識(shí)別更容易。?Mocha JS? 框架還以其準(zhǔn)確的報(bào)告和將異常與相關(guān)測(cè)試用例輕松映射而聞名。
使用 JavaScript 設(shè)置 Selenium 的先決條件
要繼續(xù)使用 Selenium 和 JavaScript 執(zhí)行測(cè)試自動(dòng)化，需要檢查的先決條件很少。我們來看一下：
第 1 步：安裝 Node.js npm
Node.js 與 npm 捆綁在一起，即節(jié)點(diǎn)包管理器。你可以從Node.js 官方站點(diǎn)下載相同的內(nèi)容。運(yùn)行以下命令來驗(yàn)證 npm 和 node.js 的安裝：
- npm -v
- node-v
第 2 步：安裝 Selenium WebDriver
Npm 是內(nèi)置的包管理器，它將進(jìn)一步用于為 JS 安裝 Selenium。
以下是安裝 Selenium WebDriver 的命令（-save 用于創(chuàng)建一個(gè)新包，該包將保存到項(xiàng)目 package.json 文件中）：
- npm install –save selenium-webdriver
你還需要為 Chrome、Firefox 或任何其他要在其上執(zhí)行自動(dòng)化測(cè)試的特定瀏覽器下載驅(qū)動(dòng)程序，可以從npm js 站點(diǎn)下載相同的驅(qū)動(dòng)程序。強(qiáng)烈建議將瀏覽器驅(qū)動(dòng)程序的路徑添加到系統(tǒng) PATH 中，以便 Selenium 可以使用這些可執(zhí)行文件直接啟動(dòng)瀏覽器。
第 3 步：安裝 IDE
為了實(shí)現(xiàn)，您可以從下面為 JS 安裝您選擇的任何 IDE：
- Visual Studio Code
- Eclipse
使用 Selenium 和 JavaScript 編寫我們的第一個(gè) Web 自動(dòng)化測(cè)試
完成上述所有步驟并成功完成配置設(shè)置后，我們就可以開始使用 JavaScript 編寫我們的第一個(gè) Selenium 自動(dòng)化測(cè)試了。
我們的測(cè)試場(chǎng)景如下：
- 導(dǎo)航到 pCloudy 官方網(wǎng)站
- 獲取首頁(yè)的標(biāo)題
- 驗(yàn)證首頁(yè)標(biāo)題驗(yàn)證登陸pcloudy網(wǎng)站
- 根據(jù)測(cè)試用例通過或失敗打印日志
first_test.js
var webdriver = require('selenium-webdriver');
const driver = new webdriver.Builder()
.forBrowser('chrome')
.build();
driver.get('http:/www.pCloudy.com').then(function(){
driver.getTitle().then(title=>{
if(title.localeCompare("Mobile App Testing, Continuous Testing Cloud, Mobile Testing Tools | pCloudy")){
console.log("Test Passed!")
}else{
console.log("Test Failed!")
}
})
});
driver.quit();代碼演示：
最初，我們導(dǎo)入了selenium-webdriver庫(kù)，然后我們使用我們導(dǎo)入的庫(kù)中的Builder方法創(chuàng)建了 chromedriver 的一個(gè)實(shí)例。
接下來，我們使用 driver.get() 導(dǎo)航到 Web 應(yīng)用程序 URL。然后，我們使用 driver.getTitle() 獲取應(yīng)用程序主頁(yè)的標(biāo)題，并驗(yàn)證實(shí)際標(biāo)題是否與預(yù)期標(biāo)題匹配。此外，日志將打印在控制臺(tái)上以顯示測(cè)試用例的狀態(tài)。在腳本結(jié)束時(shí)，我們退出了正在運(yùn)行的瀏覽器會(huì)話。
要運(yùn)行測(cè)試，請(qǐng)執(zhí)行以下命令：
?node first_test.js?
在 pCloudy Browser Cloud 上使用 JavaScript 運(yùn)行 Selenium 自動(dòng)化測(cè)試
?pCloudy?是一個(gè)連續(xù)的云測(cè)試平臺(tái)，它提供了由真實(shí) Windows 和 Mac 機(jī)器支持的大量瀏覽器組合。瀏覽器平臺(tái)被命名為瀏覽器云，其中所有遠(yuǎn)程機(jī)器都托管在云上，以便我們?cè)诓煌沫h(huán)境（即不同的瀏覽器、多個(gè)瀏覽器版本和不同的操作系統(tǒng)）上利用和運(yùn)行我們的自動(dòng)化測(cè)試。
?Browser Cloud? 還提供對(duì)這些云托管機(jī)器上的 Web 應(yīng)用程序的手動(dòng)測(cè)試。如果你的自動(dòng)化測(cè)試在特定環(huán)境中失敗，你只需從 ?pCloudy UI? 中選擇相同的環(huán)境，就可以在 ?pCloudy ?上的相同環(huán)境中手動(dòng)運(yùn)行該測(cè)試。
現(xiàn)在，讓我們快速瀏覽下面基于 JavaScript 的 Selenium 腳本，該腳本將用于在 ?pCloudy? 瀏覽器云上執(zhí)行跨瀏覽器測(cè)試：
const webdriver = require('selenium-webdriver');
var id = 'ramit.dhamija@gmail.com';
var accessKey = '5TfF4UcNRbN3JhucQ';
function verifyHomePageTitle() {
const capabilities = {
pCloudy_Username: id,
apiKey: accessKey,
clientName: id,
email: id,
os: 'Mac',
osVersion: 'Catalina',
browserName: 'safari',
browserVersions: '14',
pCloudy_EnableVideo: true,
pCloudy_EnablePerformanceData: true,
pCloudy_EnableDeviceLogs: true
}
const gridUrl = 'https://prod-browsercloud-in.pcloudy.com/seleniumcloud/wd/hub';
const driver = new webdriver.Builder()
.usingServer(gridUrl)
.withCapabilities(capabilities)
.build();
driver.get('http:/www.pCloudy.com').then(function(){
driver.getTitle().then(title=>{
if(title.localeCompare("Mobile App Testing, Continuous Testing Cloud, Mobile Testing
Tools | pCloudy")){
console.log("Test Passed!")
}else{
console.log("Test Failed!")
}
})
});
}
verifyHomePageTitle();代碼演示：
由于我們現(xiàn)在在 Selenium Grid 上運(yùn)行我們的自動(dòng)化測(cè)試，即?pCloudy Browser Cloud?，添加所需的功能來設(shè)置測(cè)試環(huán)境很重要。作為所需功能的一部分，我們傳遞了我們的 pCloudy 憑據(jù)（用戶名和 api 密鑰）以及真實(shí)測(cè)試機(jī)器的功能，例如“Mac”作為操作系統(tǒng)、“Catalina”作為操作系統(tǒng)版本、“safari”作為瀏覽器，“14”作為 safari 瀏覽器版本。此外，我們還使用 pCloudy 的一些內(nèi)置功能來捕獲測(cè)試視頻記錄、性能數(shù)據(jù)和日志。
為了在 pCloudy Selenium 網(wǎng)格上運(yùn)行我們的測(cè)試，我們定義了 selenium 網(wǎng)格 URL。此外，我們已經(jīng)編寫了與上述腳本相同的測(cè)試場(chǎng)景的腳本。
pCloudy 輸出：
要查看測(cè)試的當(dāng)前運(yùn)行狀態(tài)，你需要定向到?pCloudy 設(shè)備頁(yè)面?并單擊報(bào)告-> 我的活動(dòng)會(huì)話：
要查看迄今為止執(zhí)行的所有測(cè)試，請(qǐng)直接轉(zhuǎn)到?pCloudy 設(shè)備頁(yè)面?并單擊“報(bào)告”->“所有報(bào)告”：
要查看特定測(cè)試的日志和快照，請(qǐng)直接轉(zhuǎn)到?pCloudy 設(shè)備頁(yè)面?并單擊“報(bào)告”->“所有報(bào)告”并根據(jù)需要對(duì)特定會(huì)話名稱執(zhí)行操作，其日志和屏幕截圖：
結(jié)論
利用 pCloudy 等基于云的測(cè)試平臺(tái)是自動(dòng)化測(cè)試工作的關(guān)鍵。由于 Selenium 和 JavaScript 都是一些最流行的自動(dòng)化測(cè)試系統(tǒng)，因此使用它們跨設(shè)備運(yùn)行您的應(yīng)用程序測(cè)試腳本對(duì)于更快地發(fā)布高質(zhì)量的應(yīng)用程序變得更加重要。自動(dòng)化一直是企業(yè)更快開發(fā)和測(cè)試應(yīng)用程序的關(guān)鍵驅(qū)動(dòng)因素。我們希望本指南能幫助大家盡快開始應(yīng)用程序的自動(dòng)化之旅。測(cè)試愉快！
