Environment Setup, CI, and Best Practices

To get value from Playwright beyond local experiments, you need a reliable environment setup and CI integration. Automating installation, running tests on each change, and collecting reports keeps quality feedback fast and consistent.

Preparing Playwright for CI Pipelines #

Most CI systems can run Node.js projects and support Playwright’s browsers via provided helpers or simple scripts. The key tasks are installing dependencies, installing browsers, running tests, and publishing reports or traces as artifacts.

# .github/workflows/playwright-ci.yml
name: Playwright Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

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

      - name: Run tests
        run: npx playwright test

      - name: Upload HTML report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report

Locally, you should mirror CI behaviour where possible: use the same Node version, npm test script, and playwright.config. This reduces “works on my machine” differences.

Common Best Practices for Setup #

Agree on a standard command (such as npm test) that runs Playwright, document prerequisites (Node version, environment variables), and provide a short onboarding guide. These small investments make it much easier for new engineers to contribute tests.

Common Mistakes #

Mistake 1 — Treating CI configuration as an afterthought #

This leads to fragile pipelines.

❌ Wrong: Manually running tests on developer machines and never automating them.

✅ Correct: Integrate Playwright into CI early so regressions are caught automatically.

Mistake 2 — Having different commands for local and CI runs #

Behaviour diverges.

❌ Wrong: Using custom scripts locally that CI does not follow.

✅ Correct: Standardise on the same test command and config for both environments.