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

背景：

前端页面模拟仿真操作，目的是避免每次更新相关内容重复之前的测试操作，减少不必要的时间投入，以及校验功能的可用性。但是目前元素定位是个问题（每次页面有修改都要重设某些元素定位）

测试分类：

一.单元测试：站在程序员的角度测试；

1、减少开发人员的重复测试时间 2、面向程序的功能模块的测试

二.端对端测试：站在测试人员的角度测试

1、减少测试人员的重复测试时间 2、面向系统的功能模块的测试 3、本质是模拟用户使用系统

测试插件：

nightwatchjs：

主要包括：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