使用 Nightwatch.js 实现 Node.js 的端到端测试

2017 年 5 月 15 日起， Scott 会陆续翻译一些不错或者有趣的 Node.js 文章，干货湿货一起撸，帮助 Node.js 爱好者更好的了解 Node.js 这个技术所带来的生产力和职业竞争力。

另外 Scott 也录制了一些 Node.js 的实战学习视频，有免费的有收费的，大家可以自取所需，下面进入正题：

本文来自RisingStack的官方博客，发表于 2017.3 Node.js End-to-End Testing with Nightwatch.js

译文如下：

在这篇文章里，我们将要去看一看如何在 Node.js 中通过使用 Nightwatch.js 这个强大的 e2e 测试框架来实现E2E测试。

在前一篇关于 Node.js at Scale 的文章中，我们讨论了 Node.js测试和获取 TDD 权限。如果你还没有阅读过这篇文章，或者你并不熟悉单元测试和 TDD（测试驱动开发），我建议你在继续阅读这篇文章之前先查阅一下上篇文章。

什么是 Node.js e2e测试？

在直接进入代码实例和学习在 Node.js 工程中去编写 e2e 测试之前，去了解什么是 e2e 测试是很有意义的。

首先，e2e 测试是黑盒测试工具的一种，这就意味着作为一个写测试的人，你在检查功能的同时不了解任何关于内部实现的原理，所以你不会看到一点源代码。

其次，e2e 测试可以被用来当作用户体验测试，或 UAT 。 UAT 是一个验证这个方案确认用于使用的过程，这个过程不会专注于发现细节错误，但可能会导致系统崩溃的问题，或者是功能上的缺失。

开始 Nightwatch.js

Nightwatch.js 允许你去 “在 Node.js 中快速、轻松地编写 e2e测试就像 Selenium/WebDriver 服务一样”。

Nightwatch 有以下的特性:

一个内置的测试运行器
可控的 selenium 服务
持续集成 selenium ，比如 BrowserStack 或者 SauceLabs
CSS 和 Xpath 选择器

安装 Nightwatch

为了本地把 Nightwatch 跑起来，我们要先做一些小工作 - 我们将会需要一个独立的 Selenium 本地服务，以及一个 webdriver ，另外我们可以使用 Chrome/Firefox 去本地测试我们的app应用。

有了这三个工具，我们将会实现下图中的流程

使用 Nightwatch.js 实现 Node.js 的端到端测试_第1张图片

图片来源: nightwatchjs.org

步骤1: 安装 Nightwatch

你可以很简单的通过命令行来安装 Nightwatch : npm install nightwatch --save-dev。

这个命令会将 Nightwatch 安装到你的 ./node_modules/bin 文件夹里，所以你就不需要全局安装它。

步骤2: 下载 Selenium

Selenium 是一套可以在许多平台上实现 web 浏览器自动化的工具。

前提是: 确定你已经安装了 JDK，同时版本至少要大于等于7。如果你不满足这个条件，你可以点击这里。

Selenium 服务是一个 Java 应用，用于通过 Nightwatch 来连接各种浏览器。你可以从这里下载这两部分。

如果你已经下载了这些 JAR 文件，在你的工程目录中创建一个 bin 文件夹，然后把文件放到里面。我们将会安装 Nightwatch 去使用它，因此你不需要去手动开启 Selenium 服务。

步骤3: 下载 Chromedriver

Chromedriver 是一个独立的服务，它通过 Chromium 实现了 W3C WebDriver 通讯协议。

要获取可执行的文件，通过下面这个下载地址下载，然后也将它放到同一个 bin 文件夹里。

步骤4: 配置 Nightwatch.js

简单的 Nightwatch 配置需要通过配置一个 json 文件。

让我们来创建一个 nightwatch.json 文件，然后补充一下:

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",

  "selenium" : {
    "start_process" : true,
    "server_path" : "./bin/selenium-server-standalone-3.3.1.jar",
    "log_path" : "",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "./bin/chromedriver"
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

通过这个配置文件，Nightwatch 可以知道在哪里找到 Selenium 服务器和 Chromedriver 的二进制文件，以及我们想要运行的测试的位置。

快速总结

现在，我们已经安装了 Nightwatch ，并且下载了独立的 Selenium 服务和 Chromedriver 。通过这些步骤，你已经拥有了所有必备的工具去使用 Node.js 和 Selenium 创建 e2e测试。

来写你的第一个 Nightwatch 测试

我们先新建一个文件放到tests文件夹里，命名为homepage.js。

我们先从 Nightwatch getting started guide 拿个例子出来。我们的测试代码将会通过 Google ，搜索 Rembrandt ，同时检查 Wikipedia 页面:

module.exports = {  
  'Demo test Google' : function (client) {
    client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'rembrandt van rijn')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('ol#rso li:first-child',
        'Rembrandt - Wikipedia')
      .end()
  }
}

剩下唯一要做的事情就是让 Nightwatch 跑起来咯!因此，我建议加一部分新的代码到你的 package.json 文件里:

"scripts": {
  "test-e2e": "nightwatch"
}

最后一件要做的事情就是在命令行里面输入下面的代码:

npm run test-e2e

如果所有东西都运行正常，你的测试会打开 Chrome，然后是 Google 和 Wikipedia 。

Nightwatch.js 在你项目中

现在，你已经理解了什么是 e2e 测试了吧，还有如何去安装 Nightwatch ，是时候开始在你的项目中走一个了。

另外，你还得去思考一些方面 - 请注意，在这里没有灵丹妙药，不能一劳永逸。取决于你自己工作的需要，你可能会对下面的问题有不同的见解:

我应该在什么时候跑？在发布到线上前？在生产环境？当我构建自己的容器时？
在哪一种测试的场景去使用它来测试？
什么时候以及什么人应该来写 e2e 测试？

总结 & 下一步

在 Node.js at Scale 这一章，我们学到了:

如何去安装 Nightwatch，
如何去配置一个独立的 Selenium 服务，
还有如何去写一个基础的e2e测试。