WebサイトまたはWebアプリのテストを作成する

概要

Nightwatchは、Web要素を操作したり、さまざまなアクションやアサーションを実行するためのシンプルで包括的なAPIを提供します。Nightwatch v3では、テストをよりシンプルかつ簡潔にするためのまったく新しい要素APIが導入されています。

Nightwatchインスペクターは、長期的に耐久性のあるセレクターの推奨事項を提供するため、テストの作成が容易になります。

コーディング経験がほとんどない、またはまったくない場合は、Chromeレコーダー拡張機能を使用してテストを記録し、Nightwatchを使用して実行することもできます。

要素の検索

要素を操作したりアサーションを実行したりする前に、セレクターを使用してDOMツリーから要素を見つける必要があります。Nightwatchは、要素の検索を容易にするためのさまざまなセレクターをサポートしています。これには、.find()および.findAll()関連のコマンドを使用します。

  1. CSSセレクター :
    browser.element.find('css selector');
browser.element.findAll('css selector');
  2. XPathセレクター :
    browser.element.find(by.xpath(('xpath string'));
browser.element.findAll(by.xpath(('xpath string'));
  3. ロール別 :
    browser.element.findByRole('role');
browser.element.findAllByRole('role');
  4. テキスト別 :
    browser.element.findByText('text');
browser.element.findAllByText('text');
  5. プレースホルダーテキスト別 :
    browser.element.findByPlaceholderText('placeholder text');
browser.element.findAllByPlaceholderText('placeholder text');
  6. ラベルテキスト別 :
    browser.element.findByLabelText('label text');
browser.element.findAllByLabelText('label text');
  7. 代替テキスト別 :
    browser.element.findByAltText('alt text');
browser.element.findAllByAltText('alt text');

検索コマンドに加えて、Nightwatchは、より複雑なシナリオでメソッドを検索するのに役立つ便利なメソッドも提供しています。

  1. 要素の配列からn番目の要素を検索 .nth(index)
  2. 要素配列の数を検索 .count()

ネストされた要素の検索

この強力なセレクターセットに加えて、Nightwatchはセレクターチェーンもサポートしています。

browser.element.find('CSS selector').findByText('text').click();
// or
browser.element.findAll('CSS selector').nth(2).findByText('text').click();

セレクターの詳細なガイドと例については、このガイドを参照してください。

コマンド

要素を見つけたら、コマンドを使用して操作できます。

インタラクションコマンド

  1. クリック :
    browser.element.find('selector').click();
  2. ダブルクリック : 
    browser.element.find('selector').doubleClick();
  3. 右クリック : 
    browser.element.find('selector').rightClick();
  4. 入力欄への入力 : 
    browser.element.find('selector').sendKeys('text');
  5. 値の設定 : 
    browser.element.find('selector').setValue();
  6. クリア : 
    browser.element.find('selector').clear();
.find()の代わりに、.findByText()、.findByRole()などの他のfind関連メソッドを使用し、その後にコマンドを続けることもできます。

要素の詳細を取得

  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. rectを取得 :
    browser.element.find('selector').getRect();

要素の詳細を更新

  1. テキストを設定 :
    browser.element.find('selector').setText('text');
  2. 属性を設定 :
    browser.element.find('selector').setAttributes('attribute', 'attribute value');

ブラウザコンテキストの設定

  1. 位置情報の設定 : 
    browser.setGeolocation({latitude: , longitude: , accuracy: 100});

詳細な例については、このガイドを参照してください。

Nightwatchでカスタムコマンドを作成することもできます。今すぐ試す

アサーション

自動テストを作成する主な目的は、アサーションを設定して合格させることです。Nightwatchには、アサーションを実行する方法が2つあります。

組み込みのアサーションを使用できます

  1. テキストが一致する :
    browser.element.find('selector').getText().assert.equals('text');
  2. テキストを含む :
    browser.element.find('selector').getText().assert.contains('text');
  3. テキストが一致する :
    browser.element.find('selector').getText().assert.matches('regex');
  4. 値が一致する :
    browser.element.find('selector').getValue().assert.equals('text');
  5. 値を含む :
    browser.element.find('selector').getValue().assert.contains('text');
  6. 値が一致する :
    browser.element.find('selector').getValue().assert.matches('regex');
  7. URLが一致する :
    browser.assert.urlEquals('text');
  8. URLを含む :
    browser.assert.urlContains('text');
  9. URLが一致する :
    browser.assert.urlMatches('regex');
  10. 表示されている :
    browser.element.find('selector').assert.visible();
これらのアサーションで十分でない場合は、独自のカスタムアサーションを作成できます。方法を学ぶ

Chai expect

Chaiスタイルのアサーションを好む場合は、expect()を使用してアサーションを実行することもできます

  1. テキストが一致する :
    expect(element).text.to.equal();
  2. テキストを含む :
    expect(element).text.to.contain();
  3. テキストが一致する :
    expect(element).text.to.match();
  4. 値が一致する :
    expect(element).value.to.equal();
  5. 値を含む :
    expect(element).value.to.contain();
  6. 値が一致する :
    expect(element).value.to.match();
  7. URLが一致する :
    expect(brower.url()).to.equal();
  8. URLを含む :
    expect(brower.url()).to.contain();
  9. URLが一致する :
    expect(brower.url()).to.match();
  10. 表示されている :
    expect(element).to.be.visible();

アサーションに関する詳細な例については、この記事を参照してください

Nightwatchインスペクターの使用

Nightwatchインスペクターは、テストの作成時に時間を節約し、より耐久性のあるテストを作成するのに役立つように設計されたポイントアンドクリックツールです。また、開発ツールからNightwatchコマンドを試すこともできます。詳細はこちら。

Chrome開発ツールを使用して記録

または、Nightwatchは画面上のテストアクションを記録し、コードを記述することなくNightwatchテストスクリプトを自動的に生成することで、開始を支援するツールを提供します。詳細については、Google Chrome DevTools Recorderを使用してNightwatchテストを作成することを調べてください。

モバイルアプリのテストを作成するための基本を理解したので、セレクター、コマンド、アサーションについてより詳しく理解する時がきました。

セレクター
コマンド
アサーション