Setting up CI

The minimal working GitHub Actions workflow

This runs on every push and pull request to main. The critical line is npx playwright install --with-deps — without --with-deps the system libraries that browsers need aren't installed and you get a cryptic error about missing shared libraries.

The artifact upload uses if: ${{ !cancelled() }} so the report is saved even when tests fail — which is exactly when you need it most.

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
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Viewing test results in GitHub

After a run, go to the Actions tab in your repo. Click the workflow run, then click Run Playwright tests to see the full console output — error messages, what was expected, what was received, and the call log.

On Pull Requests you also get a status check — click Details next to the Playwright check to jump straight into the logs.

Getting the HTML report from CI

The workflow uploads the HTML report as an artifact. Go to the workflow run page → Artifacts section → click playwright-report to download the zip.

You can't just open index.html directly — the report needs a web server. Extract the zip and run npx playwright show-report pointing at the extracted folder.

# Розпакуй zip, потім:
npx playwright show-report playwright-report

# Відкриється на http://localhost:9323

Opening traces from failed CI tests

In the HTML report, failed tests have a trace icon next to the file name. Click it to open the Trace Viewer inline. You can also drag the .zip file directly to trace.playwright.dev — no local installation needed.

If traces aren't recording, check your config — for CI I always use trace: 'on-first-retry' so traces only capture when a test actually fails.

// playwright.config.ts — trace тільки при першому retry на CI
export default defineConfig({
  use: {
    trace: process.env.CI ? 'on-first-retry' : 'off',
  },
})

Test artifacts contain sensitive data

Traces, HTML reports, and console logs can contain auth tokens, test user credentials, or staging API keys. Upload them only to trusted artifact stores (like private GitHub Actions artifacts with retention-days: 30). Don't post them in public Slack channels or share via insecure links.