ページオブジェクト手法は、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が動的である場合は、関数にすることもできます。このユースケースの1つは、異なるテスト環境をサポートすることです。ページのコンテキストで呼び出される関数を作成できるため、次のことが可能になります。

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

ページ要素

ほとんどの場合、テストがコマンドとアサーションを通じて対話するページ上の要素を定義する必要があります。これは、すべての要素が1か所で定義されるように、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に設定されている場合、このエラーは無視されます。

ページセクション

ページセクションを定義すると便利な場合があります。セクションは2つのことを行います

  • ページの下に名前空間のレベルを提供します
  • セクション内で定義された要素がDOM内の親セクションの子孫になるように、要素レベルのネストを提供します

sectionsプロパティを使用してセクションを作成できます。

ページ固有のコマンド

commandsプロパティを使用して、カスタムコマンドをページオブジェクトに追加できます。これは、テスト、または複数のテストに存在していたページのロジックをカプセル化する便利な方法です。

Nightwatchは、ページまたはセクションのコンテキストでコマンドを呼び出します。pauseなどのクライアントコマンドは、this.apiから利用できます。チェーンの場合、各関数はページオブジェクトまたはセクションを返す必要があります。

Nightwatch 2以降、ページコマンドをES6クラスとしてエクスポートすることも可能です。