nightwatch 使用Expect进行浏览器元素校验 （三）

自动化测试一个非常重要的特性就是校验，nightwatch提供Expect库和Assert库，接下来我们分别就这两个库进行介绍。

本文翻译自http://nightwatchjs.org/api/#expect-api    上一篇 nightwatch + selenium 基于浏览器的web自动化测试 教程（二)

 

目录

Expect 

语法链

.equal(value)/.contain(value)/.match(regex)

.not

.before(ms)/.after(ms)

.a(type)

.attribute(name)

.css(property)

.enabled

.present

.selected

.text

.value

.visible

---

Expect 

expect库是基于Chai Expect 校验库进行扩展开发的，提供了链式语法（ chainable language ），看下面的案例

this.demoTest = function (browser) {
  // start with identifying the element
  // and then assert the element is present
  browser.expect.element('#main').to.be.present;

  // or assert the element is visible
  browser.expect.element('#main').to.be.visible;
};

语法链

下面的关键字是用来提取元素进行校验的提取器，本身不具备测试校验的能力。

• to
• be
• been
• is
• that
• which
• and
• has
• have
• with
• at
• does
• of

.equal(value)/.contain(value)/.match(regex)

以上三个方法是对当前元素的熟悉、value、css元素等进行校验，如下案例：

this.demoTest = function (browser) {
  browser.expect.element('#main').text.to.equal('The Night Watch');

  browser.expect.element('#main').text.to.contain('The Night Watch');

  browser.expect.element('#main').to.have.css('display').which.equals('block');
};

.not

this.demoTest = function (browser) {
  browser.expect.element('#main').text.to.not.equal('The Night Watch');

  browser.expect.element('#main').text.to.not.contain('The Night Watch');

  browser.expect.element('#main').to.have.css('display').which.does.not.equal('block');
};

.before(ms)/.after(ms)

before表示在指定的时间之前重新校验，after表示在指定的时间之后重新校验。

this.demoTest = function (browser) {
  //1000ms以内，main元素会展示'The Night Watch'字符串
  browser.expect.element('#main').text.to.contain('The Night Watch').before(1000);
  //500ms之后，main元素会不会包含'The Night Watch'字符串
  browser.expect.element('#main').text.to.not.contain('The Night Watch').after(500);
};

.a(type)

判断元素的类型

参数:

名称	类型	描述
type	string	期望的类型
message 可选参数	string	可选参数，当校验失败时，这个消息将会在控制台或者日志里面打印

this.demoTest = function (browser) {
  browser.expect.element('#q').to.be.an('input'); //判断目标元素为input类型
  browser.expect.element('#q').to.be.an('input', 'Testing if #q is an input');
  browser.expect.element('#w').to.be.a('span'); //判断目标元素为span类型
};

.attribute(name)

判断给定元素的指定属性是否存在，且与预期的值相等

参数:

名称	类型	描述
attribute	string	属性名称
message 可选参数	string	可选参数，当校验失败时，这个消息将会在控制台或者日志里面打印

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/);
};

.css(property)

判断给定元素的指定css样式是否存在，且与预期的值相等

参数:

名称	类型	描述
property	string	css属性名称
message 可选参数	string	可选参数，当校验失败时，这个消息将会在控制台或者日志里面打印

this.demoTest = function (browser) {
  browser.expect.element('#main').to.have.css('display');
  browser.expect.element('#main').to.have.css('display', 'Testing for display');
  browser.expect.element('#main').to.not.have.css('display');
  browser.expect.element('#main').to.have.css('display').before(100);
  browser.expect.element('#main').to.have.css('display').which.equals('block');
  browser.expect.element('#main').to.have.css('display').which.contains('some value');
  browser.expect.element('#main').to.have.css('display').which.matches(/some\ value/);
};

.enabled

判断一个元素是否enable 可用

this.demoTest = function (browser) {
  browser.expect.element('#weblogin').to.be.enabled;
  browser.expect.element('#main').to.not.be.enabled;
  browser.expect.element('#main').to.be.enabled.before(100);
};

.present

判断元素是否呈现在dom上

this.demoTest = function (browser) {
  browser.expect.element('#main').to.be.present;
  browser.expect.element('#main').to.not.be.present;
  browser.expect.element('#main').to.be.present.before(100);
};

.selected

判断一个option元素是否被选中，或者checkbox、radio 是否被选中

this.demoTest = function (browser) {
  browser.expect.element('#main').to.be.selected;
  browser.expect.element('#main').to.not.be.selected;
  browser.expect.element('#main').to.be.selected.before(100);
};

.text

获取一个元素的Text值，配合 contains/equals/matches 进行校验

this.demoTest = function (browser) {
  browser.expect.element('#main').text.to.equal('The Night Watch');
  browser.expect.element('#main').text.to.not.equal('The Night Watch');
  browser.expect.element('#main').text.to.equal('The Night Watch').before(100);
  browser.expect.element('#main').text.to.contain('The Night Watch');
  browser.expect.element('#main').text.to.match(/The\ Night\ Watch/);
};

.value

获取元素的value属性， 配合 contains/equals/matches 进行校验

this.demoTest = function (browser) {
  browser.expect.element('#q').to.have.value.that.equals('search');
  browser.expect.element('#q').to.have.value.not.equals('search');
  browser.expect.element('#q').to.have.value.which.contains('search');
  browser.expect.element('#q').to.have.value.which.matches(/search/);
};

.visible

判断元素是否可见

this.demoTest = function (browser) {
  browser.expect.element('#main').to.be.visible;
  browser.expect.element('#main').to.not.be.visible;
  browser.expect.element('#main').to.be.visible.before(100);
};