Playwright Tests in GitHub Actions

Running Playwright Tests in GitHub Actions: A Comprehensive CI/CD Guide

Continuous integration and deployment (CI/CD) pipelines are the backbone of modern software development, but setting up robust automated testing can be challenging. If you're looking to streamline your testing process with Playwright and GitHub Actions, you're in the right place. This guide will walk you through everything you need to know about integrating Playwright tests into your GitHub Actions workflow, helping you catch bugs earlier and ship more reliable code.

Prerequisites#

Before diving in, ensure you have:

• Node.js (v16.x or later)
• npm (v8.x or later)
• A GitHub account
• Basic understanding of TypeScript and GitHub Actions
• Existing Playwright test suite (or willingness to create one)

Estimated setup time: 30-45 minutes

Setting Up Your GitHub Actions Workflow#

Creating the Workflow File#

GitHub Actions workflows are defined in YAML files stored in the .github/workflows directory. Let's create a comprehensive Playwright testing workflow.

// Example Playwright test configuration
import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
  testDir: "./tests",
  timeout: 30 * 1000, // 30 seconds
  expect: {
    timeout: 5000, // Maximum time for an assertion to pass
  },
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  use: {
    actionTimeout: 0,
    trace: "on-first-retry",
  },
};

export default config;

// Example Playwright test configuration
import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
  testDir: "./tests",
  timeout: 30 * 1000, // 30 seconds
  expect: {
    timeout: 5000, // Maximum time for an assertion to pass
  },
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  use: {
    actionTimeout: 0,
    trace: "on-first-retry",
  },
};

export default config;

Workflow YAML Configuration#

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

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: npx playwright test

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

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

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: npx playwright test

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

Advanced Configuration Options#

Parallel Test Execution#

Playwright supports parallel test execution, which can significantly reduce your total test runtime:

// playwright.config.ts
export default {
  fullyParallel: true,
  workers: process.env.CI ? 2 : undefined,
  // Other configuration options...
};

// playwright.config.ts
export default {
  fullyParallel: true,
  workers: process.env.CI ? 2 : undefined,
  // Other configuration options...
};

Browser Matrix Testing#

Test across multiple browsers to ensure comprehensive coverage:

strategy:
  matrix:
    browser: [chromium, firefox, webkit]

steps:
  - name: Run Playwright tests
    run: npx playwright test --project=${{ matrix.browser }}

strategy:
  matrix:
    browser: [chromium, firefox, webkit]

steps:
  - name: Run Playwright tests
    run: npx playwright test --project=${{ matrix.browser }}

Handling Authentication and Environment Variables#

Use GitHub Secrets for managing sensitive information:

env:
  TEST_USERNAME: ${{ secrets.TEST_USERNAME }}
  TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}

env:
  TEST_USERNAME: ${{ secrets.TEST_USERNAME }}
  TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}

Troubleshooting Common Issues#

Best Practices#

• Use environment-specific configurations
• Implement comprehensive error reporting
• Cache npm dependencies to speed up builds
• Run lightweight tests on every commit
• Use matrix strategies for cross-browser testing
• Implement retry mechanisms for flaky tests

Next Steps#

• Explore advanced Playwright testing techniques
• Integrate code coverage reporting
• Learn about performance testing with Playwright
• Implement visual regression testing
• Explore GitHub Actions marketplace for additional integrations