最近再弄这个前端自动化测试工具，刚开始弄了几天，目前为止遇到很多坑，光是安装就费了不少时间，记录一下，以便自己忘记。
这里是它的官网，目前没找到中文版的官网，全英文，对我这个英语渣来说有点难理解。
一、前言
参考：首先本文主要是参照这篇文章，并加上自己的理解，大家可以看看。
涉及知识：1.一些js知识（本文需要的不是太多）；2.nodejs。
基础环境：1.java：java7以上，可以去官网下载；2.nodejs，版本没限制，没有安装过就直接去官网下载就可以了。3.编辑器（我用的vscode，比较小巧）4.chrome浏览器（平时调试什么的还是喜欢chrome，firefox有些样式不喜欢）
安装的时候就是一直点下一步就可以了（我是这么点的，因为也不知道那些重要，干脆就都要吧）。
查看版本命令：java是 java -version；nodejs是 node -v；
二、搭建项目
1.建立项目
首先创建个文件夹，比如我在F盘创建个nwDemo文件夹，然后输入
npm init -y
然后就创建了一个package.json 的配置文件。
2.安装 Selenium 与 Nightwatch
首先说明下，我们安装 Selenium是用selenium-standalone来配置的。
1.所以要先安装selenium-standalone。
npm install selenium-standalone --save-dev
2.安装nightwatch
npm install nightwatch --save-dev
3.项目配置
1.配置nightwatch
项目文件夹创建nightwatch.json文件，并写下一下内容：
{ "src_folders": ["tests"], "output_folder": "reports", "custom_commands_path": "", "custom_assertions_path": "", "page_objects_path": "", "globals_path": "", "selenium": { "start_process": true, "server_path": "", "log_path": "", "host": "127.0.0.1", "port": 4444, "cli_args": { "webdriver.chrome.driver": "" } }, "test_settings": { "default": { "launch_url": "http://localhost", "selenium_port": 4444, "selenium_host": "localhost", "silent": true, "screenshots": { "enabled": false, "path": "" }, "desiredCapabilities": { "browserName": "chrome", "javascriptEnabled": true, "acceptSslCerts": true } }, "chrome" : { "desiredCapabilities": { "browserName": "chrome", "javascriptEnabled": true, "acceptSslCerts": true } } } }
这些都是一些配置，可以暂时不用理解，如果想知道详细配置，点这里查看，全英文哦。
2.接着创建nightwatch.conf.js文件，并写下：
const seleniumConfig = require('./build/selenium-conf')
const path = require('path')
module.exports = (function (settings) {
// 告诉 Nightwatch 我的 Selenium 在哪里。
settings.selenium.server_path = `${path.resolve()}/node_modules/selenium-standalone/.selenium/selenium-server/${seleniumConfig.selenium.version}-server.jar`
// 设置 Chrome Driver, 让 Selenium 有打开 Chrome 浏览器的能力。
settings.selenium.cli_args['webdriver.chrome.driver'] = `${path.resolve()}/node_modules/selenium-standalone/.selenium/chromedriver/${seleniumConfig.driver.chrome.version}-${seleniumConfig.driver.chrome.arch}-chromedriver`
return settings;
})(require('./nightwatch.json'))
/*
* Nightwatch 会从 nightwatch.json 中读取配置。
* 不过如果存在 nightwatch.conf.js，将会变为首先从后者中读取配置。
* nightwatch.conf.js 存在的意义是使用 JavaScript 动态生成配置信息。
* 如果配置信息是不需要代码修改的，直接使用 nightwatch.json 就可以啦。
*/以上两个都是基础配置，文件名不能修改哦。
3.配置 Selenium
1.创建文件 "selenium-conf.js"
不知道大家发现没有，上面创建nightwatch.conf.js的的时候，里面第一行我们引用了一个selenium-cong文件，这个就是安装selenium的一个配置文件。
在nwDemo文件夹里创建build文件夹，并添加一个selenium-cong.js文件，写下：
const process = require('process')
module.exports = {
// Selenium 的版本配置信息。请在下方链接查询最新版本。升级版本只需修改版本号即可。
// https://selenium-release.storage.googleapis.com/index.html
selenium: {
version: '2.53.1',
baseURL: 'https://selenium-release.storage.googleapis.com'
},
// Driver 用来启动系统中安装的浏览器，Selenium 默认使用 Firefox，如果不需要使用其他浏览器，则不需要额外安装 Driver。
// 在此我们安装 Chrome 的 driver 以便使用 Chrome 进行测试。
driver: {
chrome: {
// Chrome 浏览器启动 Driver，请在下方链接查询最新版本。
// https://chromedriver.storage.googleapis.com/index.html
version: '2.22',
arch: process.arch,
baseURL: 'https://chromedriver.storage.googleapis.com'
}
}
}
2.建立 Selenium 安装脚本，一键安装 Selenium。
上面我们已经安装过selenium-standalone这个工具了，接下来我们就要用它来安装Selenium。
在上一步创建的build文件夹里接着创建selenium-setup.js，并写下
const selenium = require('selenium-standalone')
const seleniumConfig = require('./selenium-conf.js')
selenium.install({
version: seleniumConfig.selenium.version,
baseURL: seleniumConfig.selenium.baseURL,
drivers: seleniumConfig.driver,
logger: function (message) { console.log(message) },
progressCb: function (totalLength, progressLength, chunkLength) {}
}, function (err) {
if (err) throw new Error(`Selenium 安装错误: ${err}`)
console.log('Selenium 安装完成.')
})
为了方便，我们把安装命令写到package.json里，把下面这段命令写到package.json的scripts里：
"selenium-setup": "node ./build/selenium-setup.js"
3.安装Selenium
执行 下面命令安装 Selenium
npm run selenium-setup
3.1.安装问题
在这一步安装时经常会遇到一些问题，下面就是我遇到的问题
首先是selenium-server-standalone-2.53.1.jar安装不上。
两种解决方法：
方法一：去这个 https://selenium-release.storage.googleapis.com/index.html 网址查看最新的版本，我查找的是3.9，把selenium-conf.js里的selenium的version改成3.9，然后再次执行 npm run selenium-setup 命令。
方法二：按着ctrl去这个网址下载这个文件，手动放到它该在位置。
它应该在的位置是：你的项目文件夹\node_modules\selenium-standalone\.selenium\selenium-server。
第二个问题安装chromedriver失败了，
同样的解决办法有两种。
方法一：首先我们要先知道自己的chrome要用那个版本的，先去点击 https://chromedriver.storage.googleapis.com/index.html 网址，然后找到LATEST_RELEASE这个文件夹，点击查看适配自己浏览器的版本，我的是2.41，所以把selenium-conf.js里的chrome的version改成2.41。然后再次执行 npm run selenium-setup 命令。
方法二：同样的，跟上面的的方法一样，直接下载，然后放在相应的位置：你的项目文件夹\node_modules\selenium-standalone\.selenium\chromedriver。
完成上面的操作后再次执行 npm run selenium-setup 命令看看是否有错误
备注：我用的这个编译器似乎有问题，有时候明明下载下来了，但是识别不了，重启下编译器试试，有可能就成功了；可能执行命令后还是报错，但是你只要看到你的.selenium文件夹和下图一样就不用管了，看接下来的操作就可以。
4.建立启动文件
在项目目录中建立startup.js文件，并写下一下代码：
require('nightwatch/bin/runner.js')
这是启动命令，我们只需要在控制台输入 node ./startup 就可以执行，但是我建议用npm命令来执行，所以打开package.json文件，在scripts里添加：
"start": "node ./startup.js"
以后要开启测试的时候就直接输入 npm start 命令就可以了
5.建立测试文件
在项目文件夹里创建 tests 文件夹，并创建一个 tests.js 文件。（注意这里的test文件夹对应的是nightwatch.json文件里的第一项："src_folders": ["tests"]，顾名思义就是放测试文件的文件夹名称）
这里我要让它执行一个 打开浏览器并登陆bing网站，搜索 "what is microsoft"，然后保存成截图后退出 的操作。
在 tests.js 写下：
module.exports = { 'Find the answer.': function (client) { // 定义 Bing 页面中的节点. const searchInput = '#sb_form_q' const searchBtn = '#sb_form_go' const question = 'what is microsoft' // 启动浏览器并打开 bing.com. client.url('http://bing.com').maximizeWindow() // 确保 "body" 和输入框可以使用. client.expect.element('body').to.be.present client.expect.element(searchInput).to.be.visible client.pause(2000) // 稍等两秒. // 输入 "what is microsoft" 然后搜索. client.setValue(searchInput, question) client.click(searchBtn) client.pause(2000) // 截一张图然后保存到 "reports/answer.png". client.expect.element('body').to.be.present client.saveScreenshot('reports/answers.png') client.end() } }
6.开始测试
控制台执行命令：
npm start
然后就大功告成了！
至于tests.js里的具体那些命令，还是要到官网去看，本文知识粗略的介绍一些nightwatch的安装过程，现在还在摸索怎么编写文档，因为这里的坑好多啊，比如我们的页面有iframe，找iframe里的标签找不到这种问题，等我解决了在写一篇怎么编写测试文件的文章吧。
后记：
今天正好看到奇舞周刊公众号推送了一篇文章：vue-cli 自动化测试 Nightwatch 详解，也是讲nightwatch的，很不错，大家可以看看，是关于vue里的nightwatch测试的。话说现在的三大框架我都不会，真的有些落伍了，得赶紧去补补了...