Playwright CI/CD インテグレーション

この章では、Playwright テストを CI/CD パイプラインに統合する方法を紹介します。GitHub Actions やその他の一般的な CI プラットフォームを含みます。

GitHub Actions インテグレーション

あなたがnpm init playwright@latestGitHub Actions の追加を選択すると、Playwright がワークフロー設定を自動生成します。

自動生成されたワークフロー

例

# ファイルパス: .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      # 1. コードをチェックアウト
      - uses: actions/setup-node@v4     # 2. Node.js をインストール
        with:
          node-version: 20
      - name: Install dependencies
        run: npm ci                     # 3. 依存関係をインストール
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps  # 4. ブラウザとシステムの依存関係をインストール
      - name: Run Playwright tests
        run: npx playwright test        # 5. テストを実行
      - uses: actions/upload-artifact@v4
        if: always()                    # 6. テストレポートをアップロード（テストが失敗してもアップロード）
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

CI テスト結果の確認

テストログの確認

GitHub リポジトリの Actions ページで、各実行をクリックすると詳細なテストログを確認できます。

各 Worker の出力は独立して表示されるため、特定の失敗したテストを特定しやすくなります。

HTML レポートの確認

設定している場合reporter: 'html'Artifacts からダウンロードできますplaywright-report/ローカルで完全な HTML レポートを表示するために。

レポートを Web に公開

例

# ファイルパス: .github/workflows/playwright.yml
# HTML レポートを GitHub Pages にデプロイ（簡略化した例）
- name: Upload report
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

他の CI プラットフォーム

Jenkins

pipeline {
  agent any
  stages {
    stage('Install') {
      steps {
        sh 'npm ci'
        sh 'npx playwright install --with-deps'
      }
    }
    stage('Test') {
      steps {
        sh 'npx playwright test'
      }
    }
  }
  post {
    always {
      archiveArtifacts artifacts: 'playwright-report/**'
      junit 'test-results/junit.xml'
    }
  }
}

GitLab CI

例

# ファイルパス: .gitlab-ci.yml
playwright-tests:
  image: mcr.microsoft.com/playwright:v1.52.0-jammy
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 30 days

Docker で Playwright を実行

マイクロソフトは、すべてのシステム依存関係をプリインストールした公式 Docker イメージを提供しており、すぐに使用できます。

公式イメージの使用

# 拉取镜像
docker pull mcr.microsoft.com/playwright:v1.52.0-jammy

# 在容器中运行测试
docker run --rm -v $(pwd):/work -w /work \
  mcr.microsoft.com/playwright:v1.52.0-jammy \
  npx playwright test

Dockerfile の例

例

# ファイルパス: Dockerfile
FROM mcr.microsoft.com/playwright:v1.52.0-jammy

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .

CMD ["npx", "playwright", "test"]

CI 環境のベストプラクティス

実践説明
使用--with-depsnpx playwright install --with-depsLinux システム依存関係を自動インストール
Playwright のバージョンを固定にpackage.jsonで固定@playwright/testバージョンが CI 上で予期せずアップグレードされるのを防ぐ
ブラウザをキャッシュするキャッシュms-playwrightディレクトリをキャッシュし、毎回ブラウザをダウンロードするのを防ぐ
workers 数を制御使用workers: process.env.CI ? 1 : undefinedCI 上でリソース使用を制御
タイムアウトを設定CI 環境はローカルより遅いため、適切に増やしますtimeoutとretries
テスト成果物を保持Trace、スクリーンショット、動画、レポートを CI アーティファクトとしてアップロード
その他の拡張