搭建本身的前端自动化测试脚手架（二）

上一篇：搭建本身的前端自动化测试脚手架（一）
By LancerComet at 18:38, 2016.07.17. 欢迎转载，转载时还请保留做者署名。

嗨，欢迎回来！(･∀･)

在这一章咱们将安装以前提到的 Selenium 与 Nightwatch 而后并正确配置它俩，让它俩能正常的运 ♂ 做起来，赶忙搞 ♂ 起！

不过首先 ……

• 首先要安装 Java 7 或更高 ，而且 java 命令可正常执行才能测试噢~~ 最简单的判断方法就是打开本身的终端，输入 java 并回车，看看是否是有 Java 运行。若是有命令不存在之类的提示，请从新安装 Java 运行环境 (･∀･)

• Node.JS , 并且要确保 npm 命令可用，我想应该其实不用提醒的 ~
  

开始搭建！

1. 建立项目

咱们来找个地方新建一个目录，起名为 "my-test-toolkit"，而后在目录内使用终端运行 npm init -y 生成项目配置文件 package.json。

2. 安装工具

而后咱们将安装 Selenium 与 Nightwatch。

• 安装 selenium-standalone：

  • npm install selenium-standalone --save-dev

• 安装 Nightwatch:

  • npm install nightwatch --save-dev

还记得吗？上一章提到咱们将使用 selenium-standalone 而不是直接手动配置 Selenium 喔！

3. 项目配置

So Easy 不是吗！不过接下来的配置可能要花点功夫，可是也不是很麻烦啦，一步步来仍是很容易的~

咱们先开始配置 Nightwatch，以前提到这是一款 Test Runner 来着，它负责读取咱们的测试脚本，为咱们提供 API 来操做浏览器，帮咱们控制 Selenium。

一. 配置 Nightwatch

1. 首先，在项目根目录创建文件 "nightwatch.json"，这个文件用来存放 Nightwatch 的配置信息。建立完毕以后，在文件内写入如下内容：

   {
        "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": "firefox",
              "javascriptEnabled": true,
              "acceptSslCerts": true
            }
          },
   
          "chrome" : {
            "desiredCapabilities": {
              "browserName": "chrome",
              "javascriptEnabled": true,
              "acceptSslCerts": true
            }
          }
        }
   }

   nightwatch.json 的文件名是 不能够 修改的，由于 Nightwatch 每次启动的时候都是从它读取配置喔！这里的配置项不少，不过先无论它，咱们接着建立文件。若是您但愿查看 Nightwatch 的详细配置，请点 这里。

2. 接着在项目根目录下建立文件 "nightwatch.conf.js" ，一样此文件名也是不能够修改的，由于 Nightwatch 每次启动也会从它这里读取配置喔~ (´･_･`)
   建立完毕后，打开文件，并写入以下内容：

   const path = require('path')
   
   module.exports = (function (settings) {
         return settings;
   })(require('./nightwatch.json'))
   
   /*
    *  Nightwatch 会从 nightwatch.json 中读取配置。
    *  不过若是存在 nightwatch.conf.js，将会变为首先从后者中读取配置。
    *  nightwatch.conf.js 存在的意义是使用 JavaScript 动态生成配置信息。
    *  若是配置信息是不须要代码修改的，直接使用 nightwatch.json 就能够啦。
    */

3. 再次在项目根目录创建文件 "startup.js"，而后在文件内部写入：

   require('nightwatch/bin/runner.js')

   这个文件就是咱们测试的入口文件，之后咱们要执行测试就要运行这个文件，命令为 node ./startup。入口文件的名字是能够按照喜爱更改的，只要运行它就好啦。不过每次输入 node ./startup 太麻烦了，因此咱们将这条命令写入 npm scripts 中 ~~~ 打开 "package.json"，在 JSON 对象中创建 "script" 属性，并写入内容：

   {
       ...
       "scripts": {
           "start": "node ./startup.js"
       },
       ...
   }

之后每次运行测试只要在项目根目录中执行 npm start 就行了！(･∀･)
Nightwatch 的配置暂时告一段落（其实立刻就会回来………），接下来咱们来处理 Selenium.

二. 配置 Selenium

Selenium 是自动化测试环境，它提供了测试服务器、启动浏览器、网页自动操做等功能，同时暴露 API 给 Nightwatch 供咱们使用。

咱们接下来将要告诉 Nightwatch 咱们的 Selenium 安装在哪里，启动浏览器的 Driver 程序在哪里，而后创建 Selenium 的安装脚本与手工启动脚本，以便不时之需 ~~

Driver 是让 Selenium 打开系统上已安装的浏览器的程序。

• 1. 创建 Selenium 的配置信息。
  在项目根目录下创建文件夹 "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'
          }
      }
  }

  本配置信息包含 Selenium 本体配置与 Driver 配置。咱们将在稍后动态载入这些配置。
  本文件的目的是为了更好管理 Selenium 的版本。

• 2. 告诉 Nightwatch，个人 Selenium 与 Driver 在哪里。
  再次打开项目根目录下的 "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'))

咱们新加了两行配置，它们的做用如注释所示。
一样的，若是您但愿查看更多的配置项，请点击 这里。

• 3. 创建 Selenium 安装脚本，一键安装 Selenium。
  还记得上一章咱们提过 selenium-standalone 只是用来安装和管理 Selenium 的工具么？因此如今是时候用它来安装 Selenium 了。咱们将经过调取 selenium-standalone 的内置方法来实现自动安装。在 "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 安装完成.')
  })

  一样为了方便，咱们将安装命令写入 npm scripts 中：

  {
      ...
      "scripts": {
          "start": "node ./startup.js",
          "selenium-setup": "node ./build/selenium-setup.js"
      },
      ...
  }

  而后在项目根目录执行 npm run selenium-setup 安装 Selenium.

  当提示安装完成后，一切就绪！(･∀･)

Selenium 与其 Driver 会安装到 "node_modules/selenium-standalone/.selenium" 中。

• 4. 想要手工启动 Selenium？
  默认状况下，Selenium 是由 Nightwatch 启动的，不须要手工干预，不过若是想要手工启动固然是能够的啦。

  在 build 文件夹中创建文件 "selenium-start.js"，并写入以下信息：

  const selenium = require('selenium-standalone')
  const seleniumConfig = require('./selenium-conf.js')
  
  selenium.start({
      drivers: seleniumConfig.driver
  }, function (err, child) {
      if (err) throw new Error(`Selenium 启动失败: ${err}`)
      console.log(`Selenium 已手工启动，进程 PID: ${child.pid}`)
      console.log('当再也不须要运行 Selenium 时可关闭此 PID 进程.')
  })

  而后一样添加启动命令至 npm scripts 中：

  {
      ...
      "scripts": {
          "start": "node ./startup.js",
          "selenium-setup": "node ./build/selenium-setup.js",
          "selenium-start": "node ./build/selenium-start.js"
      },
      ...
  }

  之后使用命令 npm run selenium-start 就能够手工启动 Selenium 了。

搭建完了！

至此，咱们的配置与安装工做已经完成，项目结构应该为：

>
| -- build
|      | -- selenium-conf.js        # Selenium 版本信息配置。
|      | -- selenium-setup.js       # Selenium 安装命令脚本。
|      | -- selenium-start.js       # Selenium 启动命令脚本。
|
| -- nightwatch.conf.js             # Nightwatch 动态配置文件。
| -- nightwatch.json                # Nightwatch 配置文件。
| -- package.json                   # 项目信息配置文件。
| -- startup.js                     # 测试启动入口文件。

“不过我好像看到 "nightwatch.json" 的配置很复杂，而咱们确没怎么动它？”
嗯~~ 到目前位置确实没有太多须要改动的，不过仍是要注意一个配置项：

• 请注意 "desiredCapabilities" 下的 "browserName" 项，这是测试时将使用的浏览器，您能够修改成 chrome、internet explorer、phantomjs，本文在介绍时只安装了 Chrome 的 Driver，若是您须要使用其余浏览器，要安装相应的 Driver 才能够正常使用。

• 默认浏览器为 Firefox，若是您使用 Firefox 的话，不须要额外进行 Driver 的配置。

• 因此，若是您须要使用 Chrome 的话请将 "browserName" 修改成 "chrome" 喔！
  

Driver 的文档可参考这里。
若是您在搭建过程当中遇到困难，您能够从 Github 获取在下已经搭建好的 Start Kit.

接下来 ……

接下来就是专心写测试用例了，距离成功愈来愈近了！不过今天就到这里结束，咱们下一章见！⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

下一篇：搭建本身的前端自动化测试脚手架（三）