頁面物件 API

概觀

頁面物件為測試案例的建立提供額外的抽象層。頁面物件定義在模組中，並解析為建立頁面物件實例的工廠函式。

如需 Nightwatch 中頁面物件模型的介紹，請參閱入門指南。

頁面物件模組

名稱 類型 描述
commands 陣列 包含函式的物件清單，表示新增至頁面物件實例的方法。
elements Object | Array 命名元素定義的物件或物件陣列，用作從頁面物件呼叫的元素指令中的元素選取器。
props Object | Function 物件或傳回物件的函式，表示使用者變數的容器。Props 物件會直接複製到頁面物件實例的 props 屬性中。
sections 物件 命名區段定義的物件，定義頁面物件內的區段。
url String | Function 當呼叫頁面的 navigate() 方法時，在 url() 指令中使用的 URL 或傳回 URL 的函式。

頁面物件實例

當呼叫標準指令 API 的 page 參考內的各自工廠函式時，會使用頁面物件模組定義來定義頁面物件實例。

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

每次呼叫上述的 MyPage 等工廠函式時，都會建立新的頁面物件實例。

屬性




名稱 類型 描述
api 物件 提供對完整 Nightwatch 指令 API 的存取權的參考，通常在測試案例中稱為 browser。這用於存取不屬於頁面物件 API 中指令子集的指令。
elements 物件 由元素選取器使用的元素物件對應。
name 字串 由其模組名稱定義的頁面物件名稱 (不包含副檔名)。這是用來從指令 API 的 page 參考中存取頁面物件工廠的相同名稱。
props 物件 參考從模組定義指派的 props 物件。

注意： 如果在頁面物件模組中定義為物件實例，則這將是頁面物件所有實例的相同 props 物件。如果您希望每個 props 物件都是唯一的，請在模組中將 props 定義為一個函式，該函式將為每個新的頁面物件實例傳回一個新的 props 物件。
section 物件 為頁面物件定義的區段物件的對應。這將僅包含頁面物件模組根 sections 定義中的區段。巢狀區段可透過其父區段自己的 section 參考存取。
url string|Function 頁面物件模組中的 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

頁面物件指令

如需撰寫頁面物件自訂指令的介紹，請參閱撰寫頁面特定指令指南頁面。



名稱 類型 描述
commands 陣列 包含函式的物件清單，表示新增至頁面物件實例的方法。

頁面物件指令注意事項

模組根指令中的頁面物件指令在子區段中不可用，而區段指令在父區段或根頁面物件中不可用。

  • 內容： 頁面物件指令內容 (this 的值) 是頁面物件 (對於區段，它是區段實例)；
  • 執行： 頁面物件指令不是從指令佇列中呼叫。頁面物件指令中的程式碼會在呼叫函式時立即執行；
  • 鏈結： 頁面物件指令必須傳回一個值才能進行鏈結。這可以是任何值，但建議您堅持使用 this，以便您的指令可以在頁面物件實例的內容中進行鏈結。