Playwright CI/CD Integration

This chapter describes how to integrate Playwright tests into CI/CD pipelines, including GitHub Actions and other common CI platforms.

GitHub Actions Integration

When younpm init playwright@latestselect Add GitHub Actions, Playwright will automatically generate the workflow configuration.

Auto-generated Workflow

Example

# File path: .github/workflows/playwright.yml
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@v4      # 1. Check out code
      - uses: actions/setup-node@v4     # 2. Install Node.js
        with:
          node-version: 20
      - name: Install dependencies
        run: npm ci                     # 3. Install dependencies
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps  # 4. Install browsers and system dependencies
      - name: Run Playwright tests
        run: npx playwright test        # 5. Run tests
      - uses: actions/upload-artifact@v4
        if: always()                    # 6. Upload test report (upload even if tests fail)
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

View CI Test Results

View Test Logs

In the Actions page of the GitHub repository, click each run to view detailed test logs.

The output of each Worker is displayed independently, making it easy to locate specific failed tests.

View HTML Report

If you have configuredreporter: 'html', you can download from Artifactsplaywright-report/to view the complete HTML report locally.

Publish Report to Web

Example

# File path: .github/workflows/playwright.yml
# Deploy the HTML report to GitHub Pages (simplified example)
- name: Upload report
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

Other CI Platforms

Jenkins

pipeline {
  agent any
  stages {
    stage('Install') {
      steps {
        sh 'npm ci'
        sh 'npx playwright install --with-deps'
      }
    }
    stage('Test') {
      steps {
        sh 'npx playwright test'
      }
    }
  }
  post {
    always {
      archiveArtifacts artifacts: 'playwright-report/**'
      junit 'test-results/junit.xml'
    }
  }
}

GitLab CI

Example

# File path: .gitlab-ci.yml
playwright-tests:
  image: mcr.microsoft.com/playwright:v1.52.0-jammy
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 30 days

Running Playwright with Docker

Microsoft provides an official Docker image with all system dependencies pre-installed, ready to use out of the box.

Using the Official Image

# 拉取镜像
docker pull mcr.microsoft.com/playwright:v1.52.0-jammy

# 在容器中运行测试
docker run --rm -v $(pwd):/work -w /work \
  mcr.microsoft.com/playwright:v1.52.0-jammy \
  npx playwright test

Dockerfile Example

Example

# File path: Dockerfile
FROM mcr.microsoft.com/playwright:v1.52.0-jammy

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .

CMD ["npx", "playwright", "test"]

CI Environment Best Practices

PracticeDescription
Use--with-depsnpx playwright install --with-depsAutomatically install Linux system dependencies
Lock Playwright versionInpackage.jsonLock the version in@playwright/testversion to avoid accidental upgrades in CI
Cache browsersCachems-playwrightdirectory to avoid downloading browsers every time
Control the number of workersUseworkers: process.env.CI ? 1 : undefinedto control resource usage in CI
Set timeoutCI environments are slower than local, increase appropriatelytimeoutandretries
Preserve test artifactsUpload Trace, screenshots, videos, and reports as CI Artifacts
Other Extensions