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

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

はじめに​

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

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

  1. CIエージェントがブラウザを実行できることを確認する: LinuxエージェントではPlaywrightの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ブランチへのプッシュまたはプルリクエスト時にテストが実行されます。ワークフローは、全ての依存関係をインストールし、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は、複数のジョブ間でのテストのシャーディングをサポートしています。シャーディングドキュメントでシャーディングについて詳しく学び、GitHub Actionsの例で複数のマシンでテストを実行するようにジョブを構成する方法やHTMLレポートを結合する方法を確認してください。

コンテナ経由​

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.52.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 Deploymentが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 }}

フェイルファスト​

大規模なテストスイートは、実行に非常に時間がかかることがあります。--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​

Playwrightは、直接使用することも、既存のDocker定義を更新するための参照として使用することもできる事前に構築されたDockerイメージを提供しています。最高のパフォーマンスを確保するために、推奨されるDocker構成に従ってください。

Azure Pipelines​

WindowsまたはmacOSエージェントの場合、追加の設定は不要で、Playwrightをインストールしてテストを実行するだけです。

Linuxエージェントの場合、Azure Pipelinesのコンテナ化されたジョブの実行をサポートするPlaywrightの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.52.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.52.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エージェントをサポートしています。Jenkinsでテストを実行するには、Playwright Dockerイメージを使用します。

pipeline {
   agent { docker { image 'mcr.microsoft.com/playwright:v1.52.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.52.0-noble

GitLab CI​

GitLabでPlaywrightテストを実行するには、公開Dockerイメージ（Dockerfileを参照）を使用します。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.52.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.52.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.52.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.52.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.52.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のインストールが必要です。PlaywrightのDockerイメージとGitHub ActionにはXvfbがプリインストールされています。Xvfbを使用してヘッデッドモードでブラウザを実行するには、実際のコマンドの前にxvfb-runを追加します。

xvfb-run npx playwright test