核心要點

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

本文最初發(fā)表于 TestProject。

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

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

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

教程概述：

1. Mocha 測試構(gòu)建

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

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

• Selenium 簡介
• Selenium 安裝
• WebDriver 構(gòu)造
• 將 MochaJS 與 Selenium WebDriver 3 集成

使用的版本：

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

1. 使用 Mocha 構(gòu)建測試

Mocha 簡介

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

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

安裝 Mocha

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

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

安裝 Chai Assertion 模塊

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

–save 選項用于在項目的范圍內(nèi)安裝模塊，而不是全局安裝。

測試套件和測試用例結(jié)構(gòu)

在 Mocha 中，測試套件由“describe”關(guān)鍵字定義，該關(guān)鍵字接受一個回調(diào)函數(shù)。測試套件可以包含子/內(nèi)部測試套件，這些子/內(nèi)部測試套件可以包含它們自己的子測試套件，等等。測試用例由“it”函數(shù)表示，該函數(shù)接受一個回調(diào)函數(shù)并包含測試代碼。

Mocha 支持測試套件設(shè)置和測試用例設(shè)置函數(shù)。“before”表示測試套件設(shè)置，而“beforeEach”表示測試用例設(shè)置?！癰eforeEach”實際上是套件中每個用例的通用設(shè)置，將在每個用例之前執(zhí)行。

與設(shè)置一樣，Mocha 支持測試套件和測試用例拆卸函數(shù)?！癮fter”表示測試套件拆卸，而“afterEach”表示測試用例拆卸，這兩個函數(shù)分別在測試套件和每個測試用例之后執(zhí)行。

創(chuàng)建一個將“托管”測試套件的文件，例如 test_suite.js，并將以下內(nèi)容寫入其中；

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

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

});

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

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

運行整個測試套件文件：

mocha /path/to/test_suite.js

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

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

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

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

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

有關(guān)擴展的 CLI 選項：

mocha --help

管理異步測試代碼的同步

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

1. done 函數(shù)

在測試函數(shù) (it) 中，您需要將 done 函數(shù)傳遞到回調(diào)鏈中——這確保它在您的最后一步之后執(zhí)行。

下面的示例強調(diào)了 done 功能。在這種情況下，測試函數(shù)結(jié)束時將發(fā)生三秒鐘的超時。

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

2. 返回 Promise

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

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

2. Javascript Selenium 3 與 MochaJS 集成

Selenium 簡介

Selenium 是一個控制 Web 瀏覽器并模擬用戶行為的庫。更具體地說，Selenium 為用戶提供了稱為“綁定”的特定語言庫 API?！敖壎ā背洚斂蛻舳耍员銓χ虚g組件執(zhí)行請求，并充當服務器，以便最終控制瀏覽器。

Selenium API 或綁定現(xiàn)在存在于所有流行的開發(fā)語言中。所有語言實現(xiàn)現(xiàn)在都同意保持 API 函數(shù)命名約定的前后一致性。

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

Selenium 安裝

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

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

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

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

});

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

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

mocha /path/to/test_suite.js

WebDriver 構(gòu)造

為了能夠使用 Selenium，我們應該構(gòu)建相應的“webdriver”對象，然后該對象將控制我們的瀏覽器。下面，我們可以看到我們?nèi)绾问褂谩癇uilder”模式通過鏈接多個函數(shù)來構(gòu)建 webdriver 對象。

帶有選項的 Builder

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

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

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

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

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

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

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

帶有功能的 Builder

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

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

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

});

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

Selenium WebDriver 控制流和 Promise 管理

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

實際上，每個命令都在驅(qū)動程序?qū)ο笊蠄?zhí)行，并返回一個 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 對象！

這意味著我們可以執(zhí)行以下操作：

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 在調(diào)用 done() 或返回 Promise 之前不知道異步函數(shù)何時完成，因此我們必須非常小心地進行處理。

基于 Promise 的

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

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

mocha --help

將執(zhí)行以下操作：

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

Selenium Webdriver 對 MochaJS 的支持

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

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

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

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

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

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

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

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

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

        // 測試代碼
        // 斷言

    });

});

結(jié)論

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

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

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

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

如何為 JavaScript 測試設(shè)置 Selenium WebDriver？

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

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

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

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

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

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

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

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

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

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

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

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

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

可以使用 JavaScript 的 try/catch 語法處理測試用例中的錯誤。這允許您捕獲測試用例執(zhí)行期間發(fā)生的任何錯誤并適當?shù)靥幚硭鼈?，例如通過記錄錯誤并使測試用例失敗。

如何與網(wǎng)頁上的元素交互？

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

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

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

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

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

以上是如何使用Selenium Webdriver和Mocha測試JavaScript的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！