GitHub ActionsでのPlaywright実行

1. なぜ GitHub Actions で Playwright を動かすのか

• 自動テストの継続実行: すべてのプルリクエスト／main ブランチへの push ごとに e2e テストを走らせ、リグレッションを即時検知できる

• マルチ OS・ブラウザ検証: job matrix を使えば Ubuntu・Windows・macOS や Chromium・Firefox・WebKit を同時にテスト可能

• レポートの自動公開: テスト結果（HTML Report・trace・動画）をアーティファクトとして保存し、失敗時にデバッグを容易にするため playwright.dev

---

2. 前提条件

---

3. 最小構成の workflow (.github/workflows/playwright.yml)

yaml
name: Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest            # GitHub ホステッドランナー
    steps:
      - uses: actions/checkout@v4     # リポジトリを取得 :contentReference[oaicite:1]{index=1}
      - uses: actions/setup-node@v4   # Node.js をセットアップ (16→20 へ移行済) :contentReference[oaicite:2]{index=2}
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      - name: Upload HTML report
        if: ${{ always() }}
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report

ポイント解説

1. actions/setup-node@v4 で Node 20 を使用（2024 年以降の推奨バージョン） docs.github.com

2. npx playwright install --with-deps

   • Playwright ブラウザと OS 依存ライブラリを一括インストール

3. always() でテスト失敗時でもレポートをアップロードし、Pull Request 画面からダウンロード可

---

4. マトリックスでマルチプラットフォーム／ブラウザに対応

yaml
strategy:
  matrix:
    os: [ubuntu-latest, windows-latest, macos-latest]
    browser: [chromium, firefox, webkit]

• npx playwright test --project ${{ matrix.browser }} のように各ブラウザ用 Project を指定

• 並列実行 → 合計 9 ジョブが同時に走り、プラットフォーム間差分を即座に検知可能 playwright.dev

---

5. キャッシュによる高速化

yaml
- name: Cache npm
  uses: actions/cache@v4
  with:
    path: |
      ~/.npm
      ~/.cache/ms-playwright
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

• npm モジュールと Playwright ブラウザ を同一キーでキャッシュ

• 初回を除きジョブ時間を 30–60 % 短縮できる

---

6. アーティファクトとデバッグ支援

Playwright 1.46 以降、失敗時の trace が HTML Report に埋め込まれるため、artifact ひとつで両方確認可能 playwright.dev

---

7. ベストプラクティスまとめ

1. npx playwright init で初期化すると、雛形の workflow とサンプルテストが生成される browsercat.com

2. 環境変数 CI=true が自動でセットされ、CI モード用のタイムアウトやリトライが有効

3. ジョブ失敗時の再実行 (playwright test --retries 2) を活用して flakiness を低減

4. 並列度調整: GitHub Actions のデフォルト並列数（2 vCPU）を考慮し --workers=2 などで負荷を最適化

5. Self-hosted Runner を使う場合はブラウザバイナリを事前インストールし、playwright install chromium のみで高速化

---

8. 参考リンク

• Playwright 公式「Setting up CI」ガイド（GitHub Actions 章） playwright.dev

• Microsoft 公式 playwright-github-action（CLI ラッパー） github.com

• GitHub Docs「setup-node」アクション解説 docs.github.com

以上が、GitHub Actions 上で Playwright テストを安全かつ効率的に実行するための詳細手順です。