nightwatch.js 是一个 web-ui 自动化测试框架，被 vue-cli 深度整合进来。如果一个项目是基于 vue-cli 搭建的，基本可以做到开箱即用。
但是我们不可能一直都使用 vue-cli。因为它很多时候不能够满足我们的定制化需求。我们很多时候会对构建框架进行定制，或者完全重新搭建。这个时候整合进来 nightwatch 就会很困难。这篇文章就来带着大家入门搭建这么一个测试框架。
所需环境
首先在项目里面安装 nightwatch，切换到项目目录
npm intall nightwatch -D
安装这个还不够，还需要安装 selenium-server，同样可以使用 npm 安装
npm install selenium-server -D
selenium-server 是基于 Java 开发的，作用是用来连接浏览器的。所以安装 selenium-server 之前需要安装 java。如何安装 Java?
除此之外还需要安装一个浏览器驱动器，一般我们使用 chrome 做测试
npm install chromedriver –chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D
直接安装 chromedriver 会提示安装不成功，需要手动指定镜像地址
至此需要下载的部分已经下载完成。
项目配置
nightwatch 默认使用项目根目录的 nightwatch.conf.js 作为配置文件。官网也有另外一种配置文件的格式就是 nightwatch.json。这里我们使用 js 的配置方式，因为格式更灵活。
下面这个就是一个简单的配置文件。
module.exports = {
‘src_folders’: [
‘e2e/case’
],
‘output_folder’: ‘reports’,
‘custom_commands_path’: ”,
‘custom_assertions_path’: ”,
‘page_objects_path’: ”,
‘globals_path’: require(‘./e2e/config/global.config’).path,
‘selenium’: {
‘start_process’: true,
‘server_path’: require(‘selenium-server’).path,
‘log_path’: ”,
‘host’: ‘127.0.0.1’,
‘port’: 4444,
‘cli_args’: {
‘webdriver.chrome.driver’: require(‘chromedriver’).path
}
},
‘test_settings’: {
‘default’: {
‘launch_url’: ‘http://localhost’,
‘selenium_port’: 4444,
‘selenium_host’: ‘localhost’,
‘silent’: true,
‘screenshots’: {
‘enabled’: false,
‘path’: ”
},
‘desiredCapabilities’: {
‘browserName’: ‘chrome’,
‘marionette’: true
}
},
‘chrome’: {
‘desiredCapabilities’: {
‘browserName’: ‘chrome’
}
},
‘edge’: {
‘desiredCapabilities’: {
‘browserName’: ‘MicrosoftEdge’
}
}
}
}
src_folders：表示的就是 case 所在的文件夹
output_folder：代表的是报告输出的文件夹
selenium 下面的 server_path：代表的是 selenium-server 的安装路径
selenium 下面的 start_process：代表的是是否自动启动 selenium——server, 入股设为 false, 不会自动启动 server。
“cli_args” : {
“webdriver.chrome.driver” : “”,
“webdriver.gecko.driver” : “”,
“webdriver.edge.driver” : “”
}
cli_args 下面的 driver 表示几个 driver 的安装路径，分别安装成功就可以了
test_settings 是传给 nightwatch 实例的数据，这里面可以配置多个环境，default 是必须有的，其他环境可以自行配制。
nightwatch –env default
然后我们在项目里运行以上命令。
在 windows 发现报错了，运行不起来的。我们需要在 package.json 下面配置一下
“scripts”: {
“e2e”: “nightwatch –env default”,
},
这就可以正常运行了。
如果需要看到真实的效果，我们在 case 文件夹下面创建一些 case 就可以了
比如：
module.exports = {
‘Test login’: function (browser) {
browser
.windowMaximize()
.url(‘https://trans.qa.17u.cn/saas’)
.waitForElementVisible(‘.login’, 3000)
.assert.urlContains(‘/saas/login’)
}
}