nightwatch对前端做自动化测试

记录node环境使用nightwatch、selenium-server、chromedriver对部署后的前端页面进行自动化测试的项目搭建过程。

1.目标

能对部署后的前端项目进行自动化测试，能自动打开网站，登录、判断页面元素、点击按钮、检查log、界面截图等。

2.项目结构

整体结构如下图：

node_modules是依赖包；

reports是测试的输出结果；

specs是测试内容、规则，里面可以放多个文件；

nightwatch.conf即nightwatch的配置；

runner.js项目测试入口文件；

package.json项目包信息；

README.md项目描述。

下面详细介绍搭建过程：

2.1 创建项目目录auto-test，添加specs、reports子目录

在根目录下添加package.json，内容如下：

{
  "name": "auto-test",
  "version": "1.0.0",
  "author": "wangshiyuan",
  "description": "automatically test the front-end projects after depolyment",
  "scripts": {
    "test": "node ./runner.js"
  },
  "keywords": [
    "e2e",
    "auto-test"
  ],
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "devDependencies": {
    "chromedriver": "^78.0.1",
    "cross-spawn": "^5.0.1",
    "nightwatch": "^0.9.12",
    "selenium-server": "^3.0.1"
  }
}

注意node和npm环境，chromedriver需要和浏览器版本一致；

2.2 添加nightwatch.conf.js文件

// http://nightwatchjs.org/gettingstarted#settings-file
// 具体的配置项可以去nightwatch的官网查看
//chormedriver 地址
//http://chromedriver.storage.googleapis.com/index.html
module.exports = {
    src_folders: ['specs'],
    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: 9009,
      cli_args: {
        'webdriver.chrome.driver': require('chromedriver').path  //设置chromedriver 的jar包路径
      }
    },
    test_settings: {
      default: {
        selenium_port: 9009,
        selenium_host: 'localhost',
        silent: true,
        globals:""
      },
      chrome: {
        desiredCapabilities: {
          browserName: 'chrome',
          javascriptEnabled: true,
          acceptSslCerts: true
        }
      },
      firefox: {
        desiredCapabilities: {
          browserName: 'firefox',
          javascriptEnabled: true,
          acceptSslCerts: true
        }
      }
    }
  }
  

注意：

src_folders: ['specs'], //测试规则的目录，需要添加该目录
output_folder: 'reports',//测试输出的目录，需要添加该目录

2.3添加runner.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')
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
})

注意config中的文件名称：

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

2.4 在specs中添加demo.js文件(这里名称随意)，可以添加多个文件

module.exports = {
  'Test Demo': function (browser) {

    let url = 'https://192.168.3.13/demo'

    // 启动浏览器并打开页面
    browser.maximizeWindow()
    browser.url(url)
    browser.waitForElementVisible('div.login', 3000)
    browser.assert.elementPresent('input.el-input__inner')
    browser.assert.elementPresent('input.el-input__inner')

    browser.click('button.el-button.el-button--primary')
    browser.pause(3000)
    browser.waitForElementVisible('#app', 3000)
    browser.assert.visible('div.layer-control')
    browser.click('div.layer-control .el-checkbox')
    browser.pause(3000)
    'header-r-t'
    browser.click('ul.header-r-t>li:nth-child(3)').pause(4000)
    browser.back()
    browser.click('ul.header-r-t>li:nth-child(4)').pause(4000)
    browser.back()
    browser.click('ul.header-r-t>li:nth-child(5)').pause(4000)
    browser.getLog('browser', function (logs) {
      console.info(logs)
    })
    browser.pause(3000)
    browser.saveScreenshot('reports/smrt.png')
    browser.end()
  }
}

大意是打开页面，点击登录按钮，判断某些按钮的可见性，输出log，截图等，具体规则可以参考nightwatch的api（https://nightwatchjs.org/api）

2.4 执行测试

cmd进入项目目录，输入npm install 安装依赖，安装完后增加node_modules文件夹；

cmd输入node runner.js 执行测试，会自动打开浏览器安装specs下的规则执行，cmd会输出断言的结果，reports目录会有测试结果及截图。

3.注意事项

chromedriver的版本需要和浏览器版本一致,请自行确认后修改packjson.json中的chromedriver配置项，重新install。

参考：

nightwatch: https://nightwatchjs.org/api

Selenium: https://github.com/SeleniumHQ/selenium/wiki/Logging