ウェブサイトまたはウェブアプリのコマンド

概要

コマンドを使用すると、ウェブ要素と対話できます。コマンドを使用する前に、最初に要素を見つける必要があります。セレクターを使用して要素を見つける方法については、このガイドを参照してください。コマンドは4つのカテゴリに分類できます。

  1. 要素の操作
  2. 要素の詳細の取得
  3. 要素の詳細の更新
  4. ブラウザコンテキストの設定

クリック

要素をクリックするには、browser.element.find('selector').click() を使用します。

// Click on the sign in button
browser.element.findByText('Sign In').click();

// Click on the sign in button
browser.element.findByText('Sign In').click();

ダブルクリック

要素をダブルクリックするには、browser.element.find('selector').doubleClick() を使用します。

// Double click on the sign in button
browser.element.findByText('Sign In').doubleClick();

// Double click on the sign in button
browser.element.findByText('Sign In').doubleClick();

右クリック

browser.element.find('selector').rightClick() を使用して、要素を右クリックできます。

// Right click on the options button
browser.element.findByText('options').rightClick();

// Right click on the options button
browser.element.findByText('options').rightClick();

キーの送信

browser.element.find('selector').sendKeys('text') を使用して、入力フィールドに値を入力できます。テキストを渡す代わりに、テキストの配列を渡すこともできます。Enter や Space などのキー定数を使用するには、browser.keys.CONSTANT_NAME を使用します。すべてのキー押下定数はこちらにあります。

// Type in 'Nightwatch' into input field search
browser.element.findByPlaceholderText('search').sendKeys('Nightwatch');


//or


// Type in 'John Doe' into the username field and press enter
browser.element.findByLabelText('username').sendKeys(['Nightwatch', browser.Keys.ENTER]);

// Type in 'Nightwatch' into input field search
browser.element.findByPlaceholderText('search').sendKeys('Nightwatch');


or

// Type in 'John Doe' into the username field and press enter
browser.element.findByLabelText('username').sendKeys(['Nightwatch', browser.Keys.ENTER]);

値の設定

browser.element.find('selector').setValue('value') を使用して、要素の value 属性を設定できます。

// Set the value of input field search as 'Nightwatch'
browser.element.findByPlaceholderText('search').setValue('Nightwatch');

// Set the value of input field search as 'Nightwatch'
browser.element.findByPlaceholderText('search').setValue('Nightwatch');

クリア

browser.element.find('selector').clear() を使用して、要素の値をクリアできます。

// Clear the value of input field search
browser.element.find('#search').clear();

// Clear the value of input field search
browser.element.find('#search').clear();

要素の詳細の取得

次のメソッドを使用して、要素の詳細を取得できます。

  1. テキストの取得 - browser.element.find('selector').getText()
  2. 値の取得 - browser.element.find('selector').getValue()
  3. タグ名の取得 - browser.element.find('selector').getTagName()
  4. 属性の取得 - browser.element.find('selector').getAttribute()
  5. CSS プロパティの取得 - browser.element.find('selector').getCssProperty()
  6. ID の取得 - browser.element.find('selector').getId()
  7. アクセシビリティ名の取得 - browser.element.find('selector').getAccessibilityName()
  8. 矩形の取得 - browser.element.find('selector').getRect()
// Get the text of the header
browser.element.find('#header').getText();


// Get the value of the input field
browser.element.find('#input').getValue();


// Get the tag name of an element
browser.element.findByRole('link').getTagName();


// Get the style attribute of an element
browser.element.find('#element').getAttribute('style');


// Get the background-color of an element
browser.element.find('#element').getCssProperty('background-color');


// Get the id of an element
browser.element.find('#element').getId();


// Get the accessibility name of an element
browser.element.find('#element').getAccessibilityName();


// Get the rectangle bounding box of an element
browser.element.find('#element').getRect();

// Get the text of the header
browser.element.find('#header').getText();


// Get the value of the input field
browser.element.find('#input').getValue();


// Get the tag name of an element
browser.element.findByRole('link').getTagName();


// Get the style attribute of an element
browser.element.find('#element').getAttribute('style');


// Get the background-color of an element
browser.element.find('#element').getCssProperty('background-color');


// Get the id of an element
browser.element.find('#element').getId();


// Get the accessibility name of an element
browser.element.find('#element').getAccessibilityName();


// Get the rectangle bounding box of an element
browser.element.find('#element').getRect();

要素の詳細の設定

前のセクションでは、要素の属性の取得方法を学習しました。次のメソッドを使用して、要素の値を設定することもできます。

  1. テキストの設定 - browser.element.find('selector').setText('text')
  2. 属性の設定 - browser.element.find('selector').setAttributes('attribute', 'attribute value')
// Set the text of header as 'Nightwatch'
browser.element.find('#headeer').setText('Nightwatch');


// Set the style of button as "display:none;"
browser.element.find('#button').setAttribute('style','display:none;');

// Set the text of header as 'Nightwatch'
browser.element.find('#headeer').setText('Nightwatch');


// Set the style of button as "display:none;"
browser.element.find('#button').setAttribute('style','display:none;');

位置情報

ブラウザレベルのメソッド .setGeolocation() を使用して、特定の緯度と経度からのトラフィックをシミュレートできます。

// Set the latitude & longitude of the prime meridian
browser.setGeolocation({latitude: 51.4780, longitude: 0.0014, accuracy: 100})

// Set the latitude & longitude of the prime meridian
browser.setGeolocation({latitude: 51.4780, longitude: 0.0014, accuracy: 100})

カスタムコマンド

既存の Nightwatch コマンドがニーズを満たしていない場合、または複雑なロジックを単一のコマンドに減らしたい場合は、独自の カスタムコマンドを作成することもできます。このガイドを参照してください。

セレクターとコマンドを理解したので、Nightwatch でのアサーションの動作について理解することができます。

アサーション