Nightwatch API--基于vue前端的自动化测试（二）

Nightwatch的API分为四部分：
1、Expect
2、Assert
3、Commands
4、webdriver protocol

1. Expect

在browser实例上以.expect.element开头的BDD（行为驱动测试）风格的接口，0.7及以上版本nightwatch可用。通过.element方法传入一个selector（参考querySelector或者jq的语法）获取到dom实例，通过.text、.value、.attribute等方法获取到实例属性。还有一些语义明确的修饰（to，be，been, is, that, which, and, has, with, at, does, of）加上比较判断

.equal(value)/.contain(value)/.match(regex)
.selectd
.present
//时间修饰符在一段时间之内
.before(ms)
//在一段时间之后
.after(ms)

使用方式：某某元素的某某属性（在某某时间）等于/不等于什么值
这是BDD风格的测试代码。上例子：

this.demoTest = function (broswer) {
    browser.expect.element('body').to.have.attribute('data-attr');
    browser.expect.element('body').to.not.have.attribute('data-attr');
    browser.expect.element('body').to.not.have.attribute('data-attr','Testing if body does not have data-attr');
    browser.expect.element('body').to.have.attribute('data-attr').before(100);
    browser.expect.element('body').to.have.attribute('data-attr').equals('some attribute');
    browser.expect.element('body').to.have.attribute('data-attr').not.equals('some attribute');
    browser.expect.element('body').to.have.attribute('data-attr').which.contains('some attribute');
    browser.expect.element('body').to.have.attribute('data-attr').which.matches(/^sth\ else/);
}

2. Assert

.assert 和 .verify开头的方法库相同，assert断言失败则退出整个测试用例，verify在打印出log后继续执行。

this.demoTest = function (browser) {
    browser.verify.title('Nightwatch.js');
    browser.assert.title('Nightwatch.js');   
}

判断方法：

    //检查元素selector的指定属性attribute是否包含期待的值expected，打印出指定信息(可选填的message)
    .attributeContains(selector, attribute, expected[, message]) 
    //检察元素指定属性是否等于预期
    .attributeEquals(selector, attribute, expected[,message])
    .containText(selector, expected[,message])
    //元素指定class是否存在
    .cssClassPresent(selector, expected[,message])
    .cssClassNotPresent(selector, expected[,message])
    //元素指定css属性是否存在
    .cssProperty(selector, expected[,message])
    .elementPresent(selector[,message])
    .elementNotPresent(selector[,message])
    .hidden(selector[,message])
    .title(expected[,message])
    .urlContains(expectedText[,message])
    .urlEquals(expected[,message])
    //元素value是否符合预期
    .value(selector, expected[,message])
    .valueContains(selector, expected[,message]) 
}

3.Commands

    //清空input,textarea值
    .clearValue(selector[,message])
    .click(selector[,callback])
    .closeWindow([callback])
    .deleteCookie(cookieName[,callback])
    .deleteCookies([callback])
    //结束会话(关闭窗口)
    .end([callback])
    .getAttribute(selector, attribute, callback)
    .getCookie(cookieName, callback)
    .getCookies(callback)
    .getCssProperty(selector, attribute, callback)
    .getElementSize(selector, callback)
    .getLocation(selector, callback)
    .getLocationInView(selector, callback)
    //获取selenium的log，其中type为string或function
    .getLog(typeString, callback)
    .getLogTypes(callback)
    .getTagname(selector, callback)
    .getText(selector, callback)
    .getTitle(callback)
    .getValue(selector, callback)
    //url方法的别名，不传则跳转到配置中的launch_url
    .init([url])
    .injectScript(scriptUrl[, id, callback])
    //log的type是否可用
    .isLogAvailable(typeString, callback)
    .isVisible(selector, callback)
    .maximizeWindow([callback])
    .moveToElement(selector, xoffset, yoffset, callback)
    //暂停指定的时间，如果没有时间则无限暂停
    .pause(ms[, callback])
    //允许在回调中访问api
    .perform(callback)
    .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()
    .useXpath()
    .waitForElementNotPresent(selector, time[, abortOnFailure, callback, message])
    .waitForElementNotVisible(selector, time[, abortOnFailure, callback, message])
    .waitForElementPresent(selector, time[, abortOnFailure, callback, message])
    .waitForElementVisible(selector, time[, abortOnFailure, callback, message])
}
//举个简单的例子：
this.demoTest = function (broswer) {
    browser.click("#main ul li a.first", function(response) {
        this.assert.ok(browser === this, "check if the context is right")
        this.assert.ok(typeof response === "object", "we got a response object")
    })    
}

4. webdriver protocol

可以操作一些更底层的东西
比如sessions，navigation, conmmand contexts, elements, element state, element interaction,
Element location, document handling, cookies, user actions, user prompts, screen capture, mobile related

module.exports = {
    'demo Test': function(browser){
        browser.element('css selector', 'body', function(res){
            console.log(res)
        })
    }
}

也可以单独使用chromedriver等进行单一平台测试，效率更高，测试更快。只需要npm安装chromedriver或者其他webdriver，不需要selenium，在selenium设置中把selenium进程设置为false，测试环境配置中做出相应的改变。在golobal_path设置的配置文件中，利用nightwatch测试的全局before和after钩子中开、关服务器就好：

var chromedriver = require('chromedriver')
function startChromeDriver() {
    chromedriver.start()
}
function stopChromeDriver() {
    chromedriver.stop()
}
module.exports = {
    before: function(done) {
        startChromeDriver.call(this);
        done()
    }
    after: function(done) {
        stopChromeDriver.call(this);
        done()
    }
}

基于国外网站的翻译+搬运工，有错误敬请谅解。