Run Playwright Tests in GitHub Actions

Intermediate15 minTrending

Configure Playwright to run E2E tests in GitHub Actions CI with browser caching, parallel execution, artifact uploads, and failure reporting.

Prerequisites

-Playwright project set up
-GitHub repository
-Basic GitHub Actions knowledge

Steps

Create the GitHub Actions workflow

Set up a workflow file for running Playwright tests on push and PR.

$ mkdir -p .github/workflows && cat > .github/workflows/playwright.yml << 'EOF' name: Playwright Tests on: push: branches: [main] pull_request: branches: [main] jobs: test: timeout-minutes: 30 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 cache: npm - run: npm ci - run: npx playwright install --with-deps chromium - run: npx playwright test --project=chromium - uses: actions/upload-artifact@v4 if: ${{ !cancelled() }} with: name: playwright-report path: playwright-report/ retention-days: 14 EOF

Configure CI-specific settings

Update playwright.config.ts with CI-optimized options.

$ cat << 'EOF' // Add to playwright.config.ts export default defineConfig({ forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: process.env.CI ? 'github' : 'html', }); EOF

The 'github' reporter annotates failed tests directly in the PR checks tab. Use 'forbidOnly' to fail CI if .only() is accidentally committed.

Add browser caching

Cache Playwright browsers to speed up CI runs.

$ echo 'Add this step before playwright install in the workflow: - uses: actions/cache@v4 with: path: ~/.cache/ms-playwright key: playwright-${{ hashFiles("package-lock.json") }}'

Run the workflow locally for testing

Test the CI pipeline locally before pushing.

$ CI=true npx playwright test --project=chromium --reporter=github

Setting CI=true locally simulates the CI environment including retries and reporter settings.

Full Script

full-script.sh

#!/bin/bash
# Playwright CI Setup
set -euo pipefail

echo "=== Creating GitHub Actions Workflow ==="
mkdir -p .github/workflows

cat > .github/workflows/playwright.yml << 'WORKFLOW'
name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

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

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm ci

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

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

      - name: Run Playwright tests
        run: npx playwright test --project=chromium

      - name: Upload test report
        uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 14
WORKFLOW

echo ""
echo "=== Workflow created at .github/workflows/playwright.yml ==="
echo ""
echo "=== Local CI Simulation ==="
echo "Run: CI=true npx playwright test --project=chromium"

FAQ

Discussion

Loading comments...

#!/bin/bash # Playwright CI Setup set -euo pipefail echo "=== Creating GitHub Actions Workflow ===" mkdir -p .github/workflows cat > .github/workflows/playwright.yml << 'WORKFLOW' name: Playwright Tests on: push: branches: [main] pull_request: branches: [main] jobs: test: timeout-minutes: 30 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 cache: npm - name: Install dependencies run: npm ci - name: Cache Playwright browsers uses: actions/cache@v4 with: path: ~/.cache/ms-playwright key: playwright-${{ hashFiles('package-lock.json') }} - name: Install Playwright browsers run: npx playwright install --with-deps chromium - name: Run Playwright tests run: npx playwright test --project=chromium - name: Upload test report uses: actions/upload-artifact@v4 if: ${{ !cancelled() }} with: name: playwright-report path: playwright-report/ retention-days: 14 WORKFLOW echo "" echo "=== Workflow created at .github/workflows/playwright.yml ===" echo "" echo "=== Local CI Simulation ===" echo "Run: CI=true npx playwright test --project=chromium"