[开发测试]Nightwatch 写测试用例--基于vue前端的自动化测试（三）

使用首选的CSS选择器模型在页面上定位元素，Nightwatch使编写自动端到端测试变得非常容易。
为项目中的测试创建一个单独的文件夹，例如：tests。其中的每个文件都将由Nightwatch测试运行器作为测试加载。
基本测试将如下所示：

module.exports = {
    'Demo test': function(browser) {
        browser
        .url('http://www.google.com')
        .waitForElementVisible('body', 1000)
        .setValue('input[type=text]', 'Nightwatch')
        .waitForElementVisible('button[name=btnG]',1000)
        .click('button[name=btnG]')
        .pause(1000)
        .assert.containsText('#main', 'Night Watch')
        .end()
    }
}

如果需要，测试可以有多个步骤：

module.exports = {
    'step one': function(browser) {
        browser
        .url('http://www.google.com')
        .waitForElementVisible('body', 1000)
        .setValue('input[type=text]', 'Nightwatch')
        .waitForElementVisible('button[name=btnG]',1000)
    }
    'step two': function(browser) {
        browser
        .click('button[name=btnG]')
        .pause(1000)
        .assert.containsText('#main', 'Night Watch')
        .end()
    }
}

测试也可以这种格式编写：

this.demoTestGoogle = function(browser) {
    browser
        .url('http://www.google.com')
        .waitForElementVisible('body', 1000)
        .setValue('input[type=text]', 'Nightwatch')
        .waitForElementVisible('button[name=btnG]',1000)
        .click('button[name=btnG]')
        .pause(1000)
        .assert.containsText('#main', 'Night Watch')
        .end()
    }
}

使用XPath选择器
Nightwatch也支持xpath选择器。要切换到xpath而不是css选择器作为定位策略，在测试中调用方法useXpath（），如下例所示。要切换回CSS，请调用useCss（）。
要始终使用xpath，请在测试设置中将属性“use_xpath”设置为true。

this.demoTestGoogle = function(browser) {
    browser
        .useXpath()
        .click("//tr[@data-record]/span[text()='Search Text']")
        .useCss()
        .setValue('input[type=text]', 'Nightwatch')
    }
}

BDD期待断言
Nightwatch从版本v0.7开始引入了一个新的BDD风格的断言库，它极大地提高了断言的灵活性和可读性。expect断言使用来自Chai框架的Expect api的子集，此时仅可用于元素。这是一个例子：

module.exports = {
    'Demo test': function(client) {
        client
          .url('http://www.google.com')
          .pause(1000)
        //expect element to be present in 1000ms
        client.expect.element('body').to.be.present.before(1000)
        //expect element to have css property 'display'
        client.expect.element('#lst-ib').to.have.css('display')
        //expect element to have css propertity which contains text 'vasq'
        client.expect.element('body').to.have.attribute('class').which.contains('vasq')
        //expect element to be an input tag
        client.expect.element('#lst-ib').to.be.an('input')
        client.expect.element('#lst-ib').to.be.visible
    }
}

Nightwatch提供在测试中使用的标准之前/之后以及之前/之后的每个挂钩。 之前和之后将分别在执行测试套件之前和之后运行，而beforeEach和afterEach分别在每个测试用例之前和之后运行（测试步骤）。
所有方法都将Nightwatch实例作为参数传递。

module.exports = {
    before: function(browser) {
        console.log('setting up...')
    }
    after: function(browser) {
        console.log('closing down...')
    }
    beforeEach: function(browser，done) {
        //performing an async operation
        setTimeout(function(){
           done()
        }, 100)
    }
    afterEach: function(browser，done) {
        //performing an async operation
        performAsync)(function(err) {
           if(err) {
              done(err)
           }
           //...
        })
    }
    'step one' : function (browser) {
        browser
        //...
    }
    'step two' : function (browser) {
        browser
        //...
        .end()
    }
}

在上面的例子中，方法调用的顺序如下：before（），beforeEach（），“step one”，afterEach（），beforeEach（），“step two”，afterEach（），after（）。
出于向后兼容性原因，afterEach钩子只能以其异步形式接收浏览器对象 - afterEach（browser，done）{…} 所有的before[Each]和after[Each]方法也可以执行异步操作，在这种情况下，它们需要将回调作为第二个参数传递。必须在异步操作完成时调用done函数作为最后一步。不调用它将导致超时错误。
控制完成的调用超时
默认情况下，完成调用超时设置为10秒（单元测试为2秒）。在某些情况下，这可能不足以避免超时错误，您可以通过在外部全局文件中定义asyncHookTimeout属性（以毫秒为单位）来增加此超时。

External Globals

大多数情况下，在globals_path属性中指定的外部文件中定义全局变量更有用，而不是在nightwatch.json中定义它们。您可以根据需要覆盖每个环境的全局变量。假设您在本地运行测试，并且还在远程登台服务器上运行。大多数情况下，您需要一些不同的设置。

Global Hooks

在测试范围之外，全局也可以使用与测试套件相同的一组钩子。有关详细信息，请参阅以下示例。在全局钩子的情况下，beforeEach和afterEach引用测试套件（即测试文件），并在测试套件之前和之后运行。

Global Settings

有许多全局变量保持测试设置并可以控制测试执行。这些在提供的globalsModule示例中有详细说明。

module.exports = {
    'default': {
        isLocal: true
    }
    'integration': {
        isLocal: false
    }
    //External before hook is ran at the beginning of the tests run, before creating the Selenium session
    before: function(done) {
        if(this.isLocal) {
            App.startServer(function() {
                done()
            })
        }else{
            done()
        }    
    }
    //External after hook is ran at the very end of the tests run, after closing the Selenium session
    after: function(done) {
        if(this.isLocal) {
            App.stopServer(function() {
                done()
            })
        }else{
            done()
        }    
    }
    beforeEach: function(browser, done) {
        browser.status(function(result) {
            console.log(result.value)
            done()
        })
    }
    afterEach: function(browser, done) {
        browser.status(function(result) {
            console.log(browser.currentTest)
            done()
        })
    }
}