Skip to content

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

Draft
hi-ogawa wants to merge 60 commits intovitest-dev:mainfrom
hi-ogawa:wip-builtin-trace-system
Draft

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

Conversation

@hi-ogawa
Copy link
Copy Markdown
Collaborator

@hi-ogawa hi-ogawa commented Apr 8, 2026

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?).

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

# html reporter
# - just a static UI mode but same content
pnpm -C examples/lit test --browser.traceView --run
pnpm dlx serve examples/lit/html/

# headed "live view" is still supported as a separate headed browser driver window 
pnpm -C examples/lit test --browser.traceView --browser.headless=false
Screenshot
  • pnpm -C examples/lit test --browser.traceView
image

TODO

  • snapshot + view prototype
    • snapshot + render
    • selector highlight
    • source location
    • external resources (css, images, etc.) (rrweb is supposed to cover all these reasonably)
  • design viewer
    • step list
    • snapshot view
    • link to code view
    • link from code view (later)
    • open trace from artifact
  • option to differentiate playwright trace and builtin trace.
    • test.browser.traceView: true
    • the idea is to provide new experience around dome snapshot viewer as first-class citizen
    • imply --browser.headless --ui on watch
    • imply --browser.headless --reporter html on non watch
  • test
    • provideres
      • playwright
      • webdriverio (highlight broken)
      • preview (no idea)
    • e2e
    • unit
  • docs
    • how to separate from playwright trace?
  • summary
  • review slop UI code
  • design efficient trace format and persistence (later)

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
Copy link
Copy Markdown

netlify bot commented Apr 8, 2026

Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 345fc36
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/69d89d8caa03e40008bb7ca1
😎 Deploy Preview https://deploy-preview-10102--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@hi-ogawa 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
… 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>
@hi-ogawa 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
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>
hi-ogawa and others added 30 commits April 10, 2026 10:56
Emit one browser trace artifact for each retry or repeat attempt and update the UI to treat each trace artifact as a separate viewer entry.

The trace viewer now labels retry and repeat attempts directly from artifact metadata.

Co-authored-by: Codex <noreply@openai.com>
Update the selected trace step before opening its source location from the trace viewer.

Co-authored-by: Codex <noreply@openai.com>
Render selector text as a secondary line in the trace step list when available.

Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Built-in trace viewer with DOM snapshots for browser mode

1 participant