使用 Selenium 和 JavaScript 啟動(dòng)測試自動(dòng)化的快速指南

寶藏少女 2021-09-03 10:49:28 瀏覽數(shù) (3590)

反饋

測試是軟件開發(fā)生命周期 (SDLC) 的一個(gè)重要階段，其中的主要議程是發(fā)現(xiàn)最大的 bug 并挖掘出能成功發(fā)布產(chǎn)品所需的缺失要求。為了增加產(chǎn)品測試覆蓋率并以最快的方式交付無錯(cuò)誤的產(chǎn)品，重要的是將功能自動(dòng)化測試引入圖片中，以確保產(chǎn)品按預(yù)期運(yùn)行并為最終用戶提供完美的體驗(yàn)。

如今，我們有很多自動(dòng)化測試工具和框架來自動(dòng)化 Web 操作。然而，Selenium 是最流行和最可行的Web自動(dòng)化框架之一。

Selenium 是一個(gè)開源測試框架，用于通過應(yīng)用程序的前端自動(dòng)化端到端的測試過程。它進(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)建測試套件。
?Selenium WebDriver?：是一個(gè)遠(yuǎn)程控制接口，提供對(duì)用戶代理的控制。?Selenium WebDriver?是一個(gè)瀏覽器自動(dòng)化框架，它接受來自語言綁定的命令并將它們轉(zhuǎn)發(fā)到瀏覽器。它通過直接與瀏覽器通信來控制瀏覽器，并通過瀏覽器特定驅(qū)動(dòng)程序?qū)崿F(xiàn)。
?Selenium Grid?：是一種趨勢工具，用于針對(duì)由不同瀏覽器、瀏覽器版本和不同操作系統(tǒng)創(chuàng)建的不同環(huán)境并行運(yùn)行多個(gè)自動(dòng)化測試。?Selenium Grid? 基本上是集線器和節(jié)點(diǎn)的組合，其中集線器是 Selenium 獨(dú)立集線器，節(jié)點(diǎn)是連接到單個(gè)集線器的不同瀏覽器。

Selenium 支持多種腳本語言，如 ?Java?、?Ruby?、?C#?、?Python?、?JavaScript ?等。 ?JavaScript? 是一種高級(jí)、多范式的編程語言，用于客戶端和服務(wù)器端，允許您將靜態(tài)網(wǎng)頁轉(zhuǎn)換為交互式網(wǎng)頁那些。我們將研究如何將 ?Selenium Webdriver? 與 ?Javascript ?一起用于Web 應(yīng)用程序的自動(dòng)化測試。

為什么選擇 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 是世界上使用最多的編程語言。

由于它受到許多 Web 開發(fā)受眾的青睞，因此，將其與 Selenium 集成以增強(qiáng)測試自動(dòng)化可能是一個(gè)主要想法。以下幾點(diǎn)重點(diǎn)說明了為什么選擇 JavaScript 和 Selenium：

JavaScript 是一種開發(fā)良好且結(jié)構(gòu)化的模式語言，它使自動(dòng)化腳本更加緊湊??且易于理解。
基于 Selenium 的 UI 自動(dòng)化與 Javascript 可以是許多組織的良好組合，因?yàn)樗麄兛梢詧?jiān)持使用一種技術(shù)進(jìn)行 Web 開發(fā)和測試自動(dòng)化。
這些技術(shù)是開源和免費(fèi)使用的，并且正在逐步增強(qiáng)以更好地發(fā)展。
它被高級(jí)安全包裹，使用起來相對(duì)安全。
JavaScript 是一種腳本語言，它提供了巨大的優(yōu)勢，因?yàn)樗梢灾苯涌刂品?wù)器或客戶端腳本。

排名前四的 JavaScript 測試框架

1. JEST

?JEST ?是 Facebook 開發(fā)的自動(dòng)化測試框架，用于測試使用 React JS 開發(fā)的應(yīng)用程序的 JavaScript 代碼。它被認(rèn)為是一個(gè)記錄良好且性能快速的 JavaScript 測試框架。使用 ?JEST ?的主要優(yōu)點(diǎn)是可以使用行為驅(qū)動(dòng)的開發(fā)方法編寫測試用例，并且該框架還可用于通過捕獲屏幕截圖來執(zhí)行可視化回歸測試。

2. Nightwatch

?Nightwatch ?是一個(gè)由 node.js 驅(qū)動(dòng)的自動(dòng)化測試框架。它通過利用 W3C Selenium WebDriver API 促進(jìn)了 Web 應(yīng)用程序的端到端測試。它可用于單元測試和集成測試。它有一個(gè)內(nèi)置的命令行測試運(yùn)行器，用于通過重試和隱式等待來執(zhí)行測試。?Nightwatch ?框架的語法非常干凈且易于理解，有助于測試人員編寫更有效的測試用例。

3.Protractor

正如我們上面所研究的，JEST 主要用于基于 React JS 的應(yīng)用程序，類似地，對(duì)于基于 Angular JS 的 Web 應(yīng)用程序，我們有 ?Protractor?。它通常用于 Angular 應(yīng)用程序的端到端測試，并支持與 Selenium 定位器類似的其他定位器，例如：repeater, model, binding等等。設(shè)置針對(duì)不同環(huán)境的測試用例的并行執(zhí)行非常簡單。此外，使用?Protractor?可以更輕松地自動(dòng)截取和比較屏幕截圖。

4. Mocha

自 2011 年以來，?Mocha JS? 一直是流行的自動(dòng)化測試框架。它是一個(gè)開源測試框架，主要由 JavaScript 開發(fā)人員用于單元測試。它在 Node.js 上運(yùn)行，并為前端和后端測試提供兼容性。它廣泛用于第三方斷言、嘲笑和間諜活動(dòng)。它支持 node.js 調(diào)試器，使錯(cuò)誤識(shí)別更容易。?Mocha JS? 框架還以其準(zhǔn)確的報(bào)告和將異常與相關(guān)測試用例輕松映射而聞名。

使用 JavaScript 設(shè)置 Selenium 的先決條件

要繼續(xù)使用 Selenium 和 JavaScript 執(zhí)行測試自動(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)化測試的特定瀏覽器下載驅(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)化測試

完成上述所有步驟并成功完成配置設(shè)置后，我們就可以開始使用 JavaScript 編寫我們的第一個(gè) Selenium 自動(dòng)化測試了。

我們的測試場景如下：

導(dǎo)航到 pCloudy 官方網(wǎng)站
獲取首頁的標(biāo)題
驗(yàn)證首頁標(biāo)題驗(yàn)證登陸pcloudy網(wǎng)站
根據(jù)測試用例通過或失敗打印日志

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庫，然后我們使用我們導(dǎo)入的庫中的Builder方法創(chuàng)建了 chromedriver 的一個(gè)實(shí)例。

接下來，我們使用 driver.get() 導(dǎo)航到 Web 應(yīng)用程序 URL。然后，我們使用 driver.getTitle() 獲取應(yīng)用程序主頁的標(biāo)題，并驗(yàn)證實(shí)際標(biāo)題是否與預(yù)期標(biāo)題匹配。此外，日志將打印在控制臺(tái)上以顯示測試用例的狀態(tài)。在腳本結(jié)束時(shí)，我們退出了正在運(yùn)行的瀏覽器會(huì)話。

要運(yùn)行測試，請執(zhí)行以下命令：

?node first_test.js?

在 pCloudy Browser Cloud 上使用 JavaScript 運(yùn)行 Selenium 自動(dòng)化測試

?pCloudy?是一個(gè)連續(xù)的云測試平臺(tái)，它提供了由真實(shí) Windows 和 Mac 機(jī)器支持的大量瀏覽器組合。瀏覽器平臺(tái)被命名為瀏覽器云，其中所有遠(yuǎn)程機(jī)器都托管在云上，以便我們在不同的環(huán)境（即不同的瀏覽器、多個(gè)瀏覽器版本和不同的操作系統(tǒng)）上利用和運(yùn)行我們的自動(dòng)化測試。

?Browser Cloud? 還提供對(duì)這些云托管機(jī)器上的 Web 應(yīng)用程序的手動(dòng)測試。如果你的自動(dòng)化測試在特定環(huán)境中失敗，你只需從 ?pCloudy UI? 中選擇相同的環(huán)境，就可以在 ?pCloudy ?上的相同環(huán)境中手動(dòng)運(yùn)行該測試。

現(xiàn)在，讓我們快速瀏覽下面基于 JavaScript 的 Selenium 腳本，該腳本將用于在 ?pCloudy? 瀏覽器云上執(zhí)行跨瀏覽器測試：

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)化測試，即?pCloudy Browser Cloud?，添加所需的功能來設(shè)置測試環(huán)境很重要。作為所需功能的一部分，我們傳遞了我們的 pCloudy 憑據(jù)（用戶名和 api 密鑰）以及真實(shí)測試機(jī)器的功能，例如“Mac”作為操作系統(tǒng)、“Catalina”作為操作系統(tǒng)版本、“safari”作為瀏覽器，“14”作為 safari 瀏覽器版本。此外，我們還使用 pCloudy 的一些內(nèi)置功能來捕獲測試視頻記錄、性能數(shù)據(jù)和日志。

為了在 pCloudy Selenium 網(wǎng)格上運(yùn)行我們的測試，我們定義了 selenium 網(wǎng)格 URL。此外，我們已經(jīng)編寫了與上述腳本相同的測試場景的腳本。

pCloudy 輸出：

要查看測試的當(dāng)前運(yùn)行狀態(tài)，你需要定向到?pCloudy 設(shè)備頁面?并單擊報(bào)告-> 我的活動(dòng)會(huì)話：

要查看迄今為止執(zhí)行的所有測試，請直接轉(zhuǎn)到?pCloudy 設(shè)備頁面?并單擊“報(bào)告”->“所有報(bào)告”：

要查看特定測試的日志和快照，請直接轉(zhuǎn)到?pCloudy 設(shè)備頁面?并單擊“報(bào)告”->“所有報(bào)告”并根據(jù)需要對(duì)特定會(huì)話名稱執(zhí)行操作，其日志和屏幕截圖：

結(jié)論

利用 pCloudy 等基于云的測試平臺(tái)是自動(dòng)化測試工作的關(guān)鍵。由于 Selenium 和 JavaScript 都是一些最流行的自動(dòng)化測試系統(tǒng)，因此使用它們跨設(shè)備運(yùn)行您的應(yīng)用程序測試腳本對(duì)于更快地發(fā)布高質(zhì)量的應(yīng)用程序變得更加重要。自動(dòng)化一直是企業(yè)更快開發(fā)和測試應(yīng)用程序的關(guān)鍵驅(qū)動(dòng)因素。我們希望本指南能幫助大家盡快開始應(yīng)用程序的自動(dòng)化之旅。測試愉快！

JavaScript

0 人點(diǎn)贊