nightwatch系列教程01——Hello Nightwatch

最近给前端项目做持续集成，用了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 serverConnection 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

结果应该是根上面运行的一模一样的～