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

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

はじめに​

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ですべてのOS依存関係をインストールできます。

GitHub Actions​

プッシュ/プルリクエスト時​

テストは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

プッシュ/プルリクエスト時（シャーディング済み）​

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.55.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​

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

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.55.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.55.0-noble

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

CircleCIでのシャーディング​

CircleCIでのシャーディングは0からインデックス付けされるため、デフォルトの並列化環境変数をオーバーライドする必要があります。以下の例は、`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.55.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.55.0-noble

GitLab CI​

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

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.55.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.55.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.55.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.55.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.55.0-noble
    commands:
      - npx playwright test

ブラウザのキャッシュ​

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

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

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

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

DEBUG=pw:browser npx playwright test

ヘッダー付きで実行​

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

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

xvfb-run npx playwright test