ページオブジェクトAPI

概要

ページオブジェクトは、テストケース作成のための追加の抽象化レイヤーを提供します。ページオブジェクトはモジュールで定義され、ページオブジェクトインスタンスを作成するファクトリ関数に解析されます。

Nightwatchにおけるページオブジェクトモデルの概要については、はじめにガイドを参照してください。

ページオブジェクトモジュール

名前 タイプ 説明
コマンド 配列 ページオブジェクトインスタンスに追加されたメソッドを表す関数を含むオブジェクトのリスト。
要素 オブジェクト | 配列 ページオブジェクトから呼び出される要素コマンド内で要素セレクタとして使用される、名前付き要素定義のオブジェクト、またはオブジェクトの配列。
プロパティ オブジェクト | 関数 ユーザー変数のコンテナを表すオブジェクト、またはオブジェクトを返す関数。プロパティオブジェクトは、ページオブジェクトインスタンスのプロパティに直接コピーされます。
セクション オブジェクト ページオブジェクト内のセクションを定義する名前付きセクション定義のオブジェクト。
url 文字列 | 関数 ページのnavigate()メソッドが呼び出されたときに、url()コマンドで使用されるURL、またはURLを返す関数。

ページオブジェクトインスタンス

ページオブジェクトモジュール定義は、標準コマンドAPIのpage参照内のそれぞれのファクトリ関数が呼び出されたときに、ページオブジェクトインスタンスを定義するために使用されます。

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

上記のMyPageのようなファクトリ関数が呼び出されるたびに、ページオブジェクトの新しいインスタンスが作成されます。

プロパティ




名前 タイプ 説明
api オブジェクト 完全なNightwatchコマンドAPI（通常、テストケースではbrowserとして知られています）へのアクセスを提供する参照。これは、ページオブジェクトAPI内のコマンドのサブセットの一部ではないコマンドにアクセスするために使用されます。
要素 オブジェクト 要素セレクタによって使用される要素オブジェクトのマップ。
名前 文字列 モジュール名（拡張子を含まない）によって定義されたページオブジェクトの名前。これは、コマンドAPIのpage参照からページオブジェクトファクトリにアクセスするために使用されるのと同じ名前です。
プロパティ オブジェクト モジュール定義から割り当てられたpropsオブジェクトへの参照。

注：これは、ページオブジェクトモジュール内でオブジェクトインスタンスとして定義されている場合、すべてのページオブジェクトインスタンスに対して同じpropsオブジェクトになります。各propsオブジェクトを一意にするには、モジュール内のpropsを、新しいページオブジェクトインスタンスごとに新しいpropsオブジェクトを返す関数として定義します。
セクション オブジェクト ページオブジェクトに対して定義されたセクションオブジェクトのマップ。これには、ページオブジェクトモジュールのルート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を使用することをお勧めします。