核心要点
本文最初发表于 TestProject。
如果您想用 JavaScript 编写功能测试，本教程为 UI 自动化工程师提供了完美的结构化参考材料，用于使用 Selenium WebDriver 3、Mocha 和 NodeJS 进行 JavaScript 测试。
如今，JavaScript 是一种无处不在的 Web 语言，它似乎克服了其“臭名昭著”的过去，并已成为一个更可靠的平台，不仅用于客户端，也用于服务器领域。Mocha.js（或简称为 Mocha）是一个功能丰富的基于 Node.js 的 JavaScript 测试框架，它提供构建独立服务器端应用程序的平台和 API，其基础是 Google 的 V8 JavaScript 引擎。
注意：要开始学习本 JavaScript 教程，您需要熟悉 NodeJS 和 JavaScript 编程语言的基础知识。
教程概述：
使用的版本：
如前所述，Mocha 是一个在 Node 上运行测试的 JavaScript 测试框架。Mocha 以 Node 包（通过 npm）的形式提供，允许您使用任何断言库来替换 Node 的标准“assert”函数，例如 ChaiJS。此外，Mocha 具有与 Jasmine（我们在前端和单元测试自动化趋势研究中提到的另一个流行的测试自动化框架）类似的几个组件。
Mocha 提供了一个 API，它指定了一种将测试代码构建成测试套件和测试用例模块以进行执行，然后生成测试报告的方法。Mocha 提供两种运行模式：命令行 (CLI) 或编程方式 (Mocha API)。
如果要在 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 支持三种测试执行方式：整个测试套件文件、按“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 等），请遵循以下准则以克服意外结果：
在测试函数 (it) 中，您需要将 done 函数传递到回调链中——这确保它在您的最后一步之后执行。
下面的示例强调了 done 功能。在这种情况下，测试函数结束时将发生三秒钟的超时。
<code>npm install -g mocha</code>
返回 Promise 是另一种确保 Mocha 在使用异步函数时已执行所有代码行的方法（在这种情况下不需要“done”函数。）
<code>npm install --save chai</code>
Selenium 是一个控制 Web 浏览器并模拟用户行为的库。更具体地说，Selenium 为用户提供了称为“绑定”的特定语言库 API。“绑定”充当客户端，以便对中间组件执行请求，并充当服务器，以便最终控制浏览器。
Selenium API 或绑定现在存在于所有流行的开发语言中。所有语言实现现在都同意保持 API 函数命名约定的前后一致性。
中间组件可能是每个 Selenium 包中本地找到的实际 webdriver、selenium-standalone-server，以及供应商本机的浏览器控制驱动程序——例如 Mozilla 的 Geckodriver、Chrome 的 chromedriver 等。此外，Selenium webdriver 通过“JsonWired Protocol”与浏览器驱动程序通信，并成为 W3C Web 标准。
在深入研究 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
为了能够使用 Selenium，我们应该构建相应的“webdriver”对象，然后该对象将控制我们的浏览器。下面，我们可以看到我们如何使用“Builder”模式通过链接多个函数来构建 webdriver 对象。
mocha -g “Test-2” /path/to/test_suite.js
在上面的代码中，我们已经成功构建了一个 WebDriver 对象，该对象聚合了多个浏览器的配置（注意“options”方法），尽管 forBrowser() 方法明确设置了 firefox。
用户可以在运行时设置 SELENIUM_BROWSER 环境变量以设置所需的浏览器。它将覆盖 forBrowser 设置的任何选项，因为我们已经通过 set
浏览器属性可以包含多种类型的信息，具体取决于被测浏览器。例如，在 Mozilla 的属性中，我们可以按如下方式设置所需的“profile”配置：
<code>npm install -g mocha</code>
然后，在上面的 Builder 代码段中，我们可以添加：
<code>npm install --save chai</code>
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，则配置将被覆盖（例如代理配置）。
由于 JavaScript 和 NodeJS 基于异步原理，Selenium WebDriver 的行为方式类似。为了避免回调金字塔，并帮助测试工程师提高脚本编写体验以及代码的可读性和可维护性，Selenium WebDriver 对象包含一个使用“ControlFlow”的 Promise 管理器。“ControlFlow”是一个负责异步 webdriver 命令顺序执行的类。
实际上，每个命令都在驱动程序对象上执行，并返回一个 Promise。除非需要处理已解析的 Promise 值，否则不需要将下一个命令嵌套在“then”中，如下所示：
mocha /path/to/test_suite.js
JavaScript 测试 Selenium WebDriver 和 Mocha 的提示
这意味着我们可以执行以下操作：
mocha -g “Test-2” /path/to/test_suite.js
mocha --recursive -g “Test-2” /directory/
注意：title 是一个 Promise 对象，而不是实际的解析值。
一般来说，Selenium WebDriver 可以与 MochaJS 集成，因为它用于任何普通的 NodeJS 脚本。但是，由于 Mocha 在调用 done() 或返回 Promise 之前不知道异步函数何时完成，因此我们必须非常小心地进行处理。
Selenium 命令会自动注册，以确保 webdriver 命令按正确的顺序执行，应该返回一个 Promise。
下面的代码显示了 Mocha 的 (before、beforeEach、after、afterEach) 或测试用例体 it 挂钩。
mocha --help
将执行以下操作：
为了以简单的方式使用 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 包括几个步骤。首先，您需要在系统上安装 Node.js 和 npm（Node 包管理器）。安装完成后，您可以使用 npm 通过运行命令 npm install selenium-webdriver 来安装 Selenium WebDriver。您还需要安装浏览器驱动程序，例如 Google Chrome 的 ChromeDriver，这可以通过运行 npm install chromedriver 来完成。完成这些安装后，您可以开始使用 Selenium WebDriver 用 JavaScript 编写测试脚本。
Mocha 是一个流行的 JavaScript 测试框架，它提供了一种简单灵活的方式来编写和组织测试用例。它经常与 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 命令，后跟测试文件的路径。例如，如果您的测试文件名为 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中文网其他相关文章！
