CIのセットアップ

はじめに

Playwrightのテストは、あらゆるCIプロバイダーで実行できます。このガイドでは、GitHub Actionsを使用してGitHubでテストを実行する1つの方法について説明します。詳細を知りたい場合、または他のCIプロバイダーを構成する方法については、継続的インテグレーションに関する詳細なドキュメントをご確認ください。

学習内容

• GitHub Actionsのセットアップ方法
• テストログの表示方法
• HTMLレポートの表示方法
• トレースの表示方法
• ウェブ上でのレポート公開方法

GitHub Actionsのセットアップ

Playwrightをインストールする際、VS Code拡張機能を使用するか、npm init playwright@latestコマンドを実行すると、GitHub Actionsワークフローを追加するオプションが提供されます。これにより、.github/workflowsフォルダ内にplaywright.ymlファイルが作成され、メイン/マスターブランチへの各プッシュおよびプルリクエストでテストが実行されるために必要なものがすべて含まれています。そのファイルは以下のようになります。

.github/workflows/playwright.yml

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

このワークフローは以下の手順を実行します

1. リポジトリのクローン
2. Node.jsのインストール
3. NPM依存関係のインストール
4. Playwrightブラウザのインストール
5. Playwrightテストの実行
6. HTMLレポートをGitHub UIにアップロード

これについて詳しく学ぶには、「GitHub Actionsを理解する」を参照してください。

リポジトリの作成とGitHubへのプッシュ

GitHub Actionsワークフローのセットアップが完了したら、GitHubでリポジトリを作成するか、既存のリポジトリにコードをプッシュするだけです。GitHubの指示に従い、git initコマンドを使用してgitリポジトリを初期化することを忘れないでください。これにより、コードを追加、コミット、プッシュできるようになります。

ワークフローを開く

Actionsタブをクリックしてワークフローを確認します。ここでテストが合格したか失敗したかを確認できます。

テストログの表示

ワークフローの実行をクリックすると、GitHubが実行したすべてのアクションが表示され、Run Playwright testsをクリックすると、エラーメッセージ、期待されたものと受け取ったもの、およびコールログが表示されます。

HTMLレポート

HTMLレポートには、テストの完全なレポートが表示されます。レポートは、ブラウザ、合格したテスト、失敗したテスト、スキップされたテスト、不安定なテストでフィルタリングできます。

HTMLレポートのダウンロード

Artifactsセクションでplaywright-reportをクリックすると、レポートがzip形式でダウンロードされます。

HTMLレポートの表示

すべてを正しく機能させるにはWebサーバーが必要なため、レポートをローカルで開いても期待どおりに動作しません。まず、zipファイルを展開しますが、できればPlaywrightがすでにインストールされているフォルダ内で行ってください。コマンドラインを使用してレポートのあるディレクトリに移動し、npx playwright show-reportに続けて展開されたフォルダ名を指定します。これによりレポートが提供され、ブラウザで表示できるようになります。

npx playwright show-report name-of-my-extracted-playwright-report

レポートの詳細については、HTMLレポートに関する詳細ガイドをご覧ください。

トレースの表示

npx playwright show-reportを使用してレポートを提供したら、上記の画像に示されているように、テストのファイル名の横にあるトレースアイコンをクリックします。その後、テストのトレースを表示し、各アクションを検査して、テストが失敗している理由を特定できます。

ウェブでのレポート公開

HTMLレポートをzipファイルとしてダウンロードするのはあまり便利ではありません。しかし、Azure Storageの静的ウェブサイトホスティング機能を利用することで、最小限の構成でHTMLレポートをインターネット上で簡単かつ効率的に提供できます。

1. Azureストレージアカウントを作成します。

2. ストレージアカウントの静的ウェブサイトホスティングを有効にします。

3. Azureでサービスプリンシパルを作成し、Azure Blobストレージへのアクセスを許可します。正常に実行されると、コマンドは次のステップで使用する資格情報を表示します。

   az ad sp create-for-rbac --name "github-actions" --role "Storage Blob Data Contributor" --scopes /subscriptions/<SUBSCRIPTION_ID>/resourceGroups/<RESOURCE_GROUP_NAME>/providers/Microsoft.Storage/storageAccounts/<STORAGE_ACCOUNT_NAME>

4. 前のステップで取得した資格情報を使用して、GitHubリポジトリに暗号化されたシークレットを設定します。リポジトリの設定のGitHub Actionsシークレットに移動し、以下のシークレットを追加します。

   • AZCOPY_SPA_APPLICATION_ID
   • AZCOPY_SPA_CLIENT_SECRET
   • AZCOPY_TENANT_ID

   クライアントシークレットを使用してサービスプリンシパルを認証する方法の詳細なガイドについては、このMicrosoftドキュメントを参照してください。

5. HTMLレポートをAzure Storageにアップロードするステップを追加します。

   .github/workflows/playwright.yml

   ...
       - name: Upload HTML report to Azure
         shell: bash
         run: |
           REPORT_DIR='run-${{ github.run_id }}-${{ github.run_attempt }}'
           azcopy cp --recursive "./playwright-report/*" "https://<STORAGE_ACCOUNT_NAME>.blob.core.windows.net/\$web/$REPORT_DIR"
           echo "::notice title=HTML report url::https://<STORAGE_ACCOUNT_NAME>.z1.web.core.windows.net/$REPORT_DIR/index.html"
         env:
           AZCOPY_AUTO_LOGIN_TYPE: SPN
           AZCOPY_SPA_APPLICATION_ID: '${{ secrets.AZCOPY_SPA_APPLICATION_ID }}'
           AZCOPY_SPA_CLIENT_SECRET: '${{ secrets.AZCOPY_SPA_CLIENT_SECRET }}'
           AZCOPY_TENANT_ID: '${{ secrets.AZCOPY_TENANT_ID }}'

$webストレージコンテナの内容は、ウェブサイトの公開URLを使用してブラウザからアクセスできます。

注

このステップは、フォークされたリポジトリから作成されたプルリクエストでは機能しません。これは、そのようなワークフローがシークレットにアクセスできないためです。

次は何を学ぶか

• ロケーターの使用方法を学ぶ
• アクションの実行方法を学ぶ
• アサーションの記述方法を学ぶ
• トレースビューアの詳細を学ぶ
• GitHub Actionsでテストを実行するその他の方法を学ぶ
• 他のCIプロバイダーでテストを実行する詳細を学ぶ