Q40 of 42 · Playwright
How does Playwright's tracing change your approach to debugging vs Cypress's time-travel debugger?
Short answer
Short answer: Cypress's time-travel is *live* and interactive — you replay the test's snapshots in the open Test Runner. Playwright's trace is *post-hoc* — you download the trace zip from CI and replay it locally without re-running. The trace is more debuggable from CI; time-travel is more fluent during local authoring.
Detail
Both are excellent debugging tools; they emphasise different workflows.
Cypress time-travel lives in the Test Runner UI. As the test runs, every command is logged; hover any past command, see the DOM at that moment, the network requests, the console. You don't 're-run' to debug — you scroll back through the in-memory snapshots. Excellent for interactive authoring: write a step, hover, fix.
Limitation: time-travel only works in the open Test Runner (cypress open). For CI failures, the runner isn't live; you have a video, screenshots, and logs but no scrub-through interactivity. Reproducing means re-running.
Playwright trace is a separate artefact written to disk. Configure trace: 'on-first-retry' and the trace zip captures DOM snapshots, network, console, source code, action timeline. Open with npx playwright show-trace trace.zip — a browser-based UI very similar to Cypress's time-travel UI, but operating on an offline file.
The CI workflow advantage: download the trace zip from CI artefacts, open locally, debug without reproducing. A failing test from a CI run two weeks ago is still debuggable.
Practical implications:
- Local dev: Cypress's open mode is fluent for write-and-fix iteration. Playwright's UI mode (
--ui) is the equivalent and works similarly. - CI failures: Playwright wins decisively. The trace zip is a debuggable archive; Cypress's screenshots + video give you the gist but no DOM-level inspection.
- Onboarding: a new engineer can replay a prod-incident-shaped trace from history without setting up the test environment.
Workflow shift: with Playwright tracing, you stop reproducing CI failures locally. You diagnose from the trace. That changes the cadence — debugging is async, not a "context switch + reproduce + investigate" loop.
The complement: Playwright also has UI mode (--ui) which gives a Cypress-like live interactive runner. So you're not choosing — Playwright has both the live runner and the post-hoc trace; Cypress's time-travel is primarily live.
The senior signal: explaining the workflow change (not reproducing locally; diagnosing from artefacts) rather than just feature-listing.