参考文献
官网地址
https://www.cnblogs.com/saryli/p/6170201.html
https://www.jianshu.com/p/05c7372a4d08
https://juejin.im/post/59551b0b5188250d725a3537
E2E测试
E2E(end to end)测试是指端到端测试又叫功能测试，站在用户视角，使用各种功能、各种交互，是用户的真实使用场景的仿真。在产品高速迭代的现在，有个自动化测试，是重构、迭代的重要保障。对web前端来说，主要的测试就是，表单、动画、页面跳转、dom渲染、Ajax等是否按照期望。
简化demo
首先建立项目，比如Nnightwatch，在位于当前文件夹的终端/命令行敲入
npm init -y
初始化完成之后输入
npm install --save nightwatch
安装nightwatch依赖
新建nightwatch.json（此文件名不能修改）以下注释了些常用关键项
{
"src_folders": [
"tests" //存放测试用例的文件夹，文件夹不可嵌套
],
"output_folder": "reports", //存放测试报告文件夹
"custom_commands_path": "",
"custom_assertions_path": "",
"page_objects_path": "",
"globals_path": "",
"selenium": {
"start_process": true,//是否自动开启selenium服务
"server_path": "./selenium-server-standalone-3.7.1.jar",//selenium jar路径
"log_path": "",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": "./chromedriver", //driver路径
"webdriver.gecko.driver": "",
"webdriver.edge.driver": ""
}
},
"test_settings": {
"default": {
"launch_url": "http://localhost",
"selenium_port": 4444,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": true,//是否开启截图，若为false，截图不成功
"path": ""
},
"desiredCapabilities": {
"browserName": "chrome",//默认使用什么浏览器测试
"marionette": true
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome"
}
},
"edge": {
"desiredCapabilities": {
"browserName": "MicrosoftEdge"
}
}
}
}
新建start.js（此文件为启动文件，所以可以随意命名）
require('nightwatch/bin/runner.js')
使用vue模板创建
创建项目时会问是否安装Nightwatch 选择Y后一个带有Nightwatch的项目就创建完成了
vue创建项目
创建成功后会自动生成e2e文件夹并包含nightwatch的基本配置
nightwatch.png
解读自动生成的test.js
module.exports = {
'default e2e tests': function (browser) {
// automatically uses dev Server port from /config.index.js
// default: http://localhost:8080
// see nightwatch.conf.js
const devServer = browser.globals.devServerURL //devServerURL的定义是在nightwatch.config.js文件中定义的url
browser //浏览器
.url(devServer) //设置url
.waitForElementVisible('#app', 5000) //等待app节点加载5s
//.assert是断言库 来判断条件是否成立
//.verify也是断言库
//两者的区别是assert如果断言失败则退出整个测试用例所有步，verify则打印后继续进行。
.assert.elementPresent('.hello') //检查给定元素是否存在于DOM中。
.assert.containsText('h1', 'Welcome to Your Vue.js App') //检查给定元素是否包含指定的文本。
.assert.elementCount('img', 1) //元素的总数
.end()
}
}
常用的断言:
.attributeContains(selector, attribute, expected[, message])
检查指定元素（selector）的指定属性（attribute）是否包含有期待的值（expected）打印出指定信息（可选填的message）其他方法讲解类似，不一一赘述
.attributeEquals(selector, attribute, expected[, message])
检查元素指定属性是否等于预期
.containText(selector, expectedText[, message])
包含有指定的文本
.cssClassPresent(selector, className[, message])
检查元素指定class是否存在
.cssClassNotPresent(selector, className[, message])
检查元素指定class是否不存在
.cssProperty(selector, cssProperty, expected[, message])
检查元素指定css属性的值是否等于预期
.elementPresent(selector[, message)
检查指定元素是否存在于DOM中
.elementNotPresent(selector[, message)
检查指定元素是否不存在于DOM中
.hidden(selector[, message)
检查指定元素是否不可见
.title(expected[, message])
检查页面标题是否等于预期
.urlContains(expectedText[, message])
检查当前URL是否包含预期的值
.urlEquals(expected[, message])
检查当前URL是否等于预期的值
.value(selector, expectedText[, message])
检查指定元素的value是否等于预期
.valueContains(selector, expectedText[, message])
检查指定元素的value是否包含预期的值
.visible(selector[, message)
检查指定元素是否可见
很多命令的读写，可以操作BOM、DOM对象：
.clearValue(selector[, message])
清空input、textarea的值
.click(selector[, callback])
callback为执行完命令后需要执行的回调
.closeWindow([callback])
.deleteCookie(cookieName[, callback])
.deleteCookies([callback])
.end([callback])
结束会话（关闭窗口）
.getAttribute(selector, attribute, callback)
.getCookie(cookieName, callback)
.getCookies(callback)
.getCssProperty(selector, cssProperty, callback)
.getElementSize(selector, callback)
.getLocation(selector, callback)
.getLocationInView(selector, callback)
.getLog(typeString, callback)
获取selenium的log，其中type为string或者function
.getLogTypes(callback)
.getTagName(selector, callback)
.getText(selector, callback)
.getTitle(callback)
.getValue(selector, callback)
.init([url])
url方法的别名，如果不传url则跳转到配置中的launch_url
.injectScript(scriptUrl[, id, callback])
注入script
.isLogAvailable(typeString, callback)
typeString为string或者function，用来测试log的type是否可用
.isVisible(selector, callback)
.maximizeWindow([callback])
最大化当前窗口
.moveToElement(selector, xoffset, yoffset[, callback])
移动鼠标到相对于指定元素的指定位置
.pause(ms[, callback])
暂停指定的时间，如果没有时间，则无限暂停
.perform(callback)
一个简单的命令，允许在回调中访问api
.resizeWindow(width, height[, callback])
调整窗口的尺寸
.saveScreenshot(fileName, callback)
.setCookie(cookie[, callback])
.setValue(selector, inputValue[, callback])
.setWindowPosition(offsetX, offsetY[, callback])
.submitForm(selector[, callback])
.switchWindow(handleOrName[, callback])
.urlHash(hash)
.useCss()
设置当前选择器模式为CSS
.useXpath()
设置当前选择器模式为Xpath
.waitForElementNotPresent(selector, time[, abortOnFailure, callback, message])
指定元素指定时间内是否不存在
.waitForElementNotVisible(selector, time[, abortOnFailure, callback, message])
指定元素指定时间内是否不可见
.waitForElementPresent(selector, time[, abortOnFailure, callback, message])
.waitForElementVisible(selector, time[, abortOnFailure, callback, message])
简单的使用百度搜索的例子:
首先获取节点的方法:
1.打开开发者工具 点击左上角小箭头
2.点击你想获取到节点的元素上
3.点击后控制台会跳转到响应的代码上
image.png
4.点击右键选择copy 选择copy selector 获取到节点定位
image.png
PS: 有的时候selector定位不准确 会报错 可以使用xpath进行定位
module.exports = {
'@disabled': true,//要阻止测试模块运行，只需disabled将该模块中的属性设置为true
'step one': function (browser) {
//'#kw #su' 等是通过上述方法copy下来的
const searchInput = '#kw';
const searchBtn = '#su';
const resultContainer = '#container';
browser
.url('http://www.baidu.com')
// 确保输入框可以使用.
.waitForElementVisible(searchInput, 5000)
//设置窗口大小
.resizeWindow(800,1500)
// 输入"小付钱包"然后搜索.
.setValue(searchInput, '小付钱包')
.pause(1000)
// 检查元素指定class是否存在
.click(searchBtn)
// browser.expect.element(searchBtn).to.be.an('input')
// 截屏
.saveScreenshot('reports/answers.png')
// .end();
},
//
'step two': function (client) {
const user = '//*[@id="1"]/h3/a/em'
client
.useXpath() //使用xpath定位
.pause(3000)
.click(user)
}
// }
}
