页面对象方法是一种流行的模式,通过将 Web 应用的页面或页面片段包装到对象中来编写端到端测试。

页面对象的目的是允许软件客户端通过抽象底层 HTML 操作来访问和操作页面,从而实现人类可以做到的任何事情,看到任何东西。

可以在 这篇文章 中找到对页面对象的全面介绍。

配置页面对象

要创建页面对象,只需创建一个包含描述页面的属性的对象。每个页面对象都应该位于单独的文件中,位于指定的文件夹中。

Nightwatch 从 page_objects_path 配置属性中指定的文件夹(或文件夹)读取页面对象,例如

nightwatch.json
{
  "page_objects_path": ["nightwatch/pages"]
}

page_objects_path 属性也可以是文件夹数组,从而允许您将页面对象逻辑地拆分为更小的组。

Url 属性

您可以选择添加 url 属性来指定页面的 URL。要导航到页面,您可以在页面对象上调用 navigate 方法。

URL 通常定义为字符串

nightwatch/pages/examplePage.js
module.exports = {
  url: 'https://google.com',
  elements: {}
};

如果 URL 是动态的,它也可以是函数。这方面的一个用例是支持不同的测试环境。您可以创建一个在页面上下文中被调用的函数,从而允许您执行以下操作

nightwatch/pages/examplePage.js
module.exports = {
  url: function() { 
    return this.api.launchUrl + '/login'; 
  },
  elements: {}
};

页面元素

在大多数情况下,您需要在页面上定义元素,以便您的测试可以通过命令和断言与它们进行交互。使用 elements 属性可以轻松实现这一点,以便将所有元素定义在一个位置。尤其是在大型集成测试中,使用 elements 将有助于保持测试代码 DRY。

在 CSS 和 xpath 定位策略之间切换是在内部处理的,因此您不需要在测试中调用 useXpathuseCss。默认 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 类。