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 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

结果应该是根上面运行的如出一辙的～

Github

本文发表在个人我的博客中，欢迎围观，发现其余干货～
博客地址 https://jerryyuanj.github.io/