CI のセットアップ

はじめに

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

学習内容

• GitHub Actions の設定方法
• テストログの表示方法
• HTML レポートの表示方法
• トレースの表示方法
• Web でレポートを公開する方法

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 にアップロードする

これについて詳しく知るには、「Understanding 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 Reporter に関する詳細ガイドをご覧ください。

トレースの表示

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

Web でレポートを公開する

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

1. Azure Storage アカウントを作成します。

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

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

   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 リポジトリに暗号化されたシークレットを設定します。リポジトリの settings、GitHub Actions secrets の下に移動し、次のシークレットを追加します。

   • 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 ストレージコンテナーの内容は、Web サイトの公開 URL を使用してブラウザからアクセスできます。

注

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

シークレットの適切な処理

トレースファイル、HTML レポート、あるいはコンソールログなどのアーティファクトには、テスト実行に関する情報が含まれています。これらには、テストユーザーのユーザー認証情報、ステージングバックエンドへのアクセストークン、テストソースコード、またはアプリケーションソースコードのような機密データが含まれる場合があります。これらのファイルは、その機密データを扱うのと同じくらい注意深く扱ってください。CI ワークフローの一部としてレポートとトレースをアップロードする場合は、信頼できるアーティファクトストアにのみアップロードするか、アップロード前にファイルを暗号化するようにしてください。チームメンバーとアーティファクトを共有する場合も同様です。信頼できるファイル共有を使用するか、共有前にファイルを暗号化してください。

次は何ですか

• ロケーターの使用方法を学ぶ
• アクションの実行方法を学ぶ
• アサーションの記述方法を学ぶ
• Trace Viewer について詳しく学ぶ
• GitHub Actions でテストを実行するその他の方法を学ぶ
• 他の CI プロバイダーでテストを実行する方法について詳しく学ぶ