记录 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/commands/#window )
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/commands/#window
- Selenium:
来源: http://www.bubuko.com/infodetail-3303498.html