概要

Nightwatch v2.2 は、テスト結果をユーザーフレンドリーな HTML ビューでより適切に集約する独自の統合 HTML レポーターを提供します。テスト結果、各テストモジュールにかかった時間、各テストケースで行われたアサーション、デバッグに役立つ生の HTTP ログが表示されます。

設定

HTML レポーターは、JUnit XML レポーターと JSON レポーターと共に**デフォルトで有効**になっていますが、その動作は次のように構成できます。

設定ファイルによる方法

output_folder 設定は、HTML レポートファイルを保存する場所を指定するために使用されます。Nightwatch は、nightwatch-html-report というサブフォルダ内に HTML レポートを書き込みます。

nightwatch/.../lib/settings/defaults.js
module.exports = {
  output_folder: 'tests_output'
}

テスト出力関連の設定の完全なリストについては、「設定 > 出力設定」ページを参照してください。

CLI による方法

--output フラグを使用して、CLI で実行時に出力フォルダを構成することもできます。

nightwatch --output ./tests-output

Nightwatch が受け入れる CLI フラグの完全なリストについては、「CLI リファレンスページ」を参照してください。

使用方法

ステップ 0: 新しいプロジェクトの作成

まず、新しい空のプロジェクトを作成し、その中に Nightwatch をインストールします。

mkdir ./test-project && cd ./test-project

ステップ 1: Nightwatch と chromedriver のインストール

NPM から nightwatchchromedriver をインストールします (chromedriver は Google Chrome ブラウザでテストを実行するための W3C WebDriver 実装です。マシンに最新の Chrome ブラウザがインストールされていることを確認してください)

npm i nightwatch chromedriver

ステップ 2: 例のテストを実行して HTML レポートを表示する

duckDuckGo.js の例を参照してください。

duckDuckGo.js
describe('duckduckgo example', function() {
  it('Search Nightwatch.js and check results', function(browser) {
    browser
      .navigateTo('https://duckduckgo.com')
      .waitForElementVisible('#search_form_input_homepage')
      .sendKeys('#search_form_input_homepage', ['Nightwatch.js'])
      .click('#search_button_homepage')
      .assert.visible('.results--main')
      .assert.textContains('.results--main', 'Nightwatch.js');
  }); 
});

デフォルトでは、すべての組み込みレポート (HTML、JUnit-XML、JSON) が生成されるため、他に何もする必要はありません。通常どおりテストを実行します。

npx nightwatch examples/tests/duckDuckGo.js --env chrome

組み込みの HTML レポートのみを生成するには、次のコマンドを実行します。

npx nightwatch examples/tests/duckDuckGo.js --env chrome --reporter=html

組み込みの JUnit-XML レポートと HTML レポートの両方を生成するには、次のコマンドを実行します (v2.2 以降)

npx nightwatch examples/tests/duckDuckGo.js --env chrome --reporter=junit --reporter=html

ステップ 3: HTML レポートの表示

HTML レポートは、現在のプロジェクトディレクトリ内のローカル tests_output フォルダに生成されているはずです。次のような表示になります。

Screenshot 2022-06-13 at 5 50 28 PM

HTTP 生ログの表示

生の HTTP ログには、Nightwatch と Selenium/WebDriver の間の詳細な HTTP リクエスト/レスポンストラフィックが含まれており、各テストセッションのレポートにデフォルトで含まれています。

Screenshot 2022-06-07 at 4 07 50 PM

レポートの自動開く

--open コマンドライン引数を使用して、生成された HTML レポートをデフォルトのブラウザで開きます。

npx nightwatch examples/tests/duckDuckGo.js --env chrome --reporter=html --open