GitHub Actions

Sample Workflow

npm init playwright@latest scaffolds .github/workflows/playwright.yml. Customize Node version, shard count, and environment secrets.

Use actions/cache for ~/.cache/ms-playwright and actions/upload-artifact for reports.

name: Playwright
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

upload-artifact on always() preserves reports even when tests fail.

Sharding on GHA

strategy:
  matrix:
    shard: [1, 2, 3, 4]
steps:
  - run: npx playwright test --shard=${{ matrix.shard }}/4

• Matrix shard jobs run parallel on GitHub runners.
• merge-reports combines blob reports after matrix.
• Store BASE_URL in repo secrets or vars.
• Use concurrency group to cancel outdated PR runs.

GitHub Actions Snippets

Copy-paste patterns.

Merge Reports Job

# After sharded test jobs:
- run: npx playwright merge-reports --reporter html ./all-blob-reports

Caching Playwright Browsers in GHA

Cache ~/.cache/ms-playwright with actions/cache keyed on Playwright version — saves minutes per workflow run.

Common Mistakes

• Missing --with-deps on ubuntu-latest.
• Not uploading report — developers blind to CI failures.
• Secrets not passed to fork PRs (expected — use staging bot).
• Running full suite on every file change without path filters.

Key Takeaways

• Official workflow template is the starting point.
• Cache npm and Playwright browsers.
• Shard matrix scales parallel execution.
• Always upload HTML report artifact.