nightwatch API

API

Nightwatch的API分為四個部分

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) .selected .present

還有時間修飾.before(ms)（表示一段時間之內）、.after(ms)（表示一段時間之后）。就像造句一樣:某某元素的某某屬性（在某某時間）（不）等於什么值，這就是BDD風格的測試代碼。例如：

this.demoTest = function (browser) {
      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('other attribute');
      browser.expect.element('body').to.have.attribute('data-attr')
    .which.contains('something');
      browser.expect.element('body').to.have.attribute('data-attr')
    .which.matches(/^something\ else/);
};

　　

 

2.Assert

以.assert/.verify開頭的兩套相同的方法庫，區別是assert如果斷言失敗則退出整個測試用例所有步，verify則打印后繼續進行。

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

　　

有如下判斷方法：

.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) 檢查指定元素是否可見

 

3.Commands

很多命令的讀寫，可以操作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])

 

簡單的例子：

this.demoTest = function (browser) {
    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 
- Command 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();
  }
};

　　

nightwatch-helpers

nightwatch-helpers

Custom assertions and commands for easier Nightwatch tests.

Usage

npm install nightwatch-helpers --save-dev

In your Nightwatch config:

{
  "custom_commands_path": ["node_modules/nightwatch-helpers/commands"], "custom_assertions_path": ["node_modules/nightwatch-helpers/assertions"] }

What's Included

Assertions

• count(selector, count)

• attributePresent(selector, attr)

• evaluate(fn, [args], [message])

• checked(selector, expected)

• focused(selector, expected)

• hasHTML(selector, html)

• notVisible(selector)

Commands

• dblClick(selector)

• waitFor(duration)

• trigger(selector, event, [keyCode])

• enterValue(selector, value)

 

只需要在圖中位置配置一下即可

其他

推薦使用Headless測試即不打開瀏覽器可視界面以便能跑在服務器上。比如Phantomjs可以模擬webkit內核瀏覽器的行為，在Nightwatch中配置一下Phantomjs環境即可，啟動nightwatch時使用–env加上配置里的環境名激活對應的環境。如今（59版本以上）Phantomjs已經停止維護，使用Chrome自帶的headless模式是更好的選擇。也可以使用Puppeteer來做E2E測試，好處是只依賴一個Puppeteer，並且API相對簡單