DOM要素の検索とインタラクション

概要

ページ上の要素を見つけることは、エンドツーエンドテストにおいて最も一般的かつ重要な機能の1つです。 Nightwatchは、要素を見つけるためのいくつかの手法と、それらに対して検証を実行するための拡張可能なアサーションフレームワークを提供します。

要素は、CSSセレクターまたはXPathセレクターを使用して、ドキュメントルートから検索されます。他のロケーター戦略も使用できます。詳細については、Webdriverドキュメントをご覧ください。

要素は、一意のWeb要素参照IDを使用して内部的に識別されます。要素と対話する場合、NightwatchはこのIDを識別する手順を内部的に管理し、要素と対話したりアサーションを実行したりする前に、要素を見つけるための自動再試行メカニズムを使用します。

要素の再試行
要素と対話する場合、Nightwatchは要素を見つけようとする際に、設定可能な期間DOMをポーリングします。要素が見つからない場合、NoSuchElementErrorエラーがスローされます。

例

次の例では、setValueコマンドは内部的に要素ルックアップを実行し、次にsetValueコマンドで設定された要素を呼び出します。

tests/sampleTest.js 
module.exports = {
  'Demo test ecosia.org': function (browser) {
    browser
      .url('https://www.ecosia.org/')
      .setValue('input[type=search]', 'nightwatch')
      .click('button[type=submit]')
      .assert.containsText('.mainline-results', 'Nightwatch.js')
      .end();
  }
};

import {NightwatchTests} from 'nightwatch';


const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  browser
    .url('https://www.ecosia.org/')
    .setValue('input[type=search]', 'nightwatch')
    .click('button[type=submit]')
    .assert.containsText('.mainline-results', 'Nightwatch.js')
    .end();
},


export default ecosiaTest;

相対ロケーター

これらのロケーターは、必要な要素のロケーターを作成するのが難しいが、ロケーターが簡単に作成できる別の要素との相対的な位置を空間的に記述するのが簡単な場合に役立ちます。

usernameフィールドの下にあるpasswordフィールドを見つけたい場合は、次の例を使用します

module.exports = {
  'Demo test ecosia.org': function (browser) {
    const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));
    

    browser
      .navigateTo('https://archive.org/account/login')
      .setValue(passwordElement, 'password')
      .assert.valueEquals('input[type=password]', 'password');
  }
};

import {NightwatchTests} from 'nightwatch';


const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));
  

  browser
    .navigateTo('https://archive.org/account/login')
    .setValue(passwordElement, 'password')
    .assert.valueEquals('input[type=password]', 'password');
},


export default ecosiaTest;

この例の他に、以下のコマンドも使用できます

  • above（上）
  • below（下）
  • toRightOf（右）
  • toLeftOf（左）
  • near（近く）
相対ロケーターの連結

開始要素の上と右に要素が存在する可能性があるなど、複雑なレイアウトの場合、次のコードスニペットに示すように、相対ロケーターを連結できます

locateWith(By.tagName('button'))
  .below(By.id('email')
  .toRightOf(By.css('#cancel')));

要素のプロパティ

要素の検索と対話により柔軟性が必要な場合は、要素をオブジェクトとして指定することもできます。オブジェクト定義には、少なくともselectorプロパティが含まれている必要があります。 selectorプロパティに加えて、次のプロパティのいずれかを使用できます

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

前の例では、input[type=search]要素セレクターは3つの要素を返します。2番目の要素を使用する場合は、次のコードスニペットを参照してください


module.exports = {
  'Demo test ecosia.org': function (browser) {
    browser.setValue({selector: 'input[type=search]', index: 1}, 'nightwatch')
  }
};
import {NightwatchTests} from 'nightwatch';

const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  browser.setValue({selector: 'input[type=search]', index: 1}, 'nightwatch');
},

おすすめのコンテンツ