nightwatch-前端自动化测试工具安装

最近再弄这个前端自动化测试工具，刚开始弄了几天，目前为止遇到很多坑，光是安装就费了不少时间，记录一下，以便自己忘记。

这里是它的官网，目前没找到中文版的官网，全英文，对我这个英语渣来说有点难理解。

一、前言

参考：首先本文主要是参照：搭建自己的前端自动化测试脚手架 ，并加上自己的理解，大家可以看看。

涉及知识：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

3.1 创建文件 "selenium-conf.js"

不知道大家发现没有，上面创建nightwatch.conf.js的的时候，里面第一行我们引用了一个selenium-conf文件，这个就是安装selenium的一个配置文件。

在nwDemo文件夹里创建build文件夹，并添加一个selenium-conf.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'
        }
    }
} 

3.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.3 安装Selenium

执行 下面命令安装 Selenium

npm run selenium-setup 

3.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测试的。话说现在的三大框架我都不会，真的有些落伍了，得赶紧去补补了...