记录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