先来一张效果图感受下：

输入命令后，代码自动打开浏览器，进入我们的测试网站，这里用百度搜索试一下，自动输入搜索内容，自动点击搜索按钮，搜索结果出来之后自动截图，完全根据脚本自动执行，不用人工干预，感觉一气呵成，爽歪歪。。。
demo代码连接：https://github.com/ouxuwen/auto-test-demo

image

为什么要自动化测试：

开发过程都是打开浏览器刷新页面点点点才能确定UI组件工作情况是否符合自己预期。接入自动化测试以后，通过脚本代替这些手动点击，接入代码watch后每次保存文件都能快速得知自己的的改动是否影响功能，节省了很多时间，毕竟机器干事情比人总是要快得多。

Selenium 和 Nightwatch

我们这里使用 Selenium 与 Nightwatch 搭建我们的测试脚本。前者是一款 Web 的自动化测试环境，它将帮我们搭建好测试环境，调取系统安装的浏览器，在浏览器里执行一切自动化行为；后者是一款 Test Runner，可以简单理解为前者的控制软件，它将提供一系列接口供我们编写测试案例，同时也是与现有前端项目结合的桥梁。

开始搭建

下面马上来搭建我们的demo工程：

首先要安装 Java 7 或更高 ，因为这里启动selenium-server实际上是启动一个jar包文件，所以需要java环境，输入 java -version 查看java有没有安装

image.png

同样node环境肯定也是必须的啦 node -v。

image.png

创建一个文件夹auto-test-demo ，执行 npm init -y 初始化 项目：

image

先安装所需要的依赖，执行以下命令：

npm install --save-dev chromedriver cross-spawn nightwatch selenium-server

image

创建一个nightwatch的配置文件 ：nightwatch.conf.js ，详细的配置可以浏览官网：nightwatch配置说明

// http://nightwatchjs.org/gettingstarted#settings-file

// 具体的配置项可以去nightwatch的官网查看

//chormedriver 地址

//http://chromedriver.storage.googleapis.com/index.html

module.exports = {

    src_folders: ['tests'],

    output_folder: 'reports',

    custom_assertions_path: "",

    selenium: {

      start_process: true,

      server_path: require('selenium-server').path,  //设置selenium-server 的jar包路径

      host: '127.0.0.1',

      port: 4444,

      cli_args: {

        'webdriver.chrome.driver': require('chromedriver').path  //设置chromedriver 的jar包路径

      }

    },

    test_settings: {

      default: {

        selenium_port: 4444,

        selenium_host: 'localhost',

        silent: true,

        globals:""

      },

      chrome: {

        desiredCapabilities: {

          browserName: 'chrome',

          javascriptEnabled: true,

          acceptSslCerts: true

        }

      },

      firefox: {

        desiredCapabilities: {

          browserName: 'firefox',

          javascriptEnabled: true,

          acceptSslCerts: true

        }

      }

    }

  }

创建测试脚本文件夹tests,在里面新建一个测试用例 demo.js

    module.exports = {

    'Find the answer.': function (client) {

      // 定义 baidu 页面中的节点.

      const searchInput = '#kw'

      const searchBtn = '#su'

      const question = '少林足球'

      // 启动浏览器并打开 baidu.com.

      client.url('https://www.baidu.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()

    }

  }

创建执行测试用例脚本test.js:

process.env.NODE_ENV = 'testing'

let opts = process.argv.slice(2)

if (opts.indexOf('--config') === -1) {

  opts = opts.concat(['--config', 'nightwatch.conf.js'])

}

if (opts.indexOf('--env') === -1) {

  opts = opts.concat(['--env', 'chrome'])

}
//跨平台执行
const spawn = require('cross-spawn')
//调用 spawn 函数时，自动根据当前的运行平台，来决定是否生成一个 shell 来执行所给的命令。
const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })

runner.on('exit', function (code) {

  process.exit(code)

})

runner.on('error', function (err) {

  throw err

})

创建完成后，整个文件夹目录应该是这样的：

image

开始测试：输入命令 node test.js

image

测试成功啦~~

为了方便起见，可以把命令写到package.json文件里

image

参考链接：搭建自己的前端自动化测试脚手架