Skip to content
Diff Stage
Sign inCreate an account

Free tool for Playwright and Pest browser tests

Convert a Playwright trace to MP4

Drop the trace.zip your CI kept. Watch it back, then download a video with the cursor, clicks and each step labelled.

Runs in your browser. Your trace is never uploaded.

Drop your trace.zip

or ·

Want this on every PR, compared against main?
Diff Stage records your Pest browser tests in CI and plays the pull request next to main.

See Diff Stage

How it works

  1. Drop the trace

    Download trace.zip from your CI artifacts or test-results folder and drop it on the player.

  2. Watch it back

    The trace screenshots play in order, with the cursor, each click and a label for every step.

  3. Download the MP4

    Attach the video to a pull request, a bug report or a Slack thread. Anyone can play it.

Where to find your trace

Playwright writes a trace.zip into test-results/ for each test it traces. Many CI setups keep traces but not videos, because retain-on-failure traces are small and only saved when a test fails.

The video is built from the screenshots in the trace. The Playwright test runner records them by default. If you start tracing yourself, pass screenshots: true to tracing.start().

// playwright.config.ts
export default defineConfig({
  use: { trace: 'retain-on-failure' },
});
- uses: actions/upload-artifact@v4
  if: ${{ !cancelled() }}
  with:
    name: playwright-traces
    path: test-results/

Questions

Is my trace uploaded anywhere?
No. Traces can hold cookies, tokens and request bodies, so this page unzips and encodes everything in your browser tab. Nothing is sent to Diff Stage.
Why is the video longer than my test?
Playwright can fill a form in a few milliseconds. With "Slow down quick steps" on, each step's result stays on screen long enough to read. Untick it for real timing.
Why does it say my trace has no screenshots?
The trace was recorded with screenshots turned off, so there are no frames to play. Set screenshots: true in your trace options and run the test again.
Can I see network requests and the DOM?
Not here. This page makes a shareable video. Open the same trace in the Playwright Trace Viewer to inspect requests, console logs and DOM snapshots.