JavaScript功能测试与Nightwatch.js

Eric Elliott 曾撰写过一篇关于 JavaScript 测试的文章：《JavaScript 测试：单元测试、功能测试和集成测试》，文中解释了不同类型的测试以及何时使用哪种测试。

本文将更深入地探讨 JavaScript 功能测试，并使用 Nightwatch.js 库进行演示。

在开始之前，让我们回顾一下功能测试是什么，以及它为什么重要。简单来说，功能测试旨在确保应用程序从用户的角度来看按预期工作。

我们这里讨论的不是单元测试或集成测试之类的技术测试。这里的目标是确保用户能够无缝地执行特定场景，例如登录平台、购买产品等等。

关键要点

• Nightwatch.js 是一个基于 Node.js 的端到端测试框架，它依赖于 Selenium 进行 Web 浏览器自动化，从而可以编写脚本化的场景，然后由浏览器自动执行。
• Nightwatch.js 需要在机器上安装 Node.js，并且它依赖于 Selenium WebDriver API，该 API 需要在 Java 上运行的 Selenium WebDriver 服务器，因此需要在用户的环境中安装 Java 开发工具包 (JDK 7 )。
• Nightwatch.js 的配置可以放在项目根目录下的 nightwatch.json 文件或 nightwatch.conf.js 文件中，它允许创建多个测试环境，例如默认环境、登台环境或生产环境。
• Nightwatch.js 支持页面对象方法，该方法将被测页面或页面片段包装到对象中，以抽象出底层的 HTML 和通用配置，从而简化场景并使测试套件更易于维护。

Nightwatch.js 简介

Nightwatch.js 将自己描述为一个基于 Node.js 的端到端测试框架。它依赖于 Selenium，这是一个旨在促进 Web 浏览器自动化的项目。

通过用户友好的语法，Nightwatch.js 可以“编写脚本”场景，然后由浏览器（不一定是非 headless 的）自动执行。

安装 Nightwatch

Nightwatch 本身是一个 Node.js 模块，这意味着您需要在您的机器上安装 Node.js。最简单的方法是使用版本管理器，例如 nvm。Nightwatch 在 npm 上分发，因此您可以像安装其他模块一样安装它——使用 -g 全局安装，或使用 --save-dev 在当前项目中安装。

npm install --save-dev nightwatch

Nightwatch 依赖于 Selenium WebDriver API，因此需要一个 Selenium WebDriver 服务器。它运行在 Java 上，这意味着您还必须在您的环境中安装 Java 开发工具包 (JDK 7 )。您可以从 Oracle 网站下载 JDK。

下载并安装完成后，您可以使用 java -version 确保 Java 在您的机器上可用。最后一步是从 Selenium 下载页面下载打包为 jar 的 Selenium 独立服务器。我建议您将其放在项目中的 bin 文件夹内。

npm install --save-dev nightwatch

好了，我们现在准备好了。让我们开始吧。

配置 Nightwatch

您可以想象，Nightwatch 有很多配置。幸运的是，我们不必了解所有内容即可开始。配置可以放在项目根目录下的 nightwatch.json 文件或 nightwatch.conf.js 文件中。我建议使用后者，因为它更灵活，并且允许您添加注释。

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

注意：我个人觉得当配置文件被分割成更小的配置对象时更容易阅读，而 JSON 文件不允许这样做。

在本例中，我们告诉 Nightwatch 我们的测试将位于 tests 文件夹中，使用特定的 Selenium 配置和特定的测试设置。让我们逐段来看：

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

通过此配置对象，我们告诉 Selenium 在 127.0.0.1:4444 上运行，这恰好是 Nightwatch 的默认值。我们还确保它使用我们下载并存储在 bin 文件夹中的 Selenium 服务器自动启动。

注意：有关更高级的用法，请务必查看所有 Selenium 选项的列表。

继续进行实际的测试设置：

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

Nightwatch 的 test_settings 选项期望一个对象，其键是每个环境的名称，映射到另一个配置对象。在本例中，我们还没有设置自定义环境（尚未），因此我们使用默认环境。稍后，我们可以拥有登台或生产测试环境。

在环境配置中，我们告诉 Nightwatch 打开哪个 URL（例如，登台环境的 URL 将不同），以及应该使用哪个浏览器运行测试。

注意：有关更高级的用法，请务必查看所有测试选项的列表。

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

在本例中，我们将使用 Firefox，启用 JavaScript，并接受 SSL 证书。我们可以更进一步，指定特定的浏览器版本（使用 version）或操作系统（使用 platform）。

注意：有关更高级的用法，请务必查看所有功能选项的列表。

好了，我们现在有了正确的配置。是时候编写第一个测试了！

编写 Nightwatch 测试

对于我们的测试，我们将考虑一个位于 /login 的登录页面，其中包含一个电子邮件字段、一个密码字段和一个提交按钮。提交表单后，用户应该被重定向到一个显示“新闻提要”的页面。

在我们的配置中，我们指定测试位于名为 tests 的文件夹中。让我们创建这个 tests 文件夹，以及一个名为 login.js 的文件。

npm install --save-dev nightwatch

此文件将导出一个对象，该对象描述了我们的场景。每个键（如果有多个）都是测试的名称，映射到包含要执行的步骤的函数。

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

测试函数公开了一个对象，该对象提供了描述场景所需的 API。首先要做的是导航到登录 URL。然后，填写字段并按下按钮。最后，检查我们是否可以看到“新闻提要”文本。

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

注意：始终使用 .end() 来终止指令列表，以便正确关闭 Selenium 会话。

这很简单！我们现在可以运行我们的测试以查看它是否有效：

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

这应该给我们类似这样的结果：

注意：随着 Firefox 47 的发布，基于扩展的 FirefoxDriver 版本停止工作。这已在 Firefox 47.1 和 Selenium 2.53.1 中修复。要使用不同的浏览器运行测试，请查阅项目的 wiki。

我们可以做的最后一件事是，为了避免每次都访问 Nightwatch 二进制文件，在 package.json 中创建一个小的 npm 脚本作为别名：

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

改进 Nightwatch 测试

拥有大量的功能测试会导致大量重复的信息，这使得维护（是的，测试套件也需要维护）变得困难。为了防止这种情况，我们可以使用页面对象。

在端到端测试领域，页面对象方法是一种流行的模式，它包括将被测页面（或页面片段）包装到对象中。目标是抽象出底层的 HTML 和通用配置以简化场景。

幸运的是，Nightwatch 有一个简单的方法来处理页面对象。我们需要做的第一件事是将 page_objects_path 选项添加到配置中。我觉得 tests/pages 很有意义；不过，您可以指定任何您想要的文件夹。

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

现在，我们可以在此文件夹中创建一个 login.js 文件。稍后将使用文件名作为键来检索此文件中指定的全部配置，因此我建议为其命名一个有意义的名称。

在此文件中，我们将指定一个 URL 并使用友好的名称为一些 HTML 元素设置别名，以使编写未来的场景更容易。

<code>your_project/
|
|– bin/
|   |– selenium-server-standlone-2.53.1.jar
|
|– tests/
|   |– login.js
|
|- nightwatch.conf.js
`– package.json</code>

请注意，我们没有硬编码 URL。相反，我们使其依赖于环境配置中定义的 launchUrl 选项。通过这种方式，我们的页面对象与上下文无关，无论环境如何，它都能工作。

现在修改我们的测试以使用页面对象非常简单。首先，我们需要通过客户端从页面对象中检索页面。每个页面对象都被公开为一个以页面对象文件名命名的函数（例如 login()）。

然后，我们可以用我们的别名替换我们的 CSS 选择器，并在前面加上 @ 符号以指示我们指的是自定义名称。就是这样。

npm install --save-dev nightwatch

注意我们如何在客户端本身而不是页面上终止会话。

使用多个环境

能够在不同的环境中运行功能测试对于确保本地工作没有破坏任何用户路径，或者登台和生产环境的工作方式相同非常有用。

要在特定环境中运行测试，我们可以在 CLI 中使用 --env 选项。当我们省略该选项时，将使用默认环境（已在我们的配置中）。

让我们将登台环境添加到我们的配置中。

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

现在，当我们运行测试时，launch_url 选项将根据环境而不同。

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

总结

让我们总结一下所有这些。Nightwatch.js 是一个用于编写端到端功能测试的 JavaScript 框架。它依赖于 Selenium WebDriver API，并且能够自动运行不同的浏览器。

编写测试主要包括定义典型的用户场景。为此目的，有一个简单但非常完整的 API。

从这里开始，我将把它留给您，并鼓励您开始为您的最大项目编写功能测试，以确保您永远不会再次破坏用户功能！

Nightwatch.js 常见问题解答 (FAQ)

Nightwatch.js 在 JavaScript 测试中的主要目的是什么？

Nightwatch.js 是一个功能强大且易于使用的 Web 应用程序和网站测试解决方案，它使用 Node.js 编写。它简化了设置持续集成和编写自动化测试的过程。Nightwatch.js 也可以用于编写 Node.js 单元测试。它提供了一种简洁的语法，允许您快速编写测试，并且它具有内置的命令行测试运行器，使您可以按顺序或并行运行测试，分组或独立运行。

Nightwatch.js 与其他 JavaScript 测试框架相比如何？

Nightwatch.js 由于其简单易用而脱颖而出。它具有简洁明了的语法，使编写测试变得不那么复杂。与其他测试框架不同，Nightwatch.js 自带测试运行器，无需其他工具。它还支持 CSS 和 XPath 选择器，使其在处理网页上的不同类型的元素时更加通用。

Nightwatch.js 可以用于端到端测试吗？

是的，Nightwatch.js 是进行端到端测试的绝佳工具。它允许您编写模拟用户与 Web 应用程序交互的测试，确保所有组件都能按预期协同工作。使用 Nightwatch.js，您可以模拟各种场景，例如表单提交、页面导航，甚至复杂的流程。

Nightwatch.js 如何处理异步测试？

Nightwatch.js 使用简单的回调机制处理异步测试。Nightwatch.js 中的每个测试命令都是按照定义的顺序异步运行的。测试运行器会在继续执行下一个命令之前等待每个命令完成。这确保了所有命令都按正确的顺序执行，即使它们是异步的。

我可以将 Nightwatch.js 与其他测试库一起使用吗？

是的，Nightwatch.js 可以与其他测试库一起使用。它旨在与 Mocha、Jasmine 和 QUnit 等其他库无缝协作。这使您可以利用多个测试库的优势来为您的 Web 应用程序创建全面的测试套件。

如何为我的项目设置 Nightwatch.js？

设置 Nightwatch.js 包括几个步骤。首先，您需要在您的机器上安装 Node.js 和 npm。然后，您可以使用 npm 安装 Nightwatch.js。安装完成后，您需要为 Nightwatch.js 创建一个配置文件，在其中指定您的测试设置和选项。之后，您可以开始编写测试。

Nightwatch.js 可以用于跨浏览器测试吗？

是的，Nightwatch.js 支持跨浏览器测试。它与 Selenium WebDriver（用于自动化浏览器的工具）无缝集成。这意味着您可以使用 Nightwatch.js 编写可以在多个浏览器上运行的测试，确保您的 Web 应用程序在不同的平台上都能正常工作。

如何调试 Nightwatch.js 中的测试？

Nightwatch.js 提供了几种调试测试的选项。您可以使用 Node.js 中的内置调试器，也可以使用 Chrome DevTools 等外部工具。Nightwatch.js 还提供详细的错误消息和堆栈跟踪，以便在测试失败时更容易识别和修复问题。

我可以将 Nightwatch.js 用于移动测试吗？

虽然 Nightwatch.js 主要用于 Web 测试，但它也可以通过与 Appium（一个流行的移动测试框架）集成来用于移动测试。这允许您使用与 Web 测试相同的语法和工具来编写移动应用程序的测试。

如何使用 Nightwatch.js 并行运行测试？

Nightwatch.js 原生支持并行测试执行。您可以在配置文件中指定要并行运行的测试。当您运行测试时，Nightwatch.js 将自动将测试分配到多个工作程序，从而加快整体测试执行时间。

The output maintains the original image formatting and placement. The text has been paraphrased and reorganized for improved flow and readability while preserving the original meaning.

以上是JavaScript功能测试与Nightwatch.js的详细内容。更多信息请关注PHP中文网其他相关文章！