feat(browser): support dom snapshot trace view by hi-ogawa · Pull Request #10102 · vitest-dev/vitest

hi-ogawa · 2026-04-08T10:25:11Z

Description

Quick demo

--browser.traceView option automatically enables watch UI or HTML reporter. This is to introduce new experience of browser mode as single opt-in flag as experimental feature. The goal is to make this mode as default and eventually retire "headed orchestrator UI" model (except "preview" provider?).

Docs https://deploy-preview-10102--vitest-dev.netlify.app/guide/browser/trace-view-v2

EDIT: I intiially had an opinionated config resolution:

--browser.traceView on watch mode to mean --browser.traceView --browser.headless --ui
--browser.traceView on run mode to mean --browser.traceView --reporter=html

But that's been reverted to allow users to specify each variant explicitly like below.

# watch ui
# - trace viewer shows up next to live view
pnpm -C examples/lit test --browser.traceView

# watch ui
# - this is not orchestrator UI, but "pure" UI mode with trace viewer
# - The orchestrator/tester runs in a separate headless browser
pnpm -C examples/lit test --browser.traceView --browser.headless --ui

# watch ui
# - trace viewer in "pure" UI mode
# - headed "live view" is in a separate headed browser driver window
pnpm -C examples/lit test --browser.traceView --browser.headless=false --browser.ui=false --ui

# html reporter
# - just a static UI mode but same content, so works almost identically with watch mode.
pnpm -C examples/lit test --browser.traceView --browser.headless --reporter=html
pnpm dlx serve examples/lit/html/

Screenshot

pnpm -C examples/lit test --browser.traceView --browser.headless --ui

pnpm -C examples/lit test --browser.traceView

TODO

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
Ideally, include a test that fails without this PR but passes with it.
Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

Run the tests with pnpm test:ci.

Documentation

If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

netlify · 2026-04-08T10:26:31Z

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`186ec08`
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/69db42b2fb0dcc0008d9e05d
😎 Deploy Preview	https://deploy-preview-10102--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…ip-builtin-trace-system

… safe) - store { serialized, nodeId } as snapshot payload in BrowserTraceEntry - takeSnapshot() passes explicit Mirror to snapshot(), resolves ivya selector → nodeId - TraceView.vue uses mirror.getNode(nodeId) after rebuild() instead of querySelector - removes CSS selector approach which breaks for shadow DOM elements - drops __vitest_css_from_element__ global (no longer needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- use getBoundingClientRect + position:fixed overlay div instead of inline styles - snapshot DOM is untouched; overlay is purely visual - use requestAnimationFrame to ensure layout before reading rect - credit Playwright's highlight.ts as reference for the technique - mirror.getNode(selectorId) for shadow DOM-safe element lookup Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- add __vitest_recordBrowserTrace server command (mirrors annotateTraces pattern) - resolves stack → location via parseStacktrace in one batch server-side - calls _testRun.recordArtifact directly, no browser-side recordArtifact - BrowserTraceEntry gains location?: { file, line, column } - TraceView shows clickable source location per step via openLocation composable Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Move browser traces out of the report card into the top panel layout and allow the trace viewer to open without browser orchestrator state. Keep BrowserIframe visible during browser orchestration by splitting the top pane when a trace is active. Co-authored-by: Codex <noreply@openai.com>

Wrap the trace viewer in a dedicated pane with a header and close action, and rename the component to TraceViewPane for consistency with the split layout. Co-authored-by: Codex <noreply@openai.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…g page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Document trace view as an additive browser debugging feature and list the explicit local, headless, and HTML reporter setups. Co-authored-by: Codex <noreply@openai.com>

Keep trace view setup guidance focused on the main UI and reporter combinations. Co-authored-by: Codex <noreply@openai.com>

Include the Vitest UI plus visible browser window workflow in the trace view setup table. Co-authored-by: Codex <noreply@openai.com>

pkg-pr-new · 2026-04-12T07:40:58Z

@vitest/browser

npm i https://pkg.pr.new/@vitest/browser@10102

@vitest/browser-playwright

npm i https://pkg.pr.new/@vitest/browser-playwright@10102

@vitest/browser-preview

npm i https://pkg.pr.new/@vitest/browser-preview@10102

@vitest/browser-webdriverio

npm i https://pkg.pr.new/@vitest/browser-webdriverio@10102

@vitest/coverage-istanbul

npm i https://pkg.pr.new/@vitest/coverage-istanbul@10102

@vitest/coverage-v8

npm i https://pkg.pr.new/@vitest/coverage-v8@10102

@vitest/expect

npm i https://pkg.pr.new/@vitest/expect@10102

@vitest/mocker

npm i https://pkg.pr.new/@vitest/mocker@10102

@vitest/pretty-format

npm i https://pkg.pr.new/@vitest/pretty-format@10102

@vitest/runner

npm i https://pkg.pr.new/@vitest/runner@10102

@vitest/snapshot

npm i https://pkg.pr.new/@vitest/snapshot@10102

@vitest/spy

npm i https://pkg.pr.new/@vitest/spy@10102

@vitest/ui

npm i https://pkg.pr.new/@vitest/ui@10102

@vitest/utils

npm i https://pkg.pr.new/@vitest/utils@10102

vitest

npm i https://pkg.pr.new/vitest@10102

@vitest/web-worker

npm i https://pkg.pr.new/@vitest/web-worker@10102

@vitest/ws-client

npm i https://pkg.pr.new/@vitest/ws-client@10102

commit: 273c1be

hi-ogawa added 6 commits April 8, 2026 18:19

wip: builtin trace system

0dfa175

wip: de-slop

1e08082

wip: de-slop

250e24c

refactor: de slop

625a3ba

refactor: rename

55f840f

refactor: de slop

d212deb

hi-ogawa added 9 commits April 9, 2026 12:40

wip: fix global

bbcc1b5

wip: snapshot and rebuild

45addf2

fix: bundle and lazy load rrweb-snapshot

c1f91f2

wip: delay page.mark(function) trace

f133f04

refactor: remove dup types

0889f0e

chore: todo

2fb9330

fix: trace action

5775533

Merge branch 'main' into wip-builtin-trace-system

71e2b80

chore: todo

076d29c

hi-ogawa changed the title ~~feat(browser): support trace viewer with dom snaphost~~ feat(browser): support trace viewer with dom snapshot Apr 9, 2026

hi-ogawa and others added 9 commits April 9, 2026 15:54

wip: trace action with selector

965f518

fix: record snapshot with css selector

2522b94

Merge remote-tracking branch 'origin/wip-builtin-trace-system' into w…

33d81d4

…ip-builtin-trace-system

refactor: de slop

846e940

chore: ignore html

f755239

refactor: nit

7a1db8b

hi-ogawa changed the title ~~feat(browser): support trace viewer with dom snapshot~~ feat(browser): support dom snapshot trace view Apr 9, 2026

hi-ogawa and others added 3 commits April 10, 2026 09:46

chore: todo

95b314f

feat(ui): add trace view pane header

0dfff60

Wrap the trace viewer in a dedicated pane with a header and close action, and rename the component to TraceViewPane for consistency with the split layout. Co-authored-by: Codex <noreply@openai.com>

hi-ogawa and others added 17 commits April 10, 2026 15:54

test: dog-fooding in packages/ui

1d6647a

deslop

2de7ac2

chore: todo

e14bf26

deslop

d1d44ec

test: other providers in packages/ui

ab5c12a

docs: wip trace-view-v2

108f7bd

docs: draft trace-view guide for browser.traceView

7660820

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs: add rrweb link in trace-view guide

782af47

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

wip docs

6dbe6aa

fix: fix webdriverio selector highlight

bc4d016

fix: preview provide also works (somehow)

434a05b

docs: todo

de0464b

docs: improve framing of trace-view-v2 guide

9029255

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs: cross-link browser UI model with trace-view-v2 guide

2531ed1

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs: restructure trace-view-v2 and add screenshots

c9c70e1

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs: tweak

7fa86d3

docs: fix dead links in trace-view-v2 and add browser.traceView confi…

1a87005

…g page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hi-ogawa added the p2-to-be-discussed Enhancement under consideration (priority) label Apr 11, 2026

hi-ogawa added this to Team Board Apr 11, 2026

hi-ogawa moved this to P2 - 2 in Team Board Apr 11, 2026

hi-ogawa and others added 7 commits April 12, 2026 15:18

wip: remove auto config logic

324df4f

docs: clarify trace view setup

7784acd

Document trace view as an additive browser debugging feature and list the explicit local, headless, and HTML reporter setups. Co-authored-by: Codex <noreply@openai.com>

docs: simplify trace view workflow guidance

4c4fd32

Keep trace view setup guidance focused on the main UI and reporter combinations. Co-authored-by: Codex <noreply@openai.com>

chore: todo

5820b2c

docs: tweak

b390c24

docs: expand trace view setup examples

186ec08

Include the Vitest UI plus visible browser window workflow in the trace view setup table. Co-authored-by: Codex <noreply@openai.com>

fix: fix browserIframe remount on trace select

273c1be

hi-ogawa added the cr-tracked label Apr 12, 2026

hi-ogawa mentioned this pull request Apr 12, 2026

Update vitest-browser-vue and vitest-browser-svelte to have async render with automatic trace mark #10126

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(browser): support dom snapshot trace view#10102

feat(browser): support dom snapshot trace view#10102
hi-ogawa wants to merge 73 commits intovitest-dev:mainfrom
hi-ogawa:wip-builtin-trace-system

hi-ogawa commented Apr 8, 2026 •

edited

Loading

Uh oh!

netlify bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Apr 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

hi-ogawa commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Quick demo

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Documentation

Changesets

Uh oh!

netlify bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vitest-dev ready!

Uh oh!

pkg-pr-new bot commented Apr 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

hi-ogawa commented Apr 8, 2026 •

edited

Loading

netlify bot commented Apr 8, 2026 •

edited

Loading