Nightwatch——自动化测试（端对端e2e）

被页竞
前端页面模拟仿真操作，目的是避免每次更新相关内容重复之前的测试操作，减少不必要的时间投入，以及校验功能的可用性。但是目前元素定位是个问题（每次页面有修改都要重设某些元素定位）
测试分类：
一.单元测试：站在程序员的角度测试；
1、减少开发人员的重复测试时间 2、面向程序的功能模块的测试
二.端对端测试：站在测试人员的角度测试
1、减少测试人员的重复测试时间 2、面向系统的功能模块的测试 3、本质是模拟用户使用系统
测试插件：
Nightwatchjs：https://nightwatchjs.org/
主要包括：1、元素定位 2、断言 3、POM
准备工作：
1.安装(vue3.0已经内置nigjtwatch.js):来自NPM

1. npm install nightwatch

复制代码

使用WebDriver兼容服务器来控制浏览器

1. desiredCapabilities ： {  browserName ： ' chrome '，  chromeOptions ： {    w3c ： false  }}

复制代码

2.配置文件：package.json

1.   "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文件

1. 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文件）

1. 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) {  }}

复制代码

实例：

1. 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.启动测试：

1. npm run e2e

复制代码

附：常用断言语句总结

1. .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/archive/2019/08/12/11342821.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！