メインコンテンツにスキップ

継続的インテグレーション

イントロダクション​

Playwright テストは CI 環境で実行できます。一般的な CI プロバイダー向けにサンプル構成を作成しました。

CI でテストを実行するための 3 つのステップ

  1. CI エージェントがブラウザを実行できることを確認する: Linux エージェントで当社の Docker イメージを使用するか、CLIを使用して依存関係をインストールします。

  2. Playwright をインストールする:

    # Install NPM packages
    npm ci

    # Install Playwright browsers and dependencies
    npx playwright install --with-deps

  3. テストを実行する:

    npx playwright test

ワーカー​

安定性と再現性を優先するために、CI 環境ではワーカーを "1" に設定することをお勧めします。テストを順番に実行することで、各テストがシステムリソースを最大限に活用できるようになり、潜在的な競合を回避できます。ただし、強力なセルフホスト CI システムをお持ちの場合は、並列テストを有効にすることができます。より広範な並列化には、シャーディング - 複数の CI ジョブにテストを分散させることを検討してください。

playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // Opt out of parallel tests on CI.
  workers: process.env.CI ? 1 : undefined,
});

CI 構成​

コマンドラインツールを使用して、CI のすべてのオペレーティングシステムの依存関係をインストールできます。

GitHub Actions​

push/pull_request 時​

テストは、main/master ブランチへの push または pull request で実行されます。ワークフローは、すべての依存関係をインストールし、Playwright をインストールしてから、テストを実行します。また、HTML レポートも作成します。

.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

push/pull_request 時 (シャーディング)​

GitHub Actions は、複数のジョブ間でのシャーディングテストをサポートしています。シャーディングの詳細と、複数のマシンでテストを実行するようにジョブを構成する方法、および HTML レポートをマージする方法については、シャーディングドキュメントとGitHub actions の例を確認してください。

コンテナ経由​

GitHub Actions は、コンテナでジョブを実行することを、jobs.<job_id>.containerオプションを使用してサポートしています。これは、ホスト環境を依存関係で汚染しないようにし、異なるオペレーティングシステム間で、例えばスクリーンショット/ビジュアルリグレッションテストの一貫した環境を持つために役立ちます。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  playwright:
    name: 'Playwright Tests'
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.51.0-noble
      options: --user 1001
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
      - name: Run your tests
        run: npx playwright test

デプロイ時​

これは、GitHub デプロイメントが success 状態になった後にテストを開始します。Vercel などのサービスはこのパターンを使用しているため、デプロイされた環境でエンドツーエンドテストを実行できます。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  deployment_status:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      env:
        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

Fail-Fast​

大規模なテストスイートは、実行に非常に時間がかかる場合があります。--only-changed フラグを使用して予備テスト実行を実行することで、最初に失敗する可能性の高いテストファイルを実行できます。これにより、フィードバックループが速くなり、プルリクエストの作業中の CI 消費量がわずかに低下します。変更セットの影響を受けるテストファイルを検出するために、--only-changed はスイートの依存関係グラフを分析します。これはヒューリスティックであり、テストを見逃す可能性があるため、予備テスト実行後に常に完全なテストスイートを実行することが重要です。

.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
      with:
        # Force a non-shallow checkout, so that we can reference $GITHUB_BASE_REF.
        # See https://github.com/actions/checkout for more details.
        fetch-depth: 0
    - 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 changed Playwright tests
      run: npx playwright test --only-changed=$GITHUB_BASE_REF
      if: github.event_name == 'pull_request'
    - 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

Docker​

当社には、直接使用することも、既存の Docker 定義を更新するためのリファレンスとして使用することもできる事前構築済み Docker イメージがあります。

推奨構成

  1. Chromium を使用する場合は、--ipc=host を使用することもお勧めします。これがないと、Chromium がメモリ不足になり、クラッシュする可能性があります。このオプションの詳細については、Docker ドキュメントを参照してください。
  2. Chromium の起動時に他の奇妙なエラーが発生する場合は、ローカルで開発するときに docker run --cap-add=SYS_ADMIN を使用してコンテナを実行してみてください。
  3. PID=1 のプロセスに対する特別な処理を避けるために、--init Docker フラグまたはdumb-initを使用することをお勧めします。これは、ゾンビプロセスの一般的な原因です。

Azure Pipelines​

Windows または macOS エージェントの場合、追加の構成は必要ありません。Playwright をインストールしてテストを実行するだけです。

Linux エージェントの場合、Azure Pipelines サポートコンテナ化されたジョブの実行を備えた当社の Docker コンテナを使用できます。または、コマンドラインツールを使用して、必要なすべての依存関係をインストールすることもできます。

Playwright テストを実行するには、このパイプラインタスクを使用してください

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'
- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

Azure Pipelines で playwright-report フォルダーをアップロードする​

これにより、Playwright テストのいずれかが失敗した場合、パイプラインの実行が失敗します。テスト結果を Azure DevOps と統合する場合は、次のように PublishTestResults タスクを使用します。

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'
- task: PublishTestResults@2
  displayName: 'Publish test results'
  inputs:
    searchFolder: 'test-results'
    testResultsFormat: 'JUnit'
    testResultsFiles: 'e2e-junit-results.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    testRunTitle: 'My End-To-End Tests'
  condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

注: JUnit レポーターは、次を使用して適切に構成する必要があります。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['junit', { outputFile: 'test-results/e2e-junit-results.xml' }]],
});

playwright.config.ts 内。

Azure Pipelines (シャーディング)​

trigger:
- main

pool:
  vmImage: ubuntu-latest

strategy:
  matrix:
    chromium-1:
      project: chromium
      shard: 1/3
    chromium-2:
      project: chromium
      shard: 2/3
    chromium-3:
      project: chromium
      shard: 3/3
    firefox-1:
      project: firefox
      shard: 1/3
    firefox-2:
      project: firefox
      shard: 2/3
    firefox-3:
      project: firefox
      shard: 3/3
    webkit-1:
      project: webkit
      shard: 1/3
    webkit-2:
      project: webkit
      shard: 2/3
    webkit-3:
      project: webkit
      shard: 3/3
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test --project=$(project) --shard=$(shard)
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

Azure Pipelines (コンテナ化)​

trigger:
- main

pool:
  vmImage: ubuntu-latest
container: mcr.microsoft.com/playwright:v1.51.0-noble

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

CircleCI​

CircleCI での Playwright の実行は、GitHub Actions での実行と非常によく似ています。事前構築済みの Playwright Docker イメージを指定するには、次のように構成で docker: を使用してエージェント定義を修正するだけです。

executors:
  pw-noble-development:
    docker:
      - image: mcr.microsoft.com/playwright:v1.51.0-noble

注: docker エージェント定義を使用する場合、Playwright が実行されるリソースクラスを「medium」ティアこちらに指定しています。Playwright のデフォルトの動作は、ワーカーの数を検出されたコア数 (medium ティアの場合は 2) に設定することです。ワーカーの数をこれよりも大きくオーバーライドすると、不要なタイムアウトとエラーが発生します。

CircleCI でのシャーディング​

CircleCI でのシャーディングは 0 からインデックスが付けられているため、デフォルトの並列処理 ENV VARS をオーバーライドする必要があります。次の例は、CIRCLE_NODE_INDEX に 1 を追加して --shard cli 引数に渡すことで、CircleCI 並列処理 4 で Playwright を実行する方法を示しています。

  playwright-job-name:
    executor: pw-noble-development
    parallelism: 4
    steps:
      - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npx playwright test --shard=${SHARD}/${CIRCLE_NODE_TOTAL}

Jenkins​

Jenkins は、パイプライン用の Docker エージェントをサポートしています。Playwright Docker イメージを使用して、Jenkins でテストを実行します。

pipeline {
   agent { docker { image 'mcr.microsoft.com/playwright:v1.51.0-noble' } }
   stages {
      stage('e2e-tests') {
         steps {
            sh 'npm ci'
            sh 'npx playwright test'
         }
      }
   }
}

Bitbucket Pipelines​

Bitbucket Pipelines は、パブリックDocker イメージをビルド環境として使用できます。Bitbucket で Playwright テストを実行するには、当社のパブリック Docker イメージ (Dockerfile を参照) を使用してください。

image: mcr.microsoft.com/playwright:v1.51.0-noble

GitLab CI​

GitLab で Playwright テストを実行するには、当社のパブリック Docker イメージ (Dockerfile を参照) を使用してください。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.51.0-noble
  script:
  ...

シャーディング​

GitLab CI は、複数のジョブ間でのシャーディングテストを parallel キーワードを使用してサポートしています。テストジョブは、並列で実行される複数の小さなジョブに分割されます。並列ジョブには、job_name 1/N から job_name N/N まで順番に名前が付けられます。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.51.0-noble
  parallel: 7
  script:
    - npm ci
    - npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL

GitLab CI は、parallel:matrix オプションを使用して、複数のジョブ間でのシャーディングテストもサポートしています。テストジョブは、単一のパイプライン内で並列に複数回実行されますが、ジョブのインスタンスごとに異なる変数値を持ちます。以下の例では、2 つの PROJECT 値と 10 個の SHARD 値があり、合計 20 個のジョブが実行されます。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.51.0-noble
  parallel:
    matrix:
      - PROJECT: ['chromium', 'webkit']
        SHARD: ['1/10', '2/10', '3/10', '4/10', '5/10', '6/10', '7/10', '8/10', '9/10', '10/10']
  script:
    - npm ci
    - npx playwright test --project=$PROJECT --shard=$SHARD

Google Cloud Build​

Google Cloud Build で Playwright テストを実行するには、当社のパブリック Docker イメージ (Dockerfile を参照) を使用してください。

steps:
- name: mcr.microsoft.com/playwright:v1.51.0-noble
  script: 
  ...
  env:
  - 'CI=true'

Drone​

Drone で Playwright テストを実行するには、当社のパブリック Docker イメージ (Dockerfile を参照) を使用してください。

kind: pipeline
name: default
type: docker

steps:
  - name: test
    image: mcr.microsoft.com/playwright:v1.51.0-noble
    commands:
      - npx playwright test

ブラウザのキャッシュ​

ブラウザバイナリのキャッシュは推奨されていません。キャッシュの復元にかかる時間は、バイナリのダウンロードにかかる時間と同程度であるためです。特に Linux では、オペレーティングシステムの依存関係をインストールする必要があります。これらはキャッシュできません。

それでも CI 実行間でブラウザバイナリをキャッシュしたい場合は、Playwright バージョンのハッシュに対して、CI 構成でこれらのディレクトリをキャッシュしてください。

ブラウザ起動のデバッグ​

Playwright は、実行中にデバッグログを出力するために DEBUG 環境変数をサポートしています。pw:browser に設定すると、Error: Failed to launch browser エラーのデバッグに役立ちます。

DEBUG=pw:browser npx playwright test

ヘッドありでの実行​

デフォルトでは、Playwright はブラウザをヘッドレスモードで起動します。ヘッドありモードでテストを実行する方法については、テストの実行ガイドを参照してください。

Linux エージェントでは、ヘッドあり実行には Xvfb をインストールする必要があります。当社のDocker イメージと GitHub Action には Xvfb がプリインストールされています。Xvfb を使用してヘッドありモードでブラウザを実行するには、実際のコマンドの前に xvfb-run を追加します。

xvfb-run npx playwright test