Day 16: CI/CD — GitHub Actions Pipeline From Scratch

This is Day 16 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Tests that only run locally are scripts, not automation. CI/CD transforms them into quality gates that block bad code from shipping.

Complete GitHub Actions Workflow

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

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 30
    strategy:
      fail-fast: false
      matrix:
        shard: [1/4, 2/4, 3/4, 4/4]
    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 chromium
      - name: Run tests
        run: npx playwright test --shard=${{ matrix.shard }}
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: report-${{ strategy.job-index }}
          path: |
            playwright-report/
            test-results/
          retention-days: 14

  merge-reports:
    needs: test
    if: always()
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - uses: actions/download-artifact@v4
      - run: npx playwright merge-reports --reporter=html ./report-*
      - uses: actions/upload-artifact@v4
        with:
          name: merged-report
          path: playwright-report/

Key CI Configurations

• Caching: cache: npm saves 30-60s per run
• Install only Chromium: Skip Firefox/WebKit in CI unless needed — saves 200MB
• Sharding: 4 parallel runners = 4x speedup
• Artifacts: Upload on failure for debugging with Trace Viewer
• Timeout: Set reasonable limit to prevent hung jobs

PR Gate: Block Merge on Failure

In GitHub repo settings: Settings > Branches > Branch protection > Require status checks > Select “Playwright Tests”. Now PRs cannot merge with failing tests.

Tomorrow (Day 17): Mobile testing — emulation, viewports, touch events.