Nightwatch

参考文献
官网地址
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)
  }
  // }
}