页面对象模型
页面对象方法是一种流行的模式,通过将 Web 应用的页面或页面片段包装到对象中来编写端到端测试。
页面对象的目的是允许软件客户端通过抽象底层 HTML 操作来访问和操作页面,从而实现人类可以做到的任何事情,看到任何东西。
可以在 这篇文章 中找到对页面对象的全面介绍。
配置页面对象
要创建页面对象,只需创建一个包含描述页面的属性的对象。每个页面对象都应该位于单独的文件中,位于指定的文件夹中。
Nightwatch 从 page_objects_path
配置属性中指定的文件夹(或文件夹)读取页面对象,例如
{
"page_objects_path": ["nightwatch/pages"]
}
page_objects_path
属性也可以是文件夹数组,从而允许您将页面对象逻辑地拆分为更小的组。
Url 属性
您可以选择添加 url
属性来指定页面的 URL。要导航到页面,您可以在页面对象上调用 navigate
方法。
URL 通常定义为字符串
module.exports = {
url: 'https://google.com',
elements: {}
};
如果 URL 是动态的,它也可以是函数。这方面的一个用例是支持不同的测试环境。您可以创建一个在页面上下文中被调用的函数,从而允许您执行以下操作
module.exports = {
url: function() {
return this.api.launchUrl + '/login';
},
elements: {}
};
页面元素
在大多数情况下,您需要在页面上定义元素,以便您的测试可以通过命令和断言与它们进行交互。使用 elements
属性可以轻松实现这一点,以便将所有元素定义在一个位置。尤其是在大型集成测试中,使用 elements
将有助于保持测试代码 DRY。
在 CSS 和 xpath 定位策略之间切换是在内部处理的,因此您不需要在测试中调用 useXpath
和 useCss
。默认 locateStrategy
是 css,但您也可以指定 xpath。
元素属性
为了在与页面对象元素交互时提供更大的灵活性,可以将元素指定为对象,该对象至少需要包含 selector
属性。除了选择器之外,还可以指定其他属性。以下是完整列表
selector
- 元素选择器名称(例如:'@searchBar')locateStrategy
- 例如 'css selector'index
- 用于在查询中定位特定元素,该查询会导致返回多个元素。通常,只使用第一个元素(index = 0),但使用index
属性,您可以指定结果中的任何元素。abortOnFailure
- 用于在使用waitForElement*
命令时覆盖此设置timeout
- 用于在使用waitForElement*
命令或断言时覆盖默认超时retryInterval
- 用于在使用waitForElement*
命令或断言时覆盖默认重试间隔suppressNotFoundErrors
- 一些元素命令(如.click()
或.getText()
)如果无法找到元素,将会抛出NoSuchElement
错误,导致测试失败。如果将此选项设置为true
,则会忽略此错误。
页面部分
有时定义页面部分很有用。部分执行以下两件事
- 在页面下提供命名空间级别
- 提供元素级嵌套,以便在部分中定义的任何元素都是其父部分在 DOM 中的后代
您可以使用 sections
属性创建部分。
特定于页面的命令
您可以使用 commands
属性将自定义命令添加到页面对象。这是一种封装页面逻辑的有用方法,否则这些逻辑将存在于测试中或多个测试中。
Nightwatch 将在页面或部分的上下文中调用命令。客户端命令(如 pause
)可通过 this.api
获取。对于链接,每个函数都应该返回页面对象或部分。
从 Nightwatch 2 开始,还可以将页面命令导出为 ES6 类。