最近给前端项目做持续集成，用了nightwatch作为end-to-end测试框架，期间踩坑不断，不过总算有惊无险的完成了任务，实现了领导给的三个happy path的测试。学习期间，顺便把nightwatch官网文档稍微撸了一遍，我查了一下，貌似没有中文文档，所以这系列的博客教程，算是半个翻译的文档吧。我会首先按照官网的顺序把重要的知识点介绍一下，接着会以一个vue项目为基础，做一个小前端项目的例子。
官网地址：http://nightwatchjs.org/
本文主要简单介绍了nightwatch的运行机制，安装，最后运行一个简单的测试用例。
简介
什么是nightwatch
Nightwatch.js 是一个用来测试web应用和网站的自动化测试框架，它是由NodeJs编写的，使用了W3C WebDriver API(之前是Selenium WebDriver)
它是完全的浏览器(end-to-end)测试方案，旨在简化搭建持续集成和编写自动话测试的过程。它也同样可以用来写NodeJs的单元测试。
nightwatch的名字，是出自一个荷兰艺术家Rembrandt van Rijn的著名画作：The Night Watch.这幅作品目前展出在Rijksmuseum, in Amsterdam - The Netherlands
什么是WebDriver
WebDriver 是一个自动化web浏览器的通用库。它一开始是Selenium项目的一部分，用java写的，但是现在支持大多数的编程语言了。
Nightwatch 使用 WebDriver API 来呈现浏览器的自动化任务，比如打开窗口、点击链接等。
WebDriver 现在是一个W3C的一个细则，旨在使浏览的自动化可以统一标准。WebDriver 是一个远程控制接口，启用了自省和用户代理控制。它提供一个平台和一个restful的HTTP api作为web浏览器被远程控制的方式。
安装
我们首先创建一个项目
mkdir nightwatch-guide && cd nightwatch-guide
接着初始化项目的package.json
npm init -y
然后安装依赖：
npm install nightwatch
由于它是基于Selenium Server的，所以还得装这个：
npm install selenium-server
我们希望chrome-driver来测试，所以再装一下谷歌的驱动，当然，你也可以选择火狐或者其他的驱动
npm install chromedriver
至此，所有依赖都安装结束了。
提示
- 以上的如果安装不成功，请使用
cnpm替代 - 官网的介绍，说要安装jdk，我没有试过不用jdk行不行，我一开始电脑上就有jdk环境，所以也没有卸载掉试试。如果你安装中报了类似java有关的错误，比如什么包什么模块找不到，请安装jdk后再安装依赖。
- 这部分官网有介绍：http://nightwatchjs.org/gettingstarted#selenium-server-setup
配置
在项目的根目录下新建一个nightwatch.conf.js文件，然后将以下的代码拷贝进去。
module.exports = {
src_folders: [''],
output_folder: 'output',
custom_assertions_path: [],
page_objects_path: '',
globals_path: '',
selenium: {
start_process: true,
server_path: require('selenium-server').path,
host: '127.0.0.1',
port: 5555,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path
}
},
test_settings: {
default: {
selenium_port: 5555,
selenium_host: 'localhost',
silent: true,
globals: {
devServerURL: 'http://localhost:' + (process.env.PORT || 1111)
}
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}
以上只是一些简单的配置，大概的意思也能根据名字猜出来。你可以先使用上面的配置作为你的初始配置，先跑一个例子起来，不用太纠结每个配置的含义。关于配置，我会单独再写一篇博客翻译。
第一个测试用例
编码测试代码
我们先不用配置上的src_folders的目录作为测试目录。
在项目的根目录下新建一个examples的文件夹，用于存放我们的测试脚本。接着新建一个js文件作为测试文件。
如图：
examples
|---01-hello-nightwatch.js
接着写入我们的测试脚本：
module.exports = {
'search nightwatch on baidu': function (browser) {
browser
.url('http://www.baidu.com')
.waitForElementVisible('body', 1000)
.setValue('#kw', 'nightwatch')
.click('#su')
.pause(3000)
.waitForElementVisible('#content_left', 3000)
.end();
}
};
上面的用例，模拟了用户在百度搜索nightwatch关键字的过程。
运行测试用例
我们先直接使用node_modules里的命令跑一下：
./node_modules/.bin/nightwatch examples/01-hello-nightwatch.js
但是这时候却报错了
Error retrieving a new session from the selenium server
Connection refused! Is selenium server started?
{ value:
{ message: 'Unable to create new service: GeckoDriverService\nBuild info: version: \'3.14.0\', revision: \'aacccce0\', time: \'2018-08-02T20:13:22.693Z\'\nSystem info: host: \'jerrydeMacBook-Pro.local\', ip: \'fe80:0:0:0:48d:c61d:503d:2b53%en0\', os.name: \'Mac OS X\', os.arch: \'x86_64\', os.version: \'10.13.6\', java.version: \'1.8.0_172\'\nDriver info: driver.version: unknown',
error: 'session not created' },
status: 33 }
这是因为我们没有指定env,nightwatch会自动的找default的env,就是上面配置test_settings中的default，接着它会找默认的driver，是firefox的，我们前面只安装了chrome-driver，所以这时候肯定是会报错的。
要解决这个问题很简单，找不到这个driver就安装一个呗。
npm install geckodriver
接着再跑就ok了。
我们也可以指定使用chrome-driver，我也是这么做的。
./node_modules/.bin/nightwatch examples/01-hello-nightwatch.js --env chrome
使用 --env 可以使用指定的环境，注意这个环境要是上面test_settings中定义过的。
这时候运行，成功！如下图：
使用npm运行
因为是用npm运行了，所以我们不想指定一个特定的测试文件，这时候，我们就要修改上面配置一节中的src_folders属性，将值设置为我们测试文件的目录即可：
src_folders: ['examples'],
接着我们在package.json的scripts中加入运行脚本：
"e2e": "nightwatch --env chrome"
接着在项目根目录下运行
npm run e2e
结果应该是根上面运行的一模一样的～