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