Add a replayable HTML report to your Playwright suite in 5 minutes

What you’ll end up with

An HTML file (e.g. tracelane-reports/<spec>--<title>--<id>-<ts>.html — the exact name is illustrative) written automatically whenever a Playwright test fails. The file is self-contained — open it in any browser to scrub the rrweb replay, inspect the console, and see failed (4xx/5xx) network requests. Recording continues across page.goto navigations, so multi-page flows replay end to end.

Prerequisites

• An existing Playwright project (@playwright/test >= 1.40)
• Node >= 22

Steps

1. Install

npm i -D @tracelane/playwright@0.1.0-alpha.2

2. Register the reporter in playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['@tracelane/playwright', { mode: 'failed', outDir: './tracelane-reports' }],
  ],
});

3. Use tracelane’s test/expect

A drop-in for @playwright/test:

import { test, expect } from '@tracelane/playwright/fixture';

test('checkout', async ({ page }) => {
  await page.goto('/checkout');
  await expect(page.getByRole('heading')).toHaveText('Order complete');
});

The fixture is auto — every test in files that import this test is recorded; nothing else to wire per-test.

4. Run and open the report

npx playwright test

On a failing test you get a single .html at ./tracelane-reports/…. Open it in any browser, fully offline — the rrweb player is at the top; console + failed-network panels below are time-synced to the scrubber.

Why this works

The fixture owns the recording: it injects the rrweb bundle, re-initializes capture on each main-frame navigation (so multi-page flows are continuous), and on failure hands the events to @tracelane/report to inline into one HTML file. Failed-network capture uses CDP on Chromium; on Firefox/WebKit it degrades to rrweb + console.

Next steps

• Attach an rrweb replay to every Playwright failure on a PR
• Debug a flaky checkout test in CI
• Share a failing test with a developer