vue-cli 脚手架基于Nightwatch的端到端测试环境的过(2)

 Nightwatch

vue-cli的webpack模板也为我们准备了一个当下很流行的E2E测试框架——Nightwatch。

Nightwatch是一套新近问世的基于Node.js的验收测试框架，使用Selenium WebDriver API以将Web应用测试自动化。它提供了简单的语法，支持使用JavaScript和CSS选择器来编写运行在Selenium服务器上的端到端测试。

这个框架在配置好后的具体工作流程如下图所示。

Nightwatch采用Fluent interface模式（https://en.wikipedia.org/wiki/Fluent_interface）来简化端到端测试的编写，语法非常简洁易懂，正如以下代码所示。

this.demoTestGoogle = function (browser) {
 browser
  .url('http://www.google.com')
  .waitForElementVisible('body', 1000)
  .setValue('input[type=text]', 'nightwatch')
  .waitForElementVisible('button[name=btnG]', 1000)
  .click('button[name=btnG]')
  .pause(1000)
  .assert.containsText('#main', 'The Night Watch')
  .end();
}

我们可以从Nightwatch网站找到当前提供特性的列表：

●　简单但强大的语法。只需要使用JavaScript和CSS选择器，开发者就能够非常迅捷地撰写测试。开发者也不必初始化其他对象和类，只需要编写测试规范即可。

●　内建命令行测试运行器，允许开发者同时运行全部测试——分组或单个运行。

●　自动管理Selenium服务器；如果Selenium运行在另一台机器上，那么也可以禁用此特性。

●　支持持续集成：内建JUnit XML报表，因此开发者可以在构建过程中，将自己的测试与系统（例如Hudson或Teamcity等）集成。

●　使用CSS选择器或Xpath，定位并验证页面中的元素或是执行命令。

●　易于扩展，便于开发者根据需要，实现与自己应用相关的命令。

配置 Nightwatch

要了解Nightwatch的配置和用法，与前文介绍Mocha一样，应该先从工程结构入手。

工程结构

.
└── test
      └── e2e
            ├── custom-assertions     // 自定义断言
            │    └── elementCount.js
            ├── page-objects          // 页面对象文件夹