Nightwatch v2.2には、テスト結果とその他の詳細をより適切に集約する統合されたHTMLレポーターが付属しています。このブログでは、テスト実行後に生成されたHTMLレポートをGitHub Pagesに自動的に公開するNightwatchプロジェクトを設定します。

Nightwatch HTMLレポートのプレビューはこちら

プロジェクトの作成

1. Nightwatchの設定

いくつかのサンプルテストを設定するためのテンプレートとして、nightwatch-examplesリポジトリを使用しています。

Nightwatchの`init`コマンドを使用することもできます。これにより、すべての設定と依存関係が管理され、プロジェクトにいくつかのサンプルテストが追加されます。

💡
Nightwatchオンボーディングクライアントの詳細についてはこちらをご覧ください。
npm init nightwatch

2. ローカルでのテストの実行

テストがローカルで実行されていることを確認するには、nightwatch-examplesテンプレートにはすでに`package.json`にテストスクリプトがあります。

// package.json

"scripts": {
    "test": "nightwatch --env chrome"
  },

以下のコマンドでテストを実行します。

npm test

GitHubワークフローの定義

GitHub Actionsを使用して、テストの実行とレポートの公開を自動化しましょう。

1. テストワークフローの作成

` .github/workflows`ディレクトリを作成し、`test.yml`を追加します。

//test.yml

name: nightwatch.tests
on:
  push:
    branches: 
    - main
jobs:
  tests: 
    name: 'nightwatch tests'
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@v2
        with:
          node-version: "14.x"
      - name: Install dependencies
        run: npm ci
      - name: Run Nightwatch tests
        continue-on-error: true
        run: xvfb-run --auto-servernum npm test -- --env chrome
      - name: "Publish test results"
        uses: peaceiris/actions-gh-pages@v3.7.3
        with: 
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: './tests_output/nightwatch-html-report'
          keep_files: true
          user_name: <user-name>
          user_email: <user-email>

GitHub Actionsを実行するブランチとしてmainブランチを選択しました。次の手順では、依存関係のダウンロード、テストの実行、HTMLページのホスティングに使用される`gh-pages`ブランチへのレポートの公開を行います。

いくつかの設定の詳細

  • `continue-on-error`は、エラーが発生した場合でもレポートを公開する必要があるため、trueに設定されています。
  • `publish_dir`は、Nightwatch HTMLレポートがデフォルトで生成されるディレクトリを指します。これらはNightwatchの出力設定を使用して変更できます。
  • `user_name`、`user_email`、`github_token`は、コミットを作成し、選択したブランチにコンテンツをプッシュするために使用されます。
💡
GitHub Actionsの詳細はこちら

ヘッドレスモードでのテスト実行は必ずしも100％信頼できるわけではないため、Chromeでテストを実行するための`xvfb`の使用をサポートしています。

💡
Xvfbは、ディスプレイハードウェアや物理的な入力デバイスのないLinuxマシンで実行できるXサーバーです。仮想メモリを使用してフレームバッファをエミュレートします。

2. GitHub Pagesの設定

最後のステップは、**設定→Pages**でプロジェクトのGitHub Pagesを有効にすることです。

これで準備完了です ⭐。

すべてが正しく設定されていることを確認するには、すべての変更をGitHubにプッシュしてActionsをトリガーします。

🚀
デモプロジェクトのテストレポートはこちらで確認できます こちら

3. テストワークフローのトリガー

通常、テストが更新されたときだけでなく、新しいデプロイがある場合やジョブをスケジュールする必要がある場合にも、ジョブを実行したいと考えています。

💡
GitHubワークフローをトリガーするイベントの詳細はこちら

結論

GitHub Actionsを使用すると、テストの実行を自動化し、GitHub Pagesを使用してテストレポートを公開できます。レポートには、後でデバッグに役立つ生のHTTPログを含むすべてのテスト詳細が含まれています。