How do you integrate Playwright with CI/CD pipelines?

The Answer

Playwright has official GitHub Actions support and works with Jenkins, GitLab CI, CircleCI, and Azure DevOps. The key is installing browsers, running in headless mode, and uploading reports as artifacts.

Deep Dive Explanation

Key CI considerations: 1) Use `npx playwright install --with-deps` to install both browsers AND OS-level dependencies. 2) Always run `if: always()` on artifact upload so reports are available even after failure. 3) Use CI-specific reporter (`reporter: 'github'`) for inline GitHub PR annotations.

example.spec.ts

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        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
        env:
          BASE_URL: ${{ secrets.STAGING_URL }}
          TEST_USER: ${{ secrets.TEST_USER }}

      - name: Upload report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30