Integrating Playwright with CI/CD Systems

Continuous Integration/Continuous Deployment (CI/CD) systems help automate the testing process. This guide shows how to integrate Playwright tests with popular CI/CD platforms.

General Best Practices

Regardless of which CI system you use, follow these best practices:

1. Headless mode: Always run tests in headless mode in CI environments

2. Artifacts: Configure your CI to save test artifacts (reports, screenshots, videos)

3. Caching: Cache browser binaries to speed up CI runs

4. Parallelization: Run tests in parallel to reduce execution time

5. Retries: Add retries for flaky tests in CI environments

GitHub Actions

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

jobs:
  test:
    timeout-minutes: 60
    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: npx playwright test

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

Azure DevOps

trigger:
  - main

pool:
  vmImage: "ubuntu-latest"

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "18.x"
    displayName: "Install Node.js"

  - script: npm ci
    displayName: "Install dependencies"

  - script: npx playwright install --with-deps
    displayName: "Install Playwright browsers"

  - script: npx playwright test
    displayName: "Run Playwright tests"

  - task: PublishPipelineArtifact@1
    inputs:
      targetPath: "playwright-report"
      artifact: "playwright-report"
      publishLocation: "pipeline"
    displayName: "Publish test report"
    condition: always()

CircleCI

version: 2.1
jobs:
  test:
    docker:
      - image: mcr.microsoft.com/playwright:v1.40.0-jammy
    steps:
      - checkout
      - restore_cache:
          keys:
            - node-deps-v1-{{ checksum "package-lock.json" }}
      - run:
          name: Install dependencies
          command: npm ci
      - save_cache:
          key: node-deps-v1-{{ checksum "package-lock.json" }}
          paths:
            - ~/.npm
      - run:
          name: Run Playwright tests
          command: npx playwright test
      - store_artifacts:
          path: playwright-report
          destination: playwright-report

workflows:
  version: 2
  build_and_test:
    jobs:
      - test

Jenkins

pipeline {
    agent {
        docker {
            image 'mcr.microsoft.com/playwright:v1.40.0-jammy'
        }
    }
    stages {
        stage('Install dependencies') {
            steps {
                sh 'npm ci'
            }
        }
        stage('Test') {
            steps {
                sh 'npx playwright test'
            }
        }
    }
    post {
        always {
            archiveArtifacts artifacts: 'playwright-report/**', allowEmptyArchive: true
        }
    }
}

GitLab CI

image: mcr.microsoft.com/playwright:v1.40.0-jammy

stages:
  - test

cache:
  paths:
    - node_modules/
    - ~/.cache/ms-playwright/

playwright:
  stage: test
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 1 week

Sharding Tests for Parallel Execution

For large test suites, you can split tests across multiple CI jobs:

# Job 1: Run first shard (1 of 3)
npx playwright test --shard=1/3

# Job 2: Run second shard (2 of 3)
npx playwright test --shard=2/3

# Job 3: Run third shard (3 of 3)
npx playwright test --shard=3/3

GitHub Actions example with sharding:

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shardIndex: [1, 2, 3]
        shardTotal: [3]
    steps:
      # ... setup steps ...
      - name: Run Playwright tests
        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

Handling Test Reports

Most CI systems can display test results in their UI if you generate reports in the right format:

# Generate JUnit XML for CI systems
npx playwright test --reporter=junit,html

Configure your playwright.config.ts to always generate the right reports:

export default defineConfig({
  reporter: process.env.CI
    ? [["junit", { outputFile: "test-results/results.xml" }], ["html"]]
    : "html",
  // ... other config ...
});

Docker Setup

Create a Dockerfile for consistent test execution:

FROM mcr.microsoft.com/playwright:v1.40.0-jammy

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

# Run tests
CMD ["npx", "playwright", "test"]

By following these integration examples, you can set up reliable, automated test execution as part of your development workflow.