Repository navigation
[Feature]: Custom tracing marker API with selector and snapshot #39308
Description
Activity
Hi! Our Trace already contains snapshots before/after each action. You'd like a capability to additionally take these snapshots at arbitrary points in time, and assign them names. Could you give an example where that's useful?
We already have
locator.describebtw, which sounds similar to the proposedmark.Reacted by Hiroshi OgawaThanks for pointing out
locator.describe(...). I had missed that API, and it is useful for Vitest. But it is not sufficient as a replacement for the feature requested here.The remaining gap comes from execution-model differences with Vitest Browser Mode:
- We need to insert markers at points where no Playwright action/assertion is involved. In our model, end-user test code runs fully in the browser runtime, so there isn’t always a Playwright protocol call at the point we want to anchor. For example, the
renderhelper invitest-browser-react(Vitest Browser Mode adaptation of Testing Library) andexpect.elementare browser-only mechanisms, but they are valuable trace checkpoints (including snapshots). - Playwright trace source capture relies on Node-side stack capture, while end-user code runs in the browser runtime. We can capture browser-side user callsites, but there is no general public API to attach that location to trace events (except
tracing.grouptoday).
- We need to insert markers at points where no Playwright action/assertion is involved. In our model, end-user test code runs fully in the browser runtime, so there isn’t always a Playwright protocol call at the point we want to anchor. For example, the
🚀 Feature Request
pageandlocatormethods for inserting custom markers into Playwright traces, with optional DOM snapshot capture and selector-aware element highlighting.page.mark(name): inserts a named timeline marker visible in Trace Viewer, with optional snapshot capture.locator.mark(name): same timeline marker, and also resolves the locator's selector and highlights the target element in the snapshot (if it exists).Example
Motivation
We are enhancing Playwright trace support in Vitest browser mode (in vitest-dev/vitest#9652). There is currently no stable way to insert custom trace markers with snapshots or element highlighting. Our workarounds today:
The
page.evaluate(() => 0)workaround is a no-op just to trigger a snapshot-eligible action, andlocator._expect(...)is a private API I just happened to find usable as workaround for element highlight. Publicpage.mark()/locator.mark()APIs would make this a stable, first-class capability for the broader Playwright ecosystem.