How Trace Viewer works in playwright when some browsers do not support CDP
Playwright’s trace viewer works even in Safari (WebKit) and Firefox — even though those browsers don’t support CDP natively. Let’s break down how.
🧠 How Playwright Trace Viewer Works
Playwright’s trace viewer isn’t browser-dependent — it’s framework-level tracing, not low-level browser tracing. Here’s what actually happens:
1. Playwright Hooks into Its Own API Layer
Playwright internally wraps all browser automation calls (click, fill, goto, locator, etc.).
When you enable tracing (context.tracing.start()), Playwright records:
- Every command sent to the browser
- Timing and response
- DOM snapshots before & after key actions
- Screenshots
- Network events (via browser protocol)
- Console logs, errors, etc.
So even for WebKit (Safari) or Firefox, Playwright doesn’t rely on CDP — it logs actions within its own automation layer.
2. Cross-Browser Architecture
Playwright has browser-specific drivers:
playwright-chromiumplaywright-firefoxplaywright-webkit(Safari engine)
Each driver speaks to its browser through a native protocol:
- Chromium → CDP
- Firefox → Remote Debug Protocol (RDP)
- WebKit → Playwright’s custom WebKit driver, built from a fork of WebKit that exposes debugging hooks
When tracing is enabled, these drivers send telemetry back to the Playwright core. That’s why tracing works across all browsers — including Safari.
3. The Trace File
All this data is stored in a .zip file (usually trace.zip) that contains:
- A JSON log of all Playwright events
- Base64-encoded screenshots
- DOM snapshots
- Metadata about network requests
You can open this in:
npx playwright show-trace trace.zip
And view it in Playwright’s visual Trace Viewer UI, which replays actions like a time machine.
✅ Key Difference from CDP Traces
| Aspect | CDP / Chrome | Playwright Trace |
|---|---|---|
| Source | Browser’s native debugging protocol | Playwright’s cross-browser automation layer |
| Coverage | Only Chromium-based browsers | Works across Chromium, Firefox, WebKit |
| Depth | Deep browser internals (JS execution, memory, etc.) | Test-level details (steps, DOM, screenshots, logs) |
| Use Case | Browser devtools, profiling | Test debugging and replay |
So to summarize:
🧩 Playwright Trace Viewer doesn’t depend on CDP. It records at the framework level, so it can replay interactions even on browsers that don’t expose CDP — like Safari.