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，内容如下：

 1 {
 2   "name": "auto-test",
 3   "version": "1.0.0",
 4   "author": "wangshiyuan",
 5   "description": "automatically test the front-end projects after depolyment",
 6   "scripts": {
 7     "test": "node ./runner.js"
 8   },
 9   "keywords": [
10     "e2e",
11     "auto-test"
12   ],
13   "engines": {
14     "node": ">= 6.0.0",
15     "npm": ">= 3.0.0"
16   },
17   "devDependencies": {
18     "chromedriver": "^78.0.1",
19     "cross-spawn": "^5.0.1",
20     "nightwatch": "^0.9.12",
21     "selenium-server": "^3.0.1"
22   }
23 }

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

2.2 添加nightwatch.conf.js文件

 1 // http://nightwatchjs.org/gettingstarted#settings-file
 2 // 具体的配置项可以去nightwatch的官网查看
 3 //chormedriver 地址
 4 //http://chromedriver.storage.googleapis.com/index.html
 5 module.exports = {
 6     src_folders: ['specs'],
 7     output_folder: 'reports',
 8     custom_assertions_path: "",
 9     selenium: {
10       start_process: true,
11       server_path: require('selenium-server').path,  //设置selenium-server 的jar包路径
12       host: '127.0.0.1',
13       port: 9009,
14       cli_args: {
15         'webdriver.chrome.driver': require('chromedriver').path  //设置chromedriver 的jar包路径
16       }
17     },
18     test_settings: {
19       default: {
20         selenium_port: 9009,
21         selenium_host: 'localhost',
22         silent: true,
23         globals:""
24       },
25       chrome: {
26         desiredCapabilities: {
27           browserName: 'chrome',
28           javascriptEnabled: true,
29           acceptSslCerts: true
30         }
31       },
32       firefox: {
33         desiredCapabilities: {
34           browserName: 'firefox',
35           javascriptEnabled: true,
36           acceptSslCerts: true
37         }
38       }
39     }
40   }
41   

注意：

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

2.3添加runner.js

 1 process.env.NODE_ENV = 'testing'
 2 let opts = process.argv.slice(2)
 3 
 4 if (opts.indexOf('--config') === -1) {
 5   opts = opts.concat(['--config', 'nightwatch.conf.js'])
 6 }
 7 if (opts.indexOf('--env') === -1) {
 8   opts = opts.concat(['--env', 'chrome'])
 9 }
10 
11 const spawn = require('cross-spawn')
12 const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
13 
14 runner.on('exit', function (code) {
15   process.exit(code)
16 })
17 
18 runner.on('error', function (err) {
19   throw err
20 })

注意config中的文件名称：

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

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

 1 module.exports = {
 2   'Test Demo': function (browser) {
 3 
 4     let url = 'https://192.168.3.13/demo'
 5 
 6     // 启动浏览器并打开页面
 7     browser.maximizeWindow()
 8     browser.url(url)
 9     browser.waitForElementVisible('div.login', 3000)
10     browser.assert.elementPresent('input.el-input__inner')
11     browser.assert.elementPresent('input.el-input__inner')
12 
13     browser.click('button.el-button.el-button--primary')
14     browser.pause(3000)
15     browser.waitForElementVisible('#app', 3000)
16     browser.assert.visible('div.layer-control')
17     browser.click('div.layer-control .el-checkbox')
18     browser.pause(3000)
19     'header-r-t'
20     browser.click('ul.header-r-t>li:nth-child(3)').pause(4000)
21     browser.back()
22     browser.click('ul.header-r-t>li:nth-child(4)').pause(4000)
23     browser.back()
24     browser.click('ul.header-r-t>li:nth-child(5)').pause(4000)
25     browser.getLog('browser', function (logs) {
26       console.info(logs)
27     })
28     browser.pause(3000)
29     browser.saveScreenshot('reports/smrt.png')
30     browser.end()
31   }
32 }

大意是打开页面，点击登录按钮，判断某些按钮的可见性，输出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