Nightwatch 简介

Nightwatch 是一个自动化测试框架，为基于 Web 的应用程序提供端到端测试解决方案。它在后台使用 W3C WebDriver API（以前称为 Selenium WebDriver）打开 Web 浏览器，对 DOM 元素执行操作和断言。如果你想使用浏览器测试你的 Nuxt 应用程序，这是一个很棒的工具。但是在 Nuxt 应用程序中使用它之前，让我们在以下步骤中单独使用它编写一些简单的测试，以便你对它的工作方式有一个基本的了解：

通过 npm 安装 Nightwatch，并将其保存到 package.json 文件中的 devDependencies 选项：
```
$ npm i nightwatch --save-dev
```
通过 npm 安装 GeckoDriver，并将其保存到 package.json 文件中的 devDependencies 选项：
$ npm install geckodriver --save-dev
Nightwatch 依赖于 WebDriver，因此我们需要根据你的目标浏览器安装特定的 WebDriver 服务器——例如，如果你只想针对 Firefox 编写测试，那么你需要安装 GeckoDriver。

在本书中，我们专注于针对单个浏览器编写测试。但是，如果你想并行针对多个浏览器（如 Chrome、Edge、Safari 和 Firefox），那么你需要安装 Selenium Standalone Server（也称为 Selenium Grid），如下所示：
$ npm i selenium-server --save-dev
请注意，本书中我们将测试 Firefox 和 Chrome，因此不会使用此 selenium-server 包。

将 nightwatch 添加到 package.json 文件中的 test 脚本：

// package.json
{
  "scripts": {
    "test": "nightwatch"
  }
}

创建一个 nightwatch.json 文件来配置 Nightwatch，如下所示：
// nightwatch.json { "src_folders" : ["tests"], "webdriver" : { "start_process": true, "server_path": "node_modules/.bin/geckodriver", "port": 4444 }, "test_settings" : { "default" : { "desiredCapabilities": { "browserName": "firefox" } } }, "launch_url": "https://github.com/lautiamkok" }
在这个简单的练习中，我们想要测试 github.com 上特定贡献者 Lau Tiam Kok 的存储库搜索功能，因此我们在配置的 launch_url 选项中设置了 https://github.com/lautiamkok。

我们将在 /tests/ 目录中编写测试，因此我们在 src_folders 选项中指示了目录位置。我们将在端口 4444（服务器端口）上仅针对 Firefox 进行测试，因此我们在 webdriver 和 test_settings 选项中设置了此信息。

你可以在 https://nightwatchjs.org/gettingstarted/configuration/ 上找到其余测试设置（例如 output_folder）的选项。如果你想了解 Selenium Server 的测试设置，请访问 https://nightwatchjs.org/gettingstarted/configuration/selenium-server-settings。

在项目根目录下创建一个 nightwatch.conf.js 文件，用于将驱动程序路径动态设置为服务器路径：

// nightwatch.conf.js
const geckodriver = require("geckodriver")
module.exports = (function (settings) {
  settings.test_workers = false
  settings.webdriver.server_path = geckodriver.path
  return settings
})(require("./nightwatch.json"))

在 /tests/ 目录中创建一个 .js 文件（例如，demo.js），并在其中准备以下 Nightwatch 测试模板：

// tests/demo.js
module.exports = {
  'Demo test' : function (browser) {
    browser
      .url(browser.launchUrl)
      // 在这里编写你的测试...
      .end()
  }
}

在 /tests/ 目录中创建一个 github.js 文件，其代码如下：

// tests/github.js
module.exports = {
  'Demo test GitHub' : function (browser) {
    browser
      .url(browser.launchUrl)
      .waitForElementVisible('body', 1000)
      .assert.title('lautiamkok (LAU TIAM KOK) · GitHub')
      .assert.visible('input[type=text][placeholder=Search]')
      .setValue('input[type=text][placeholder=Search]', 'nuxt')
      .waitForElementVisible('li[id=jump-to-suggestion-search-scoped]', 1000)
      .click('li[id=jump-to-suggestion-search-scoped]')
      .pause(1000)
      .assert.visible('ul[class=repo-list]')
      .assert.containsText('em:first-child', 'nuxt')
      .end()
  }
}

在这个测试中，我们想要断言存储库搜索功能按预期工作，因此我们需要确保某些元素和文本内容存在且可见，例如 <body> 和 <input> 元素，以及文本 nuxt 和 lautiamkok (LAU TIAM KOK) · GitHub。当你使用 npm run test 运行它时，如果测试通过，你应该会得到以下结果：

[Github] Test Suite
===================
Running: Demo test GitHub
✓ Element <body> was visible after 34 milliseconds.
✓ Testing if the page title equals "lautiamkok (LAU TIAM KOK) ·
  GitHub" - 4 ms.
✓ Testing if element <input[type=text][placeholder=Search]> is
  visible - 18 ms.
✓ Element <li[id=jump-to-suggestion-search-scoped]> was visible
  after 533 milliseconds.
✓ Testing if element <ul[class=repo-list]> is visible - 25 ms.
✓ Testing if element <em:first-child> contains text: "nuxt"
  - 28 ms.
OK. 6 assertions passed. (5.809s)

你可以在我们的 GitHub 仓库中的 /chapter-13/nightwatch/ 找到上述测试。有关 Nightwatch 的更多信息，请访问 https://nightwatchjs.org/。

与 AVA 相比，Nightwatch 并不那么简洁，因为它需要一些可能冗长而复杂的配置，但是如果你遵循最简单的 nightwatch.json 文件，你应该可以很快开始使用 Nightwatch。因此，让我们在下一节中将你刚才在本节中学到的知识应用到 Nuxt 应用程序中。