ページ要素の定義

要素の宣言

ほとんどの場合、テストでコマンドとアサーションを通じて操作するページ上の要素を定義する必要があります。これは、`elements` プロパティを使用して、すべての要素を単一箇所に定義することで簡素化されます。特に大規模な統合テストでは、`elements` を使用することで、テストコードを DRY に保つのに役立ちます。

CSS と XPath の検索戦略間の切り替えは内部的に処理されるため、テストで `useXpath()` や `useCss()` を呼び出す必要はありません。デフォルトの `locateStrategy` は CSS ですが、XPath を指定することもできます。

nightwatch/pages/examplePage.js 
module.exports = {
  elements: {
    searchBar: {
      selector: 'input[type=text]'
    },
    submit: {
      selector: '//[@name="q"]',
      locateStrategy: 'xpath'
    }
  }
};

デフォルトと同じ検索戦略で要素を作成する場合は、省略形を使用できます。
nightwatch/pages/examplePage.js 
module.exports = {
  elements: {
    searchBar: 'input[type=text]'
  }
};

ページ要素の使用

`elements` プロパティを使用すると、要素コマンドとアサーション ( `click()` など) を呼び出す際に、セレクターではなく、`@` プレフィックスが付いた名前で要素を参照できます。

オプションで、オブジェクトの配列を定義できます。

nightwatch/pages/examplePage.js 
var sharedElements = {
  mailLink: 'a[href*="mail.google.com"]'
};


module.exports = {
  elements: [
    sharedElements,
    { searchBar: 'input[type=text]' }
  ]
};

`elements` と `url` を組み合わせると、`googlePage.js` ファイルとして保存されている次の定義があるとします。

nightwatch/pages/googlePage.js 
module.exports = {
  url: 'https://google.com',
  elements: {
    searchBar: {
      selector: 'input[type=text]'
    },
    submit: {
      selector: '//[@name="q"]',
      locateStrategy: 'xpath'
    }
  }
};

テストでは、次のように使用します。
tests/sampleTest.js 
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    

    google.navigate()
      .assert.title('Google')
      .assert.visible('@searchBar')
      .setValue('@searchBar', 'nightwatch')
      .click('@submit');
    

    browser.end();
  });
});

要素プロパティ

ページオブジェクト要素との対話における柔軟性を高めるために、要素はオブジェクトとして指定できます。オブジェクトには、少なくとも `selector` プロパティを含める必要があります。セレクターに加えて、他のプロパティも指定できます。完全なリストを以下に示します。

  • `selector` - 要素セレクター名 (例: `@searchBar`)
  • `locateStrategy` - 例: 'css selector'
  • `index` - 複数の要素が返されるクエリで特定の要素をターゲットするために使用されます。通常は最初の要素のみが使用されます (index = 0) が、`index` プロパティを使用すると、結果内の任意の要素を指定できます。
  • `abortOnFailure` - `waitForElement*` コマンドを使用する際のこの設定を上書きするために使用されます。
  • `timeout` - `waitForElement*` コマンドまたはアサーションを使用する際のデフォルトのタイムアウトを上書きするために使用されます。
  • `retryInterval` - `waitForElement*` コマンドまたはアサーションを使用する際のデフォルトのリトライ間隔を上書きするために使用されます。
  • `suppressNotFoundErrors` - `.click()` や `.getText()` などの要素コマンドは、要素が見つからない場合、`NoSuchElement` エラーをスローしてテストを失敗させます。このオプションを `true` に設定すると、このエラーは無視されます。

要素のフィルタリング

上記の例では、`searchBar` 要素セレクターは 3 つの要素を返し、2 番目の要素に関心があるとします。

nightwatch/pages/googlePage.js
module.exports = {
  elements: {
    searchBar: {
      selector: 'input[type=text]',
      index: 1
    }
  }
};

コマンド内のオブジェクトセレクターとして要素を指定することで、ページ要素で定義されているものを上書きすることもできます。これは `index` も受け取ることができます。

tests/sampleTest.js 
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    

    google
      .navigate()
      .assert.title('Google');
    

    google.waitForElementVisible('@searchBar') // 2nd input element
    google.waitForElementVisible({selector:'@searchBar', index:1}, function(result){}); // 1st div
    

    google.click('@submit');
    

    browser.end();
 });
});

擬似セレクター

名前付きページオブジェクト要素 ( `@` で始まる) を使用する場合、CSS 擬似セレクター ( `v1.1` から) も使用できます。

tests/sampleTest.js 
module.exports = {
  'Test': function (browser) {
    google.waitForElementVisible('@searchBar:first-child');
    

    google.waitForElementVisible('@searchBar:nth-child(1)');
  }
};

推奨コンテンツ