How to Capture Playwright Performance Traces in GitHub Actions

Playwright can record a trace of a flow and expose browser performance timing, giving both a visual timeline and a number you can assert on.

Enable trace: on in the Playwright config, read performance.timing or the Performance API inside the page, and upload the trace as an artifact for the slow runs.

Steps

• Set trace: 'on-first-retry' (or on) in playwright.config.ts.
• Read load timing from page.evaluate(() => performance.now()) around a navigation.
• Upload test-results/ so traces are available for review.

Test

import { test, expect } from '@playwright/test';
test('home loads within budget', async ({ page }) => {
  const start = Date.now();
  await page.goto('https://staging.example.com/');
  await page.waitForLoadState('networkidle');
  expect(Date.now() - start).toBeLessThan(4000);
});

Workflow

jobs:
  e2e-perf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci && npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-traces
          path: test-results/

Gotchas

• Open a trace with npx playwright show-trace to see network and timing waterfalls.
• Wall-clock assertions are noisy on shared runners; allow generous margins.

Related guides