nightwatch系列教程04——开发者指南：在测试中使用Page Object
本章内容翻译自http://nightwatchjs.org/guide#page-objects。
使用 Page Objects
Page Objects方法是一种流行的模式，通过将web应用程序的页面或页面片段包装为对象来编写端到端测试。页面对象的目的，是通过抽象出html的行为，让软件客户端可以像人一样的看见并且操作界面。关于Page Object，你可以在这里找到更详细的介绍。
从0.7版本开始，Nightwatch为创建页面对象提供了增强的、更强大的接口，与以前的支持相比有了显著的改进。0.7之前创建的页面对象仍将继续工作，不过我们建议升级到新版本。要使用新版本，Page Object必须包含 `elements` 或 `sections` 属性。否则，会按照旧版做处理。
配置 Page Object
简单地创建一个页面对象，只需要用描述页面的属性创建一个对象就可以了。每一个页面对象都应该属于不同的文件, Nightwatch将读取配置文件中page_objects属性定义的目录。
page_objects也可以是一个文件夹数组，让你可以根据业务逻辑将页面对象分成不同的组。
Url 属性
你可以添加一个 url 属性来指定页面的url。你可以调用 navigate() 方法来跳转到对应的界面。
URL 通常是个字符串:
module.exports = {
url: 'http://google.com',
elements: {}
};他也可以是一个函数, 用来生成动态的链接。比如你想要支持不同的测试环境的时候这就很有用。你可以创建一个函数，他在页面的上下文中被调用：
module.exports = {
url: function() {
return this.api.launchUrl + '/login';
},
elements: {}
};### 定义元素（elements）
多数情况下你都会在你的页面上定义元素，你的测试将会通过命令或者断言来与他交互。使用elements属性可以让你的元素都定义在同一个地方。
Page Object 内部会自动等切换css和xpath，所以你不用在测试中手动调用 useXpath 或者 useCss 。默认的 locateStrategy 是css，但你仍可以指定xpath：
module.exports = {
elements: {
searchBar: {
selector: 'input[type=text]'
},
submit: {
selector: '//[@name="q"]',
locateStrategy: 'xpath'
}
}
};如果你的elements都是使用同一种默认选择器策略的话，你可以使用这种简写形式：
module.exports = {
elements: {
searchBar: 'input[type=text]'
}
};个人提示：上面的简写，我本人在项目中试过了，不起作用，而且报的错误也莫名其妙。如果你在使用中发现错误，不要使用简写形式试试
在调用元素命令或者断言的时候，elements 属性可以让你使用 @ 作为前缀来引用定义的元素。
你也可以定义一个元素对象的数组：
var sharedElements = {
mailLink: 'a[href*="mail.google.com"]'
};
module.exports = {
elements: [
sharedElements,
{ searchBar: 'input[type=text]' }
]
};看一个包含 url 和 elements 属性的例子：
module.exports = {
url: 'http://google.com',
elements: {
searchBar: {
selector: 'input[type=text]'
},
submit: {
selector: '//[@name="q"]',
locateStrategy: 'xpath'
}
}
};测试文件可以这么写：
module.exports = {
'Test': function (client) {
var google = client.page.google();
google.navigate()
.assert.title('Google')
.assert.visible('@searchBar')
.setValue('@searchBar', 'nightwatch')
.click('@submit');
client.end();
}
};定义 Sections
有时候将页面划分为几部分(Section)也非常有用。Section有两个好处：
- 在页面上提供了一个命名空间的层级
- 提供元素级别的嵌套，即
Section中的elements对应为它在的DOM中的子元素
使用 sections 属性来定义：
module.exports = {
sections: {
menu: {
selector: '#gb',
elements: {
mail: {
selector: 'a[href="mail"]'
},
images: {
selector: 'a[href="imghp"]'
}
}
}
}
};测试文件这么写：
module.exports = {
'Test': function (client) {
var google = client.page.google();
google.expect.section('@menu').to.be.visible;
var menuSection = google.section.menu;
menuSection.expect.element('@mail').to.be.visible;
menuSection.expect.element('@images').to.be.visible;
menuSection.click('@mail');
client.end();
}
};
注意：section上每一个命令（command）和断言（assertion，不是expect assertions）都返回其自身——链式返回。如果需要的话，你可以为复杂的DOM结构编写嵌套的section。
一个嵌套section的例子：
module.exports = {
sections: {
menu: {
selector: '#gb',
elements: {
mail: {
selector: 'a[href="mail"]'
},
images: {
selector: 'a[href="imghp"]'
}
},
sections: {
apps: {
selector: 'div.gb_pc',
elements: {
myAccount: {
selector: '#gb192'
},
googlePlus: {
selector: '#gb119'
}
}
}
}
}
}
};在测试文件中使用嵌套section：
module.exports = {
'Test': function (client) {
var google = client.page.google();
google.expect.section('@menu').to.be.visible;
var menuSection = google.section.menu;
var appSection = menuSection.section.apps;
menuSection.click('@appSection');
appSection.expect.element('@myAccount').to.be.visible;
appSection.expect.element('@googlePlus').to.be.visible;
client.end();
}
};编写命令（Command）
你可以在page object中使用 command 属性来添加命令。这是一个封装页面业务逻辑的一个有用的方式。
Nightwatch 将会调用页面上下文或者section的命令。客户端的命令(比如 pause)你可以使用 this.api 来访问。为了链式调用，每个命令函数都应该返回page对象或者section
在下面的案例中，这个命令用来封装点击提交按钮的逻辑：
var googleCommands = {
submit: function() {
this.api.pause(1000);
return this.waitForElementVisible('@submitButton', 1000)
.click('@submitButton')
.waitForElementNotPresent('@submitButton');
}
};
module.exports = {
commands: [googleCommands],
elements: {
searchBar: {
selector: 'input[type=text]'
},
submitButton: {
selector: 'button[name=btnG]'
}
}
};测试文件就简单多了：
module.exports = {
'Test': function (client) {
var google = client.page.google();
google.setValue('@searchBar', 'nightwatch')
.submit();
client.end();
}
};
