Attach an rrweb replay to every Playwright failure on a PR
When a PR fails CI, my developer should not have to ask me what happened — the replay should be linked directly from the PR run.
Open the demo artifact →
What you’ll end up with
Every failed Playwright run uploads its tracelane-reports/*.html as a workflow artifact. A reviewer downloads it, opens the single file in any browser — fully offline — and scrubs the rrweb replay (with the console + failed-network panels) to the exact failure, without cloning the branch.

Prerequisites
- An existing Playwright project (
@playwright/test>= 1.40) - A GitHub Actions workflow running that suite
- 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 in your specs
import { test, expect } from '@tracelane/playwright/fixture';
The fixture is auto — every test in files that import this test is recorded; no per-test wiring.
4. Upload the reports from GitHub Actions
- name: Run Playwright tests
run: npx playwright test
- name: Upload tracelane replays
if: ${{ !cancelled() }}
uses: actions/upload-artifact@v4
with:
name: tracelane-reports
path: tracelane-reports/
if-no-files-found: ignore
5. Push and watch the PR
On the next failed run, open the run’s Artifacts → download tracelane-reports → open the .html. The replay opens offline; scrub to the failure, including across page navigations (recording continues through page.goto).
Why this works
The fixture records the run with rrweb (DOM + console + failed-network captured in-page on every browser, enriched by CDP on Chromium) and, on failure, writes one self-contained HTML file per test into outDir. actions/upload-artifact ships those files as-is — no replay server, no cloud bucket, no npx playwright show-trace.