Nightwatch——自动化测试(端对端e2e)
2019-08-14 10:35:56来源:博客园 阅读 ()
背景:
前端页面模拟仿真操作,目的是避免每次更新相关内容重复之前的测试操作,减少不必要的时间投入,以及校验功能的可用性。但是目前元素定位是个问题(每次页面有修改都要重设某些元素定位)
测试分类:
一.单元测试:站在程序员的角度测试;
1、减少开发人员的重复测试时间 2、面向程序的功能模块的测试
二.端对端测试:站在测试人员的角度测试
1、减少测试人员的重复测试时间 2、面向系统的功能模块的测试 3、本质是模拟用户使用系统
测试插件:
Nightwatchjs:https://nightwatchjs.org/
主要包括:1、元素定位 2、断言 3、POM
准备工作:
1.安装(vue3.0已经内置nigjtwatch.js):来自NPM
npm install nightwatch
使用WebDriver兼容服务器来控制浏览器
desiredCapabilities : { browserName : ' chrome ', chromeOptions : { w3c : false } }
2.配置文件:package.json
"scripts": { "e2e": "node test/e2e/runner.js --tag testDemo "test": "npm run unit && npm run e2e", "lint": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs", }
3.元素定位:在test/e2e/POM文件夹创建js文件
const config = require('../config.js') module.exports = { url: config.host + '/admin/activityTypeManage?__test=luoganluo', elements: { //对象或数组形式 // 'newAppButton': {selector: '#KP_appManage > div > div.el-card__body > div > div > div.el-row > div:nth-child(2) > button:nth-child(1)'}, //方式1:selector 'newBusinessButton': { locateStrategy: 'xpath', selector: '//*[@id="activityManage"]/div[1]/div/button/span' }, // 方式2:xpath ... } }
快速定位:
1.启动本地服务npm run dev,打开浏览器按F12调试——按ctrl+shift+C快速定位元素——单击右键选择Copy获取选择器内容(以上2种方式);
2.路由定位:打开页面是,直接设置需要进入的页面路由即可(参数设置)
4.断言:判断操作出现正确的结果(在test/e2e/specs文件夹创建js文件)
module.exports = { '@tags': ['testDemo '], before: function (browser) { // util(browser).login() }, '测试demo': function (browser) { browser.maximizeWindow() //屏幕最大化 var loginPage = browser.page.loginPage()// 打开应用列表页面 loginPage.navigate()/// /打开应用列表页面 .waitForElementVisible('@loginButton', 5000)//等待页面出现 .click('@loginButton')// 点击新建 .click('@clickToShowBusinessSelect') //点击下拉选项 .pause(500) //等待选项出现 ... }, after: function (browser) { } }
实例:
module.exports = { '@tags': ['appList'], before: function (browser) { // util(browser).login() }, '测试新建业务': function (browser) { browser.maximizeWindow() var appList = browser.page.appList()// 0.1.打开应用列表页面 // appList.assert.containsText("@newAppButton",'新建应用') //分步写: appList.navigate()// 1.打开应用列表页面 .waitForElementVisible('@appListPage', 5000) .assert.containsText('@appListPage', '应用列表') // 列表页面 .click('@newAppButton') // 1.点击新建********************** .waitForElementVisible('@newListPage', 5000) .assert.containsText('@newListPage', '基本信息') // 新建页面 .setValue('@appListName', '新建应用名') // + Number(new Date()) .click('@appListTypeClick')// 点击:接入方式 .waitForElementVisible('@appListTypeSlected', 5000) .click('@appListTypeSlected')// 点击选项 .click('@appListSubmit')// 提交新建:延时 .pause(1000) .click('@appManageTab') // 返回列表页 .pause(2000) // .waitForElementVisible('@editAppButton') // .assert.containsText('@editAppButton', '查看编辑') // 编辑按钮 // .click('@editAppButton') // 2.点击编辑********************** // .waitForElementVisible('@editListPage', 5000) // .assert.containsText('@editListPage', '基本信息') // 编辑页面 // .click('@editListMenu') // 定位 // .waitForElementVisible('@editAppListIcon', 5000) // .click('@editAppListIcon') // .waitForElementVisible('@editAppListName', 5000) // .setValue('@editAppListName', '编辑应用名') // 新的名称 // .click('@editAppListSubmit')// 提交编辑:延时 // .pause(5000) // .click('@appManageTab') // 返回列表页 // .waitForElementVisible('@appListPage') // .assert.containsText('@appListPage', '应用列表') // 刷新列表:延时 .click('@moreAppButtonClick') // 3.点击更多(删除)********************** .waitForElementVisible('@delAppButtonSlected', 5000) .assert.containsText('@delAppButtonSlected', '删除应用') .click('@delAppButtonSlected') .waitForElementVisible('@delAppButtonSubmit', 5000) .assert.containsText('@delAppButtonSubmit', '确定') .click('@delAppButtonSubmit') // 提交1:延迟 .pause(1000) .click('@delAppButtonSubmit') // 提交2:确认删除 .pause(3000) }, after: function (browser) { } }
5.启动测试:
npm run e2e
附:常用断言语句总结
.waitForElementNotPresent('@editLoadingMask') // 等待加载消失 .waitForElementNotVisible('@dialogWrap') // 等待弹框消失 .assert.hidden('@newComDialog') //检查对话框dialog隐藏 .assert.cssClassPresent('@switchChange', 'is-checked') //校验是否存在class属性 .assert.cssClassNotPresent('@switchChange', 'is-checked') //没有出现这个class属性 .assert.containsText('@newListPage', 'xxx') // 校验元素内容是否等于xxx .expect.element('@firstLogProtocolTitle').text.to.not.contain('xxx') // 内容不等于xxx .assert.value('@newLogProtocolInput', 'xxx') //判断当前内容是否为xxx .assert.urlContains('whiteListMock') // 检查当前url包含whiteListMock
原文链接:https://www.cnblogs.com/wheatCatcher/p/11342821.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js中的循环
下一篇:Vue中jsx的最简单用法
- vue 自动化部署 jenkins 篇 2019-04-11
- Node.js+Protractor+vscode搭建测试环境(1) 2019-03-10
- 前端页面显示问题解决步骤(方法) 2019-02-27
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试 2019-01-15
- 省份二级联动 2018-12-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash