页面对象模型
页面对象方法是一种流行的模式,通过将 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 类。