前端e2e自动化测试demo
先来一张效果图感受下：
输入命令后，代码自动打开浏览器，进入我们的测试网站，这里用百度搜索试一下，自动输入搜索内容，自动点击搜索按钮，搜索结果出来之后自动截图，完全根据脚本自动执行，不用人工干预，感觉一气呵成，爽歪歪。。。
demo代码连接：https://github.com/ouxuwen/auto-test-demo
image
为什么要自动化测试：
开发过程都是打开浏览器刷新页面点点点才能确定UI组件工作情况是否符合自己预期。接入自动化测试以后，通过脚本代替这些手动点击，接入代码watch后每次保存文件都能快速得知自己的的改动是否影响功能，节省了很多时间，毕竟机器干事情比人总是要快得多。
Selenium 和 Nightwatch
我们这里使用 Selenium 与 Nightwatch 搭建我们的测试脚本。前者是一款 Web 的自动化测试环境，它将帮我们搭建好测试环境，调取系统安装的浏览器，在浏览器里执行一切自动化行为；后者是一款 Test Runner，可以简单理解为前者的控制软件，它将提供一系列接口供我们编写测试案例，同时也是与现有前端项目结合的桥梁。
开始搭建
下面马上来搭建我们的demo工程：
首先要安装 Java 7 或更高 ，因为这里启动selenium-server实际上是启动一个jar包文件，所以需要java环境，输入 java -version 查看java有没有安装
image.png
同样node环境肯定也是必须的啦 node -v。
image.png
创建一个文件夹auto-test-demo ，执行 npm init -y 初始化 项目：
image
先安装所需要的依赖，执行以下命令：
npm install --save-dev chromedriver cross-spawn nightwatch selenium-server
image
创建一个nightwatch的配置文件 ：nightwatch.conf.js ，详细的配置可以浏览官网：nightwatch配置说明
// http://nightwatchjs.org/gettingstarted#settings-file
// 具体的配置项可以去nightwatch的官网查看
//chormedriver 地址
//http://chromedriver.storage.googleapis.com/index.html
module.exports = {
src_folders: ['tests'],
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: 4444,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path //设置chromedriver 的jar包路径
}
},
test_settings: {
default: {
selenium_port: 4444,
selenium_host: 'localhost',
silent: true,
globals:""
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}
创建测试脚本文件夹tests,在里面新建一个测试用例 demo.js
module.exports = {
'Find the answer.': function (client) {
// 定义 baidu 页面中的节点.
const searchInput = '#kw'
const searchBtn = '#su'
const question = '少林足球'
// 启动浏览器并打开 baidu.com.
client.url('https://www.baidu.com/').maximizeWindow()
// 确保 "body" 和输入框可以使用.
client.expect.element('body').to.be.present
client.expect.element(searchInput).to.be.visible
client.pause(2000) // 稍等两秒.
// 输入 "what is microsoft" 然后搜索.
client.setValue(searchInput, question)
client.click(searchBtn)
client.pause(2000)
// 截一张图然后保存到 "reports/answer.png".
client.expect.element('body').to.be.present
client.saveScreenshot('reports/answers.png')
client.end()
}
}
创建执行测试用例脚本test.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')
//调用 spawn 函数时，自动根据当前的运行平台，来决定是否生成一个 shell 来执行所给的命令。
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
})
创建完成后，整个文件夹目录应该是这样的：
image
开始测试：输入命令 node test.js
image
测试成功啦~~
为了方便起见，可以把命令写到package.json文件里
image
参考链接：搭建自己的前端自动化测试脚手架
