如何使用Selenium Webdriver和Mocha測試JavaScript

核心要點

• Mocha.js 是一個功能豐富的基於 Node.js 的 JavaScript 測試框架，可用於結合 Selenium WebDriver 3 和 NodeJS 編寫 JavaScript 功能測試。這需要熟悉 NodeJS 和 JavaScript 編程語言的基礎知識。
• Mocha 提供了一個 API，用於將測試代碼構建成測試套件和測試用例模塊，從而實現執行和報告生成。它支持測試套件設置和拆卸函數，以及測試用例設置和拆卸函數。
• Selenium WebDriver 是一個控制 Web 瀏覽器並模擬用戶行為的庫，可以與 MochaJS 集成。它提供稱為“綁定”的特定語言庫 API 來控制瀏覽器。
• 與 Mocha 一起使用的異步函數需要正確處理，以避免意外結果。這可以通過將“done”函數傳遞到回調鍊或返回 Promise 來實現。
• 其他框架，如 WebdriverIO、Protractor 和 CodeseptJS，提供了包裝器解決方案，可以為用戶隱藏一些配置，並提供增強型 Promise 處理，從而獲得更好的腳本編寫體驗。

本文最初發表於 TestProject。

如果您想用 JavaScript 編寫功能測試，本教程為 UI 自動化工程師提供了完美的結構化參考材料，用於使用 Selenium WebDriver 3、Mocha 和 NodeJS 進行 JavaScript 測試。

如今，JavaScript 是一種無處不在的 Web 語言，它似乎克服了其“臭名昭著”的過去，並已成為一個更可靠的平台，不僅用於客戶端，也用於服務器領域。 Mocha.js（或簡稱為 Mocha）是一個功能豐富的基於 Node.js 的 JavaScript 測試框架，它提供構建獨立服務器端應用程序的平台和 API，其基礎是 Google 的 V8 JavaScript 引擎。

注意：要開始學習本 JavaScript 教程，您需要熟悉 NodeJS 和 JavaScript 編程語言的基礎知識。

教程概述：

1. Mocha 測試構建

• 簡介
• 安裝
• 安裝 Chai Assertion 模塊
• 測試套件和測試用例結構
• 使用 Mocha 構建測試
• 運行 Mocha 的測試套件和測試用例
• 管理異步測試代碼的同步

2. 使用與 MochaJS 集成的 Javascript Selenium 3 API

• Selenium 簡介
• Selenium 安裝
• WebDriver 構造
• 將 MochaJS 與 Selenium WebDriver 3 集成

使用的版本：

• Node 版本：6.10.1 (LTS)
• Mocha：2.5.3
• WebDriverJS：3.3.0

1. 使用 Mocha 構建測試

Mocha 簡介

如前所述，Mocha 是一個在 Node 上運行測試的 JavaScript 測試框架。 Mocha 以 Node 包（通過 npm）的形式提供，允許您使用任何斷言庫來替換 Node 的標準“assert”函數，例如 ChaiJS。此外，Mocha 具有與 Jasmine（我們在前端和單元測試自動化趨勢研究中提到的另一個流行的測試自動化框架）類似的幾個組件。

Mocha 提供了一個 API，它指定了一種將測試代碼構建成測試套件和測試用例模塊以進行執行，然後生成測試報告的方法。 Mocha 提供兩種運行模式：命令行 (CLI) 或編程方式 (Mocha API)。

安裝 Mocha

如果要在 CLI 中使用 Mocha，則應將其全局安裝為 Node.js。

<code>npm install -g mocha</code>

安裝 Chai Assertion 模塊

<code>npm install --save chai</code>

–save 選項用於在項目的範圍內安裝模塊，而不是全局安裝。

測試套件和測試用例結構

在 Mocha 中，測試套件由“describe”關鍵字定義，該關鍵字接受一個回調函數。測試套件可以包含子/內部測試套件，這些子/內部測試套件可以包含它們自己的子測試套件，等等。測試用例由“it”函數表示，該函數接受一個回調函數並包含測試代碼。

Mocha 支持測試套件設置和測試用例設置函數。 “before”表示測試套件設置，而“beforeEach”表示測試用例設置。 “beforeEach”實際上是套件中每個用例的通用設置，將在每個用例之前執行。

與設置一樣，Mocha 支持測試套件和測試用例拆卸函數。 “after”表示測試套件拆卸，而“afterEach”表示測試用例拆卸，這兩個函數分別在測試套件和每個測試用例之後執行。

創建一個將“託管”測試套件的文件，例如 test_suite.js，並將以下內容寫入其中；

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

運行 Mocha 測試套件和測試用例

Mocha 支持三種測試執行方式：整個測試套件文件、按“grep”模式過濾的測試以及在目錄樹中查找（遞歸選項）的測試 grep 過濾

運行整個測試套件文件：

mocha /path/to/test_suite.js

從特定測試套件文件中運行特定的套件或測試。

如果選擇了套件，則將執行所有子套件和/或測試。

mocha -g “Test-2” /path/to/test_suite.js

通過在目錄樹中遞歸搜索來運行特定的套件或測試文件。

mocha --recursive -g “Test-2” /directory/

有關擴展的 CLI 選項：

mocha --help

管理異步測試代碼的同步

如果與 Mocha 一起使用異步函數且未正確處理，您可能會發現自己難以應對。如果要在測試用例中使用異步代碼（例如 http 請求、文件、selenium 等），請遵循以下準則以克服意外結果：

1. done 函數

在測試函數 (it) 中，您需要將 done 函數傳遞到回調鏈中——這確保它在您的最後一步之後執行。

下面的示例強調了 done 功能。在這種情況下，測試函數結束時將發生三秒鐘的超時。

<code>npm install -g mocha</code>

2. 返回 Promise

返回 Promise 是另一種確保 Mocha 在使用異步函數時已執行所有代碼行的方法（在這種情況下不需要“done”函數。）

<code>npm install --save chai</code>

2. Javascript Selenium 3 與 MochaJS 集成

Selenium 簡介

Selenium 是一個控制 Web 瀏覽器並模擬用戶行為的庫。更具體地說，Selenium 為用戶提供了稱為“綁定”的特定語言庫 API。 “綁定”充當客戶端，以便對中間組件執行請求，並充當服務器，以便最終控制瀏覽器。

Selenium API 或綁定現在存在於所有流行的開發語言中。所有語言實現現在都同意保持 API 函數命名約定的前後一致性。

中間組件可能是每個 Selenium 包中本地找到的實際 webdriver、selenium-standalone-server，以及供應商本機的瀏覽器控制驅動程序——例如 Mozilla 的 Geckodriver、Chrome 的 chromedriver 等。此外，Selenium webdriver 通過“JsonWired Protocol”與瀏覽器驅動程序通信，並成為 W3C Web 標準。

Selenium 安裝

在深入研究 Selenium 與 MochaJS 的集成之前，我們將快速了解 Selenium 與 NodeJS 的實現。

為了使用 JavaScript 的 Selenium API（或 Selenium JavaScript 綁定），我們應該安裝相應的模塊：

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

此時，應該明確的是，Javascript Selenium WebDriver 也可稱為 Webdriverjs（儘管不在 npm 中）。 Webdrivejs 與其他庫/模塊（如 WebdriverIO、Protractor 等）不同。 selenium-webdriver 是官方的開源基礎 JavaScript Selenium 庫，而其他庫是構建在 webdriverjs API 之上的包裝器庫/框架，聲稱可以增強可用性和維護性。

在 NodeJS 代碼中，模塊通過以下方式使用：

mocha /path/to/test_suite.js

WebDriver 構造

為了能夠使用 Selenium，我們應該構建相應的“webdriver”對象，然後該對象將控制我們的瀏覽器。下面，我們可以看到我們如何使用“Builder”模式通過鏈接多個函數來構建 webdriver 對象。

帶有選項的 Builder

mocha -g “Test-2” /path/to/test_suite.js

在上面的代碼中，我們已經成功構建了一個 WebDriver 對象，該對象聚合了多個瀏覽器的配置（注意“options”方法），儘管 forBrowser() 方法明確設置了 firefox。

用戶可以在運行時設置 SELENIUM_BROWSER 環境變量以設置所需的瀏覽器。它將覆蓋 forBrowser 設置的任何選項，因為我們已經通過 setOptions 設置了多個瀏覽器功能。

瀏覽器屬性可以包含多種類型的信息，具體取決於被測瀏覽器。例如，在 Mozilla 的屬性中，我們可以按如下方式設置所需的“profile”配置：

<code>npm install -g mocha</code>

然後，在上面的 Builder 代碼段中，我們可以添加：

<code>npm install --save chai</code>

帶有功能的 Builder

Selenium WebDriver JavaScript API 文檔介紹了構建 webdriver 的幾種方法。另一種可能的方法是將所有必需的驅動程序配置設置為功能：

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

請注意，如果在 withCapabilities 之後設置 setOptions，則配置將被覆蓋（例如代理配置）。

Selenium WebDriver 控制流和 Promise 管理

由於 JavaScript 和 NodeJS 基於異步原理，Selenium WebDriver 的行為方式類似。為了避免回調金字塔，並幫助測試工程師提高腳本編寫體驗以及代碼的可讀性和可維護性，Selenium WebDriver 對象包含一個使用“ControlFlow”的 Promise 管理器。 “ControlFlow”是一個負責異步 webdriver 命令順序執行的類。

實際上，每個命令都在驅動程序對像上執行，並返回一個 Promise。除非需要處理已解析的 Promise 值，否則不需要將下一個命令嵌套在“then”中，如下所示：

mocha /path/to/test_suite.js

JavaScript 測試 Selenium WebDriver 和 Mocha 的提示

1. driver 是一個 webdriver 對象，而不是 Promise 對象
2. driver.getTitle() 或 driver.get(url) 或任何其他 Selenium 命令都返回一個 Promise 對象！

這意味著我們可以執行以下操作：

mocha -g “Test-2” /path/to/test_suite.js

1. 此外，由於 driver 本身是異步的，因此以下操作將不起作用：

mocha --recursive -g “Test-2” /directory/

注意：title 是一個 Promise 對象，而不是實際的解析值。

MochaJS Selenium WebDriver

一般來說，Selenium WebDriver 可以與 MochaJS 集成，因為它用於任何普通的 NodeJS 腳本。但是，由於 Mocha 在調用 done() 或返回 Promise 之前不知道異步函數何時完成，因此我們必須非常小心地進行處理。

基於 Promise 的

Selenium 命令會自動註冊，以確保 webdriver 命令按正確的順序執行，應該返回一個 Promise。

下面的代碼顯示了 Mocha 的 (before、beforeEach、after、afterEach) 或測試用例體 it 掛鉤。

mocha --help

將執行以下操作：

1. 加載“my_service”的瀏覽器頁面
2. 定位 id 為“username”的文本字段
3. 使用“my_username”填充 id 為“username”的文本字段
4. 檢索頁面標題並檢查其是否與“my_title”相等
5. WebDriver 退出，瀏覽器窗口關閉。瀏覽器進程終止。

Selenium Webdriver 對 MochaJS 的支持

為了以簡單的方式使用 Selenium WebDriver 和 Mocha 執行 JavaScript 測試，WebDriver 通過使用測試對象包裝 MochaJS 測試函數 (before、beforeEach、it 等) 來促進與 MochaJS 的使用。這創建了一個範圍，該範圍提供了對正在使用 WebDriver 的認識。因此，不需要返回 Promise。

首先，應加載相應的模塊：

<code>npm install -g mocha</code>

所有 Mocha 函數都以“test.”開頭，如下所示：

<code>npm install --save chai</code>

等等。然後，上面的代碼完全重寫為：

describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    it("Test-1", function(){

        // 测试代码
        // 断言

    });

    it("Test-2", function(){

        // 测试代码
        // 断言

    });

    it("Test-3", function(){

        // 测试代码
        // 断言

    });

});

結論

在本教程中，我們有機會體驗使用 Selenium WebDriver 和 MochaJS 進行 JavaScript 測試。我們應該記住，與其他編程語言綁定相比，由於 NodeJS、MochaJS 和 Selenium WebDriver 的異步特性，存在主要區別。

只要我們在創建 Promise 的任何函數（自定義測試庫函數或 MochaJS 掛鉤/測試用例）中繼續返回 Promise，Mocha 就會按正確的順序執行它們。

其他框架，如WebdriverIO、Protractor 和CodeseptJS，提供了包裝器解決方案，可以為用戶隱藏一些配置，並提供一些增強型Promise 處理，從而獲得更好的腳本編寫體驗，許多測試自動化專家可能會發現這很有用。

關於使用 Selenium WebDriver 和 Mocha 測試 JavaScript 的常見問題解答 (FAQ)

如何為 JavaScript 測試設置 Selenium WebDriver？

為 JavaScript 測試設置 Selenium WebDriver 包括幾個步驟。首先，您需要在系統上安裝 Node.js 和 npm（Node 包管理器）。安裝完成後，您可以使用 npm 通過運行命令 npm install selenium-webdriver 來安裝 Selenium WebDriver。您還需要安裝瀏覽器驅動程序，例如 Google Chrome 的 ChromeDriver，這可以通過運行 npm install chromedriver 來完成。完成這些安裝後，您可以開始使用 Selenium WebDriver 用 JavaScript 編寫測試腳本。

什麼是 Mocha，為什麼將其與 Selenium WebDriver 一起使用？

Mocha 是一個流行的 JavaScript 測試框架，它提供了一種簡單靈活的方式來編寫和組織測試用例。它經常與 Selenium WebDriver 一起使用，因為它提供了異步測試等功能，這對於處理網絡請求和瀏覽器操作等具有延遲的操作至關重要。 Mocha 還提供簡潔明了的語法，使您的測試用例更易於編寫和理解。

如何使用 Selenium WebDriver 和 Mocha 編寫基本的測試用例？

使用 Selenium WebDriver 和 Mocha 編寫基本的測試用例包括創建一個新的 JavaScript 文件，並在 Mocha describe 和 it 塊中編寫測試用例。在此塊中，您可以使用 Selenium WebDriver 的 API 與瀏覽器交互，例如導航到網頁、與元素交互以及檢查它們的屬性。這是一個基本的示例：

<code>npm install -g mocha</code>

如何在我的測試用例中處理異步操作？

您可以使用 JavaScript 的 async/await 語法在測試用例中處理異步操作。這允許您以同步方式編寫異步代碼，使其更易於閱讀和理解。在 Selenium WebDriver 的上下文中，導航到網頁、與元素交互和等待條件等操作都是異步的，可以使用 async/await 進行處理。

如何使用 Mocha 運行我的測試用例？

要使用 Mocha 運行測試用例，您可以使用 mocha 命令，後跟測試文件的路徑。例如，如果您的測試文件名為 test.js，則可以使用命令 mocha test.js 運行它。 Mocha 將自動查找並運行此文件中的所有測試用例。

如何在我的測試用例中使用斷言？

測試用例中的斷言可用於驗證是否滿足某些條件。例如，您可能希望在執行搜索後斷言網頁的標題符合您的預期。可以使用 JavaScript 的內置 assert 模塊或 Chai 等第三方庫來編寫斷言。

如何在我的測試用例中處理錯誤？

可以使用 JavaScript 的 try/catch 語法處理測試用例中的錯誤。這允許您捕獲測試用例執行期間發生的任何錯誤並適當地處理它們，例如通過記錄錯誤並使測試用例失敗。

如何與網頁上的元素交互？

可以使用 Selenium WebDriver 的 API 與網頁上的元素交互。這包括單擊元素、在輸入字段中鍵入內容以及讀取元素屬性等操作。這些操作是使用 driver.findElement 方法執行的，該方法返回一個您可以與其交互的 WebElement 對象。

如何在我的測試用例中等待條件？

可以使用 Selenium WebDriver 的 driver.wait 方法在我的測試用例中等待條件。此方法採用條件和可選超時，並等待直到滿足條件或達到超時。可以使用 until 模塊創建條件，例如 until.titleIs 以等待網頁的標題為某個值。

如何在不同的瀏覽器中運行我的測試用例？

可以通過在創建 WebDriver 實例時指定瀏覽器來在不同的瀏覽器中運行測試用例。例如，您可以使用 new Builder().forBrowser('firefox') 在 Firefox 中運行測試用例，或使用 new Builder().forBrowser('chrome') 在 Chrome 中運行它們。您需要安裝相應的瀏覽器驅動程序才能使其工作。

以上是如何使用Selenium Webdriver和Mocha測試JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！