页面对象 API

概述

页面对象为测试用例创建提供了一个额外的抽象层。页面对象在模块中定义，并解析为创建页面对象实例的工厂函数。

有关 Nightwatch 中页面对象模型的介绍，请参考 入门 指南。

页面对象模块

名称 类型 描述
命令 数组 包含表示添加到页面对象实例的方法的函数的对象列表。
元素 对象 | 数组 一个对象或多个对象的数组，命名元素定义，用作从页面对象调用的元素命令中的元素选择器。
属性 对象 | 函数 一个对象或一个返回对象的函数，该对象表示用户变量的容器。Props 对象直接复制到页面对象实例的 props 属性中。
部分 对象 一个命名部分定义的对象，定义页面对象中的部分。
url 字符串 | 函数 一个 URL 或返回 URL 的函数，在页面对象实例的 navigate() 方法被调用时，在 url() 命令中使用。

页面对象实例

页面对象模块定义用于在标准命令 API 中的 page 引用调用其各自的工厂函数时定义页面对象实例。

const myPageObject = browser.page.MyPage(); // defined in MyPage.js module

每次调用像 MyPage 上面的工厂函数时，都会创建一个新的页面对象实例。

属性




名称 类型 描述
api 对象 一个提供访问完整 Nightwatch 命令 API 的引用，通常在测试用例中称为 浏览器。这用于访问那些不是页面对象 API 中命令子集一部分的命令。
元素 对象 元素选择器使用的 Element 对象映射。
名称 字符串 页面对象的名称，由其模块名称定义（不包括扩展名）。这是在命令 API 中的 page 引用中访问页面对象工厂时使用的相同名称。
属性 对象 对从模块定义分配的 props 对象的引用。

注意：如果在页面对象模块中定义为对象实例，这将是页面对象的所有实例的相同 props 对象。如果你希望每个 props 对象都是唯一的，在模块中定义 props 为一个函数，该函数将为每个新的页面对象实例返回一个新的 props 对象。
部分 对象 为页面对象定义的 Sections 对象映射。这将仅包含页面对象模块根 sections 定义中的部分。嵌套部分可以通过其父部分自己的 section 引用访问。
url 字符串|函数 来自页面对象模块的 url 值，可以是字符串，也可以是函数，具体取决于它在模块中如何定义。

示例

module.exports = {
  // can be string or function
  url: function () {
    return this.api.launchUrl;
  },
  elements: {
    // shorthand, specifies selector
    mySubmitButton: 'input[type=submit]'
    

    // full
    myTextInput: {
      selector: 'input[type=text]',
      locateStrategy: 'css selector'
    }
  },
  commands: [
    {
      myCustomPause: function () {
        this.api.pause(this.props.myPauseTime);
      }
    }
  ],
  // object version (best considered immutable)
  props: {
    myPauseTime: 1000
  },
  

  sections: {
    myFooterSection: {
      selector: '#my-footer',
      locateStrategy: 'css selector',
      elements: {
        myLogo: {
          selector: '.my-logo',
          locateStrategy: 'css selector'
        }
      },
      commands: [
        {
          myMoveToLogo: function () {
            this.moveToElement('@myLogo', this.props.myLogoX, this.props.myLogoY);
          }
        }
      ],
      // function version (recommended)
      props: function () {
        return {
          myLogoX: 10,
          myLogoY: 10
        };
      },
      sections: {
        // additional, nested sections
      }
    }
  }
};

页面对象方法

.navigate()

使用命令 API 的 url() 命令，导航到为页面对象定义的解析后的 URL。此命令通常在使用页面对象时代替命令 API 的 url()，因为页面对象的 url 成员是用户定义的 URL 字符串或函数，而不是用于导航到 URL 的调用。

元素实例

元素实例封装用于处理元素选择器的定义。通常你不需要直接访问它们，而是使用它们以 @ 为前缀的名称作为选择器参数来引用它们，但可以通过页面对象或部分的 elements 属性访问它们。

部分实例

有关创建部分的介绍，请参见 定义部分 指南页面。

页面对象部分实例从页面对象实例的 section 属性访问（注意，这是 "section" 的单数形式，而复数形式 "sections" 用于模块定义中）。

部分通过页面对象工厂自动创建，可以直接从 section 引用作为属性访问。

const myPageObject = browser.page.MyPage();
const mySection = myPageObject.section.MySection; // from a `sections: {}` block in page object

页面对象命令

有关编写页面对象自定义命令的介绍，请参见 编写页面特定命令 指南页面。



名称 类型 描述
命令 数组 包含表示添加到页面对象实例的方法的函数的对象列表。

页面对象命令注意事项

模块根命令中的页面对象命令在子部分中不可用，部分命令在父部分或根页面对象中不可用。

  • 上下文：页面对象命令上下文（this 的值）是页面对象（对于部分，它是部分实例）；
  • 执行：页面对象命令不是从命令队列中调用的。页面对象命令中的代码在函数被调用时立即执行；
  • 链式调用：页面对象命令必须返回值以进行链式调用。这可以是任何东西，但建议你坚持使用 this，以允许你的命令在页面对象实例的上下文中进行链式调用。