Running Playwright in CI (GitHub Actions)

📌 Definition:

📖 Detailed Explanation:

The canonical GitHub Actions job checks out the repo, sets up Node, runs npm ci, then npx playwright install --with-deps to fetch browsers plus the Linux libraries they need. It runs npx playwright test (headless by default). Crucially, it uploads the playwright-report/ (and traces) as an artifact with if: always/!cancelled(), so you can open the report and traces for failed CI runs. For speed, a matrix shards the suite across jobs (--shard=${{ matrix.shard }}/N) and a final job merges the blob reports into one HTML report. Using the official mcr.microsoft.com/playwright container avoids installing system deps each run and, importantly, matches the OS used to generate visual baselines. Caching browser binaries further trims time.

🔑 Key Points:

• npx playwright install --with-deps fetches browsers + required Linux libraries
• Headless by default; no display server needed for the standard browsers
• Upload playwright-report/ and traces as artifacts with if:!cancelled() for post-mortem
• Shard across matrix jobs, then merge blob reports into one HTML report
• The official Playwright Docker image speeds setup and matches visual-baseline OS

🌍 Real-World Example:

📎 Code Example:

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    container: mcr.microsoft.com/playwright:v1.50.0-jammy
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright test --shard=${{ matrix.shard }}/4
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: report-${{ matrix.shard }}
          path: blob-report/
          retention-days: 7