gh-cskiro-claudex/skills/testing/playwright-e2e-automation/reference/ci-cd-integration.md

CI/CD Integration

GitHub Actions Example

name: Playwright E2E Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps

      - name: Run Playwright tests
        run: npm run test:e2e

      - name: Upload screenshots
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-screenshots
          path: screenshots/

      - name: Upload HTML report
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report/

Baseline Management in CI

1. Store baselines in repository

git add screenshots/baselines/
git commit -m "chore: update visual regression baselines"

2. Update baselines on approval

1. Run tests locally: npm run test:e2e
2. Review diffs: npx playwright show-report
3. Update baselines: npm run test:e2e:update-snapshots
4. Commit updated baselines

3. Fail CI on visual regressions

• Configure threshold in playwright.config.ts
• Tests fail if diffs exceed threshold
• Review in CI artifacts before merging

GitLab CI Example

e2e-tests:
  image: mcr.microsoft.com/playwright:v1.40.0-jammy
  stage: test
  script:
    - npm ci
    - npm run test:e2e
  artifacts:
    when: always
    paths:
      - screenshots/
      - playwright-report/
    expire_in: 7 days

CircleCI Example

version: 2.1
jobs:
  e2e-tests:
    docker:
      - image: mcr.microsoft.com/playwright:v1.40.0-jammy
    steps:
      - checkout
      - run: npm ci
      - run: npm run test:e2e
      - store_artifacts:
          path: screenshots
      - store_artifacts:
          path: playwright-report

Best Practices

Screenshot Artifact Storage

• Always upload screenshots as artifacts
• Keep artifacts for at least 7 days
• Consider cloud storage for long-term retention

Parallel Execution

# Run tests across multiple shards
- name: Run Playwright tests
  run: npx playwright test --shard=${{ matrix.shard }}/${{ strategy.job-total }}
  strategy:
    matrix:
      shard: [1, 2, 3, 4]

Caching

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

Notifications

Configure notifications for test failures:

• Slack integration
• Email alerts
• PR comments with screenshot diffs