Chapter 16 – Continuous Integration (CI) with Playwright

Automated testing isn’t truly powerful until it runs continuously after every commit, pull request, or deployment. That’s where Continuous Integration (CI) comes in.

In this chapter, we’ll walk through how to integrate Playwright with CI/CD pipelines, from basic configurations in GitHub Actions, GitLab, and Jenkins, to advanced setups involving parallel execution, Docker, environment variables, and artifact storage.

By the end, you’ll be able to confidently run Playwright tests automatically in any CI environment.

1. What is Continuous Integration (CI)?

Continuous Integration (CI) is the practice of automatically building and testing your code every time you make changes. It ensures that bugs are caught early and that your application remains stable.

Playwright integrates seamlessly with CI/CD systems, running your browser tests in a headless environment even without a GUI.

2. Setting up Playwright for CI

Before configuring a pipeline, ensure Playwright dependencies are installed.

Install Playwright and browsers

npm init playwright@latest

Then verify all dependencies are installed:

npx playwright install --with-deps

This command installs the necessary browsers and system libraries needed to run tests in CI.

3. Running Playwright in headless mode

Playwright tests run headlessly (without opening a browser window) by default in CI.

export default {
  use: {
    headless: true,
  },
};

Headless mode ensures tests run fast and efficiently in CI environments.

4. Running Playwright in GitHub Actions (basic setup)

GitHub Actions is one of the easiest ways to run Playwright tests automatically.

Example: .github/workflows/playwright.yml

name: Playwright Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        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 --reporter=html

      - name: Upload Playwright HTML Report
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report/

This workflow runs Playwright tests every time code is pushed or a pull request is opened, then uploads the HTML report as an artifact.

5. Viewing reports in GitHub Actions

After the workflow completes, navigate to the Actions tab → select your workflow → view the “Artifacts” section. Download the playwright-report folder to open the HTML report locally.

npx playwright show-report

6. Running Playwright in GitLab CI

Example: .gitlab-ci.yml

stages:
  - test

playwright_tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.44.0-focal
  script:
    - npm ci
    - npx playwright install --with-deps
    - npx playwright test --reporter=junit
  artifacts:
    when: always
    paths:
      - playwright-report/
    reports:
      junit: results.xml

This configuration uses Playwright’s official Docker image for a reliable, preconfigured environment.

Tip: Using the Playwright Docker image avoids dependency issues in CI.

7. Running Playwright in Jenkins

To run Playwright in Jenkins, install Node.js on your agent and use a simple pipeline.

Example: Jenkinsfile

pipeline {
  agent any
  stages {
    stage('Checkout') {
      steps {
        git 'https://github.com/your-org/your-repo.git'
      }
    }
    stage('Install') {
      steps {
        sh 'npm ci'
        sh 'npx playwright install --with-deps'
      }
    }
    stage('Test') {
      steps {
        sh 'npx playwright test --reporter=junit'
      }
    }
  }
  post {
    always {
      junit 'results.xml'
      archiveArtifacts artifacts: 'playwright-report/**', fingerprint: true
    }
  }
}

This Jenkins pipeline runs Playwright tests, publishes results, and stores reports as artifacts.

8. Parallel execution in CI

Playwright supports parallel test execution both locally and in CI environments.

Example configuration:

export default {
  workers: 4, // Run 4 tests in parallel
};

You can also override this in CI:

npx playwright test --workers=auto

This allows Playwright to use all available CPU cores for maximum performance.

9. Running tests across multiple browsers

To ensure cross-browser compatibility, Playwright supports running tests in Chromium, Firefox, and WebKit.

Example configuration:

export default {
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
};

Now all tests run automatically on multiple browsers in parallel.

10. Handling environment variables in CI

You can manage sensitive data (like credentials or API keys) using environment variables.

Example in GitHub Actions:

- name: Run tests with environment variables
  run: npx playwright test
  env:
    BASE_URL: ${{ secrets.BASE_URL }}
    USERNAME: ${{ secrets.USERNAME }}
    PASSWORD: ${{ secrets.PASSWORD }}

Access these variables in tests:

const baseURL = process.env.BASE_URL;
await page.goto(`${baseURL}/login`);

Always store secrets securely in CI (e.g., GitHub Secrets, GitLab Variables, Jenkins Credentials).

11. Collecting test artifacts in CI

Artifacts like screenshots, videos, and traces are essential for debugging failed tests.

Example configuration:

export default {
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
};

Upload artifacts in CI:

- name: Upload artifacts
  uses: actions/upload-artifact@v3
  with:
    name: playwright-artifacts
    path: test-results/

This ensures every failed test includes full debugging data.

12. Running Playwright in Docker (advanced)

Playwright provides prebuilt Docker images that include Node.js, browsers, and dependencies.

Example Dockerfile:

FROM mcr.microsoft.com/playwright:v1.44.0-focal
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
CMD ["npx", "playwright", "test"]

Build and run:

docker build -t playwright-tests .
docker run --rm playwright-tests

This setup ensures consistent results across all environments.

13. Retry strategy for flaky tests

CI environments can sometimes have unstable network or resource conditions. You can configure automatic retries.

export default {
  retries: 2, // Retry failed tests twice
};

Playwright will automatically re-run failed tests before marking them as failed.

14. Combining CI with reporting and trace viewer

You can combine everything we’ve learned to create a complete CI setup with debugging tools.

Example configuration snippet:

export default {
  reporter: [['list'], ['html', { open: 'never' }], ['junit', { outputFile: 'results.xml' }]],
  use: {
    trace: 'retain-on-failure',
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
  },
};

All traces, videos, and reports will be collected and uploaded for inspection after the test run.

Best practices for Playwright CI pipelines

1. Use Playwright’s official Docker image for consistency.
2. Run tests in headless mode for speed.
3. Use parallel execution to reduce runtime.
4. Store credentials in CI secrets, never in code.
5. Collect artifacts (traces, screenshots) for debugging.
6. Use retries for flaky test stabilization.
7. Integrate HTML reports into CI artifacts for easy access.
8. Validate tests in multiple browsers for cross-browser coverage.

Exercise

Task 1: Set up Playwright tests to run automatically in GitHub Actions.
Task 2: Configure Playwright to run tests in Chromium and Firefox.
Task 3: Collect artifacts (screenshots and traces) on failure.
Task 4: Run Playwright in a Docker container.
Bonus: Integrate Playwright tests with a CI reporting dashboard.

Cheat Sheet

Summary

In this chapter, you learned how to:

• Integrate Playwright tests into CI/CD systems like GitHub Actions, GitLab, and Jenkins.
• Run Playwright in Docker containers for consistency.
• Manage secrets, environment variables, and headless modes.
• Enable parallel execution, retries, and artifact collection.
• Generate and store reports automatically after each run.

With CI integration, Playwright becomes part of your continuous testing workflow ensuring that every commit is validated, every change is tested, and your application stays reliable from development to deployment.