Run Playwright in CI/CD — GitHub Actions from Zero

1. Why CI/CD?

• Catch regressions before they merge to main.
• Run on every PR — no more "works on my machine" tickets.
• Trustworthy green check = ship; red = stop.
• Free for public repos on GitHub Actions; generous free tier for private.

2. The complete workflow

Drop this in .github/workflows/playwright.yml and Playwright runs on every push and PR to main.

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/

3. Cache browsers

npx playwright install downloads ~300 MB of browsers each run. Cache them between runs to save roughly 3 minutes per build.

- name: Cache Playwright browsers
  uses: actions/cache@v4
  with:
    path: ~/.cache/ms-playwright
    key: pw-${{ runner.os }}-${{ hashFiles('package-lock.json') }}

- run: npx playwright install --with-deps

4. Shard across runners

Split your suite across N parallel jobs with --shard=i/N. Wall-clock time drops linearly.

jobs:
  test:
    runs-on: ubuntu-latest
    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 install --with-deps
      - run: npx playwright test --shard=${{ matrix.shard }}/4

5. Publish HTML report

Upload the Playwright HTML report as an artifact so teammates can download and inspect failures with traces and screenshots.

- uses: actions/upload-artifact@v4
  if: ${{ !cancelled() }}
  with:
    name: playwright-report-${{ matrix.shard }}
    path: playwright-report/
    retention-days: 14

6. Hands-on task

Fork a sample Playwright repo, add the workflow file above, push to a branch, and open a PR. Confirm the green check appears and the playwright-report artifact is downloadable from the run summary.

7. What's next

Next, move into Module 09: Visual regression testing — catch pixel-level UI bugs that functional assertions miss.