diff --git a/docs/config/browser/traceview.md b/docs/config/browser/traceview.md
new file mode 100644
index 000000000000..6bfb96351622
--- /dev/null
+++ b/docs/config/browser/traceview.md
@@ -0,0 +1,70 @@
+---
+title: browser.traceView | Config
+outline: deep
+---
+
+# browser.traceView
+
+- **Type:** `boolean | { enabled?: boolean; recordCanvas?: boolean; inlineImages?: boolean }`
+- **CLI:** `--browser.traceView`
+- **Default:** `false`
+
+Enable trace-view collection for browser tests. Vitest captures DOM snapshots for browser interactions and can show them in the browser UI, Vitest UI, or HTML reporter when those surfaces are enabled — no external tools required.
+
+```ts
+export default defineConfig({
+  test: {
+    browser: {
+      traceView: true,
+    },
+  },
+})
+```
+
+Use the object form to enable additional snapshot fidelity options:
+
+```ts
+export default defineConfig({
+  test: {
+    browser: {
+      traceView: {
+        enabled: true,
+        inlineImages: true,
+        recordCanvas: true,
+      },
+    },
+  },
+})
+```
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `enabled` | `false` | Enables Vitest trace-view artifact collection. |
+| `inlineImages` | `false` | Inlines loaded `<img>` pixels into snapshots for more portable replay, especially in the HTML reporter. |
+| `recordCanvas` | `false` | Captures readable canvas pixels in snapshots. This enables a weaker replay iframe sandbox because rrweb needs scripts to redraw canvas data. |
+
+## browser.traceView.enabled {#traceview-enabled}
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **CLI:** `--browser.traceView.enabled`
+
+Enables Vitest trace-view artifact collection.
+
+## browser.traceView.inlineImages {#traceview-inlineimages}
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **CLI:** `--browser.traceView.inlineImages`
+
+Inlines loaded `<img>` pixels into snapshots for more portable replay, especially in the HTML reporter.
+
+## browser.traceView.recordCanvas {#traceview-recordcanvas}
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **CLI:** `--browser.traceView.recordCanvas`
+
+Captures readable canvas pixels in snapshots. This enables a weaker replay iframe sandbox because rrweb needs scripts to redraw canvas data.
+
+See [Trace View](/guide/browser/trace-view-v2) for full documentation.
diff --git a/docs/guide/browser/index.md b/docs/guide/browser/index.md
index 990498af1f0c..e824cd06327d 100644
--- a/docs/guide/browser/index.md
+++ b/docs/guide/browser/index.md
@@ -330,6 +330,8 @@ Since Vitest 3.2, if you don't have the `browser` option in your config but spec
 
 By default, Vitest will automatically open the browser UI for development. Your tests will run inside an iframe in the center. You can configure the viewport by selecting the preferred dimensions, calling `page.viewport` inside the test, or setting default values in [the config](/config/browser/viewport).
 
+For an alternative debugging model that captures DOM snapshots for every test instead of showing a live iframe, see [Trace View](/guide/browser/trace-view-v2).
+
 ## Headless
 
 Headless mode is another option available in the browser mode. In headless mode, the browser runs in the background without a user interface, which makes it useful for running automated tests. The headless option in Vitest can be set to a boolean value to enable or disable headless mode.
diff --git a/docs/guide/browser/trace-view-v2.md b/docs/guide/browser/trace-view-v2.md
new file mode 100644
index 000000000000..c0e12dd3e51e
--- /dev/null
+++ b/docs/guide/browser/trace-view-v2.md
@@ -0,0 +1,184 @@
+# Trace View V2 <Badge type="warning" text="Experimental" />
+
+<!-- TODO: experimental version, rename md, better cross link -->
+
+`browser.traceView` records browser interactions as DOM snapshots and lets you replay them step by step in Vitest's built-in trace viewer. It is useful when the live browser view is not enough: you can inspect earlier tests, failed retries, screenshots, assertions, and user actions after the browser has already moved on.
+
+Trace view is additive to the current browser testing workflow. Enabling it does not force a single debugging mode. You can use it with the normal local browser UI, with a headless browser and Vitest UI, or with the HTML reporter in CI.
+
+::: tip Trace view, browser UI, and HTML reports
+
+The normal local browser mode opens the [browser UI](/config/browser/ui), where tests run in a visible iframe. This is useful while developing, but the iframe only shows the current browser state. When another test runs, the previous rendered state is gone.
+
+`browser.traceView` keeps a replayable record for each test. In local browser UI mode, the trace viewer appears alongside the existing live view so you can keep using the browser UI while also inspecting recorded steps.
+
+For static output, add the [HTML reporter](/guide/reporters#html-reporter). The same trace viewer can then be opened from the generated report, which is useful for run-mode and CI failures.
+
+:::
+
+## Quick Start
+
+Enable trace view with the [`browser.traceView`](/config/browser/traceview) option:
+
+::: code-group
+
+```ts [vitest.config.ts]
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    browser: {
+      traceView: true,
+    },
+  },
+})
+```
+
+```bash [CLI]
+vitest --browser.traceView
+```
+
+:::
+
+When `browser.traceView` is enabled, tests with recorded traces can be opened in the trace viewer from the [browser UI](/config/browser/ui), [Vitest UI](/guide/ui), and [HTML reporter](/guide/reporters#html-reporter). The viewer has two resizable panes:
+
+- **Step list** (left) — every recorded action, assertion, mark, and lifecycle entry, with name, timing, selector, and source location. Failed actions and assertions are highlighted in red.
+- **DOM snapshot** (right) — a reconstruction of the page at the selected step. The interacted element is highlighted in blue.
+
+Selecting a step also opens its source location in the Editor tab when that location is available.
+
+<img alt="Vitest UI trace viewer showing step list and DOM snapshot" img-light src="/browser/trace-view-light.png">
+<img alt="Vitest UI trace viewer showing step list and DOM snapshot" img-dark src="/browser/trace-view-dark.png">
+
+<small>Example replay uses [Vuetify's](https://github.com/vuetifyjs/vuetify) `VDateInput` component.</small>
+
+## Snapshot Fidelity
+
+By default, trace view captures the DOM tree, attributes, form values, same-origin readable CSS, element scroll positions, viewport size, and window scroll position. Images and canvas pixels are not inlined by default.
+
+Stylesheets are captured through the browser's CSSOM. Readable `<style>` tags and same-origin `<link rel="stylesheet">` files are serialized into the snapshot and replayed as inline styles, so normal component styles keep working in the trace viewer and HTML reporter. This captures the parsed CSS rules the browser applied, not the exact original stylesheet bytes: comments, formatting, invalid rules, and CSS resource files such as background images or fonts are not bundled this way.
+
+Enable additional fidelity options with the object form:
+
+```ts
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    browser: {
+      traceView: {
+        enabled: true,
+        inlineImages: true,
+        recordCanvas: true,
+      },
+    },
+  },
+})
+```
+
+`inlineImages` stores loaded `<img>` pixels in the trace snapshot. This is mostly useful for the HTML reporter, where the report should be portable without depending on external image URLs. This is pixel capture, not original resource capture: SVGs are rasterized, animated images are not preserved as animations, and CSS background images or fonts are not covered. Cross-origin images need CORS-readable pixels to be inlined; otherwise they can still render from the external URL if it remains reachable.
+
+`recordCanvas` stores readable canvas pixels in the trace snapshot. This is useful for charts and simple 2D canvas output, but it is not a full canvas drawing timeline and does not provide complete WebGL replay.
+
+### External Resource Limits
+
+Trace view does not currently provide a general resource store. Resources that are not captured into the snapshot remain URL-backed.
+
+This means CSS background images and `@font-face` files referenced from serialized CSS still depend on their original URLs. External images can still render in the viewer when the browser can load the URL, but they are not portable in the HTML reporter unless `inlineImages` can capture their pixels. Cross-origin images need CORS-readable pixels for that capture; otherwise the browser can display them, but rrweb cannot safely draw them into a canvas data URL.
+
+Use `inlineImages` for loaded `<img>` elements that need to be portable in the HTML reporter. CSS subresources, fonts, non-CORS cross-origin images, videos, and other external files remain limitations of the current snapshot-based trace format.
+
+::: warning Canvas replay sandbox
+
+`recordCanvas` enables a weaker iframe sandbox in the trace viewer. rrweb replays canvas data through an image load handler, so Vitest allows scripts inside the replay iframe for traces recorded with `recordCanvas`. Keep this option enabled only when canvas pixels are useful for debugging.
+
+:::
+
+## Common Setups
+
+`browser.traceView` records traces. The browser mode, UI, and reporter options determine where you inspect them.
+
+<!--
+TODO: The browser UI / Vitest UI / browser driver combinations are not specific to trace view and might be better documented in the Browser Mode guide.  Something like:
+
+  | top-level --ui | browser.ui | browser.headless | Result |
+  | --- | --- | --- | --- |
+  | off | true | false | browser UI/live iframe in headed browser |
+  | on | false | true | pure Vitest UI, tests in headless browser |
+  | on | false | false | pure Vitest UI, tests in separate headed browser window |
+
+-->
+
+| Goal | Configuration | Result |
+| --- | --- | --- |
+| Add trace replay to the normal local browser UI | `vitest --browser.traceView` | Uses the default local headed browser UI and adds trace replay for recorded tests. |
+| Debug locally with a headless browser | `vitest --browser.traceView --browser.headless --ui` | The browser runs headless, while Vitest UI shows recorded trace steps and snapshots. |
+| Debug locally with a visible browser window and Vitest UI | `vitest --browser.traceView --browser.headless=false --browser.ui=false --ui` | Vitest UI shows recorded trace steps and snapshots, while tests run in a separate headed browser window. |
+| Generate a static report for CI or run mode | `vitest run --browser.traceView --reporter=html` | The HTML report includes the trace viewer for recorded tests. |
+
+## Relation to Playwright Traces
+
+`browser.traceView` and [`browser.trace`](/config/browser/trace) are independent features:
+
+|                        | `browser.traceView`                                       | `browser.trace`                                |
+| ---------------------- | --------------------------------------------------------- | ---------------------------------------------- |
+| Provider support       | All providers (playwright, webdriverio, preview)          | Playwright only                                |
+| Viewer                 | Browser UI / Vitest UI / HTML reporter                    | Playwright Trace Viewer / trace.playwright.dev |
+| Format                 | [rrweb](https://github.com/rrweb-io/rrweb) DOM snapshots | Playwright `.trace.zip`                        |
+| Requires external tool | No                                                        | Yes (`npx playwright show-trace`)              |
+
+You can enable both at the same time. See [Playwright Trace Files](./trace-view.md) for the `browser.trace` workflow.
+
+## Recorded Steps
+
+Trace entries are recorded automatically for:
+
+- `expect.element(...)` assertions
+- Interactive actions like `click`, `dblClick`, `tripleClick`, `fill`, `clear`, `type`, `hover`, `selectOptions`, `upload`, `dragAndDrop`, `tab`, `keyboard`, `wheel`, and screenshots
+- Test runner lifecycle event (e.g. `vitest:onAfterRetryTask` is recorded after each test and retry run)
+
+Each entry captures the DOM state at that point, along with timing information, the selector, and the source location that triggered it.
+
+Element highlighting is best-effort. Some provider-specific selectors, shadow DOM selectors, or elements that are not present in the captured snapshot may not be highlighted.
+
+## Custom Trace Entries
+
+You can insert your own named entries with `page.mark()` and `locator.mark()`:
+
+```ts
+import { page } from 'vitest/browser'
+
+await page.mark('content rendered')
+
+await page.getByRole('button', { name: 'Sign in' }).mark('sign in button')
+```
+
+You can also pass a callback to `page.mark()`. Note that grouping is not currently supported — each inner action is recorded individually, and the mark entry appears at the end:
+
+```ts
+await page.mark('sign in flow', async () => {
+  await page.getByRole('textbox', { name: 'Email' }).fill('john@example.com')
+  await page.getByRole('textbox', { name: 'Password' }).fill('secret')
+  await page.getByRole('button', { name: 'Sign in' }).click()
+})
+```
+
+Use [`vi.defineHelper()`](/api/vi#vi-defineHelper) to make entries from reusable helpers point to the call site rather than the helper's internals:
+
+```ts
+import { vi } from 'vitest'
+import { page } from 'vitest/browser'
+
+const renderContent = vi.defineHelper(async (html: string) => {
+  document.body.innerHTML = html
+  await page.elementLocator(document.body).mark('render')
+})
+
+test('shows button', async () => {
+  await renderContent('<button>Hello</button>') // trace entry points here
+})
+```
+
+## Retries and Repeats
+
+Each attempt — retry or repeat — is recorded as a separate trace. When a test has multiple attempts, the viewer opens the most recent one by default. You can switch between attempts in the Report tab.
diff --git a/docs/guide/cli-generated.md b/docs/guide/cli-generated.md
index 633532489474..5907b058ac6b 100644
--- a/docs/guide/cli-generated.md
+++ b/docs/guide/cli-generated.md
@@ -429,6 +429,27 @@ Control if Vitest catches uncaught exceptions so they can be reported (default:
 
 Enable trace view mode. Supported: "on", "off", "on-first-retry", "on-all-retries", "retain-on-failure".
 
+### browser.traceView.enabled
+
+- **CLI:** `--browser.traceView.enabled`
+- **Config:** [browser.traceView.enabled](/config/browser/traceview#traceview-enabled)
+
+Enable Vitest trace-view collection for browser tests (default: `false`)
+
+### browser.traceView.recordCanvas
+
+- **CLI:** `--browser.traceView.recordCanvas`
+- **Config:** [browser.traceView.recordCanvas](/config/browser/traceview#traceview-recordcanvas)
+
+Capture canvas pixels in trace-view snapshots (default: `false`)
+
+### browser.traceView.inlineImages
+
+- **CLI:** `--browser.traceView.inlineImages`
+- **Config:** [browser.traceView.inlineImages](/config/browser/traceview#traceview-inlineimages)
+
+Inline loaded image pixels in trace-view snapshots (default: `false`)
+
 ### browser.locators.exact
 
 - **CLI:** `--browser.locators.exact`
diff --git a/docs/public/browser/trace-view-dark.png b/docs/public/browser/trace-view-dark.png
new file mode 100644
index 000000000000..dd425a0853b7
Binary files /dev/null and b/docs/public/browser/trace-view-dark.png differ
diff --git a/docs/public/browser/trace-view-light.png b/docs/public/browser/trace-view-light.png
new file mode 100644
index 000000000000..7ad865045a27
Binary files /dev/null and b/docs/public/browser/trace-view-light.png differ
diff --git a/examples/lit/.gitignore b/examples/lit/.gitignore
index 5c8de7847e27..83951add4427 100644
--- a/examples/lit/.gitignore
+++ b/examples/lit/.gitignore
@@ -1,2 +1,3 @@
 __traces__
 __screenshots__
+html
diff --git a/packages/browser/package.json b/packages/browser/package.json
index 4c1555267aee..6b79763bc1a8 100644
--- a/packages/browser/package.json
+++ b/packages/browser/package.json
@@ -90,6 +90,7 @@
     "ivya": "^1.8.0",
     "mime": "^4.1.0",
     "pathe": "catalog:",
+    "rrweb-snapshot": "2.0.0-alpha.20",
     "vitest": "workspace:*"
   }
 }
diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts
index 5d230a8803d2..3c83622fc006 100644
--- a/packages/browser/src/client/tester/context.ts
+++ b/packages/browser/src/client/tester/context.ts
@@ -16,10 +16,12 @@ import type { StringifyOptions } from 'vitest/internal/browser'
 import type { IframeViewportEvent } from '../client'
 import type { BrowserRunnerState } from '../utils'
 import type { Locator as LocatorAPI } from './locators/index'
+import type { BrowserTraceEntryStatus } from './trace'
 import { vi } from 'vitest'
 import { __INTERNAL, stringify } from 'vitest/internal/browser'
-import { ensureAwaited, getBrowserState, getWorkerState } from '../utils'
+import { ensureAwaited, getBrowserState, getWorkerState, now } from '../utils'
 import { convertToSelector, isLocator, processTimeoutOptions, resolveUserEventWheelOptions } from './tester-utils'
+import { recordBrowserTraceEntry } from './trace'
 
 // this file should not import anything directly, only types and utils
 
@@ -361,9 +363,12 @@ export const page: BrowserPage = {
   ): any {
     const currentTest = getWorkerState().current
     const hasActiveTrace = !!currentTest && getBrowserState().activeTraceTaskIds.has(currentTest.id)
+    const hasActiveTraceView = !!currentTest && getBrowserState().browserTraceAttempts.has(currentTest.id)
 
     if (typeof bodyOrOptions === 'function') {
       return ensureAwaited(async (error) => {
+        let status: BrowserTraceEntryStatus = 'pass'
+        const startTime = now()
         if (hasActiveTrace) {
           await triggerCommand(
             '__vitest_groupTraceStart',
@@ -377,7 +382,22 @@ export const page: BrowserPage = {
         try {
           return await bodyOrOptions()
         }
+        catch (err) {
+          status = 'fail'
+          throw err
+        }
         finally {
+          if (hasActiveTraceView) {
+            // TODO: support nested trace
+            recordBrowserTraceEntry(currentTest, {
+              name,
+              kind: 'mark',
+              status,
+              startTime,
+              duration: now() - startTime,
+              stack: options?.stack ?? error?.stack,
+            })
+          }
           if (hasActiveTrace) {
             await triggerCommand('__vitest_groupTraceEnd', [], error)
           }
@@ -385,18 +405,30 @@ export const page: BrowserPage = {
       })
     }
 
-    if (!hasActiveTrace) {
+    if (!hasActiveTrace && !hasActiveTraceView) {
       return Promise.resolve()
     }
 
-    return ensureAwaited(error => triggerCommand(
-      '__vitest_markTrace',
-      [{
-        name,
-        stack: bodyOrOptions?.stack ?? error?.stack,
-      }],
-      error,
-    ))
+    return ensureAwaited((error) => {
+      if (hasActiveTraceView) {
+        recordBrowserTraceEntry(currentTest, {
+          name,
+          kind: 'mark',
+          stack: bodyOrOptions?.stack ?? error?.stack,
+        })
+      }
+      if (!hasActiveTrace) {
+        return Promise.resolve()
+      }
+      return triggerCommand(
+        '__vitest_markTrace',
+        [{
+          name,
+          stack: bodyOrOptions?.stack ?? error?.stack,
+        }],
+        error,
+      )
+    })
   },
   getByRole() {
     throw new Error(`Method "getByRole" is not supported by the "${provider}" provider.`)
diff --git a/packages/browser/src/client/tester/expect-element.ts b/packages/browser/src/client/tester/expect-element.ts
index 2876441361c2..5241bdcf16d0 100644
--- a/packages/browser/src/client/tester/expect-element.ts
+++ b/packages/browser/src/client/tester/expect-element.ts
@@ -1,11 +1,13 @@
 import type { Assertion, ExpectPollOptions, PromisifyDomAssertion } from 'vitest'
 import type { Locator } from 'vitest/browser'
+import type { BrowserTraceEntryStatus } from './trace'
 import { chai, expect } from 'vitest'
 import { getType } from 'vitest/internal/browser'
-import { getBrowserState, getWorkerState } from '../utils'
+import { getBrowserState, getWorkerState, now } from '../utils'
 import { ariaMatchers } from './aria'
 import { matchers } from './expect'
 import { processTimeoutOptions } from './tester-utils'
+import { recordBrowserTraceEntry } from './trace'
 
 const kLocator = Symbol.for('$$vitest:locator')
 
@@ -58,9 +60,12 @@ function element<T extends HTMLElement | SVGElement | null | Locator>(elementOrL
 
   // ask `expect.poll` to invoke trace after the assertion
   const currentTest = getWorkerState().current
-  if (currentTest && getBrowserState().activeTraceTaskIds.has(currentTest.id)) {
+  const hasActiveTrace = !!currentTest && getBrowserState().activeTraceTaskIds.has(currentTest.id)
+  const hasActiveTraceView = !!currentTest && getBrowserState().browserTraceAttempts.has(currentTest.id)
+  if (currentTest && (hasActiveTrace || hasActiveTraceView)) {
     const sourceError = new Error('__vitest_mark_trace__')
-    chai.util.flag(expectElement, '_poll.onSettled', async (meta: { assertion: Assertion; status: 'pass' | 'fail' }) => {
+    const startTime = now()
+    chai.util.flag(expectElement, '_poll.onSettled', async (meta: { assertion: Assertion; status: BrowserTraceEntryStatus }) => {
       const isNot = chai.util.flag(meta.assertion, 'negate')
       const name = chai.util.flag(meta.assertion, '_name') || '<unknown>'
       const baseName = `expect.element().${isNot ? 'not.' : ''}${name}`
@@ -68,15 +73,28 @@ function element<T extends HTMLElement | SVGElement | null | Locator>(elementOrL
       const selector = !elementOrLocator || elementOrLocator instanceof Element
         ? undefined
         : elementOrLocator.selector
-      await getBrowserState().commands.triggerCommand(
-        '__vitest_markTrace',
-        [{
+      if (hasActiveTraceView) {
+        recordBrowserTraceEntry(currentTest, {
           name: traceName,
+          kind: 'expect',
+          status: meta.status,
+          startTime,
+          duration: now() - startTime,
           selector,
           stack: sourceError.stack,
-        }],
-        sourceError,
-      )
+        })
+      }
+      if (hasActiveTrace) {
+        await getBrowserState().commands.triggerCommand(
+          '__vitest_markTrace',
+          [{
+            name: traceName,
+            selector,
+            stack: sourceError.stack,
+          }],
+          sourceError,
+        )
+      }
     })
   }
 
diff --git a/packages/browser/src/client/tester/locators/index.ts b/packages/browser/src/client/tester/locators/index.ts
index da5101efd953..75ebaea16e61 100644
--- a/packages/browser/src/client/tester/locators/index.ts
+++ b/packages/browser/src/client/tester/locators/index.ts
@@ -29,6 +29,7 @@ import { page, server, utils } from 'vitest/browser'
 import { __INTERNAL, getSafeTimers } from 'vitest/internal/browser'
 import { ensureAwaited, getBrowserState, getWorkerState } from '../../utils'
 import { escapeForTextSelector, isLocator, processTimeoutOptions, resolveUserEventWheelOptions } from '../tester-utils'
+import { recordBrowserTraceEntry } from '../trace'
 
 export { ensureAwaited } from '../../utils'
 export { convertElementToCssSelector, getIframeScale, processTimeoutOptions } from '../tester-utils'
@@ -68,6 +69,8 @@ export const selectorEngine: Ivya = Ivya.create({
   testIdAttribute: server.config.browser.locators.testIdAttribute,
 })
 
+getBrowserState().selectorEngine = selectorEngine
+
 const kLocator = Symbol.for('$$vitest:locator')
 
 export abstract class Locator {
@@ -204,18 +207,33 @@ export abstract class Locator {
 
   public mark(name: string, options?: MarkOptions): Promise<void> {
     const currentTest = getWorkerState().current
-    if (!currentTest || !getBrowserState().activeTraceTaskIds.has(currentTest.id)) {
+    const hasActiveTrace = !!currentTest && getBrowserState().activeTraceTaskIds.has(currentTest.id)
+    const hasActiveTraceView = !!currentTest && getBrowserState().browserTraceAttempts.has(currentTest.id)
+    if (!currentTest || (!hasActiveTrace && !hasActiveTraceView)) {
       return Promise.resolve()
     }
-    return ensureAwaited(error => getBrowserState().commands.triggerCommand<void>(
-      '__vitest_markTrace',
-      [{
-        name,
-        selector: this.selector,
-        stack: options?.stack ?? error?.stack,
-      }],
-      error,
-    ))
+    return ensureAwaited((error) => {
+      if (hasActiveTraceView) {
+        recordBrowserTraceEntry(currentTest, {
+          name,
+          kind: 'mark',
+          selector: this.selector,
+          stack: options?.stack ?? error?.stack,
+        })
+      }
+      if (!hasActiveTrace) {
+        return Promise.resolve()
+      }
+      return getBrowserState().commands.triggerCommand<void>(
+        '__vitest_markTrace',
+        [{
+          name,
+          selector: this.selector,
+          stack: options?.stack ?? error?.stack,
+        }],
+        error,
+      )
+    })
   }
 
   protected abstract locator(selector: string): Locator
diff --git a/packages/browser/src/client/tester/runner.ts b/packages/browser/src/client/tester/runner.ts
index 48dfe4dfe593..b8efbedfe212 100644
--- a/packages/browser/src/client/tester/runner.ts
+++ b/packages/browser/src/client/tester/runner.ts
@@ -28,9 +28,10 @@ import {
   takeCoverageInsideWorker,
 } from 'vitest/internal/browser'
 import { createStackString, parseStacktrace } from '../../../../utils/src/source-map'
-import { getBrowserState, getWorkerState, moduleRunner } from '../utils'
+import { getBrowserState, getWorkerState, moduleRunner, now } from '../utils'
 import { rpc } from './rpc'
 import { VitestBrowserSnapshotEnvironment } from './snapshot'
+import { getBrowserTrace, recordBrowserTraceEntry } from './trace'
 
 interface BrowserRunnerOptions {
   config: SerializedConfig
@@ -85,6 +86,19 @@ export function createBrowserRunner(
       const shouldTrace = trace !== 'off'
         && !(trace === 'on-all-retries' && retry === 0)
         && !(trace === 'on-first-retry' && retry !== 1)
+      const shouldTraceView = this.config.browser.traceView.enabled
+      if (!shouldTraceView && !shouldTrace) {
+        getBrowserState().activeTraceTaskIds.delete(test.id)
+        getBrowserState().browserTraceAttempts.delete(test.id)
+        return
+      }
+      if (shouldTraceView) {
+        getBrowserState().browserTraceDomSnapshot = await import('rrweb-snapshot')
+        getBrowserState().browserTraceAttempts.set(test.id, { retry, repeats, startTime: now() })
+      }
+      else {
+        getBrowserState().browserTraceAttempts.delete(test.id)
+      }
       if (!shouldTrace) {
         getBrowserState().activeTraceTaskIds.delete(test.id)
         return
@@ -106,7 +120,29 @@ export function createBrowserRunner(
     }
 
     onAfterRetryTask = async (test: Test, { retry, repeats }: { retry: number; repeats: number }) => {
-      if (!getBrowserState().activeTraceTaskIds.has(test.id)) {
+      const hasActiveTraceView = getBrowserState().browserTraceAttempts.has(test.id)
+      if (hasActiveTraceView) {
+        const status = test.result?.state
+        const stack = status === 'fail' ? test.result?.errors?.[0].stack : undefined
+        const location = test.location ? { ...test.location, file: test.file.filepath } : undefined
+        recordBrowserTraceEntry(test, {
+          name: `vitest:onAfterRetryTask [${status}]`,
+          kind: 'lifecycle',
+          ...(status === 'pass' || status === 'fail' ? { status } : {}),
+          ...(stack ? { stack } : location ? { location } : {}),
+        })
+        // TODO: model the same retention mechanism as playwright e.g. retain-on-failure
+        const traceData = getBrowserTrace(test.id, repeats, retry)
+        if (traceData) {
+          await this.commands.triggerCommand(
+            '__vitest_recordBrowserTrace',
+            [{ testId: test.id, data: traceData }],
+          )
+        }
+        getBrowserState().browserTraceAttempts.delete(test.id)
+      }
+      const hasActiveTrace = getBrowserState().activeTraceTaskIds.has(test.id)
+      if (!hasActiveTrace) {
         return
       }
       await this.commands.triggerCommand('__vitest_markTrace', [{
@@ -143,7 +179,6 @@ export function createBrowserRunner(
           )
         }
       }
-
       if (this.config.bail && task.result?.state === 'fail') {
         const previousFailures = await rpc().getCountOfFailedTests()
         const currentFailures = 1 + previousFailures
diff --git a/packages/browser/src/client/tester/tester-utils.ts b/packages/browser/src/client/tester/tester-utils.ts
index a32a52fad9d9..3072f9de9232 100644
--- a/packages/browser/src/client/tester/tester-utils.ts
+++ b/packages/browser/src/client/tester/tester-utils.ts
@@ -1,6 +1,8 @@
 import type { Locator, SelectorOptions, UserEventWheelDeltaOptions, UserEventWheelOptions } from 'vitest/browser'
 import type { BrowserRPC } from '../client'
-import { getBrowserState, getWorkerState } from '../utils'
+import type { BrowserTraceEntryStatus } from './trace'
+import { getBrowserState, getWorkerState, now } from '../utils'
+import { recordBrowserTraceEntry } from './trace'
 
 /* @__NO_SIDE_EFFECTS__ */
 export function convertElementToCssSelector(element: Element): string {
@@ -132,11 +134,16 @@ export class CommandsManager {
     const filepath = state.filepath || state.current?.file?.filepath
     args = args.filter(arg => arg !== undefined) // remove optional fields
 
-    const actionTraceGroupName = ACTION_TRACE_COMMANDS.has(command) ? command : undefined
+    const actionTraceGroupName = ACTION_TRACE_COMMANDS.has(command)
+      ? `vitest:${command.slice('__vitest_'.length)}`
+      : undefined
     const currentTest = getWorkerState().current
-    const shouldMarkTrace = actionTraceGroupName
+    const hasActiveTrace = !!actionTraceGroupName
       && !!currentTest
       && getBrowserState().activeTraceTaskIds.has(currentTest.id)
+    const hasActiveTraceView = !!actionTraceGroupName
+      && !!currentTest
+      && getBrowserState().browserTraceAttempts.has(currentTest.id)
 
     if (this._listeners.length) {
       await Promise.all(this._listeners.map(listener => listener(command, args)))
@@ -150,7 +157,7 @@ export class CommandsManager {
         },
       },
       async () => {
-        if (shouldMarkTrace) {
+        if (hasActiveTrace) {
           await rpc.triggerCommand<void>(
             sessionId,
             '__vitest_groupTraceStart',
@@ -161,10 +168,13 @@ export class CommandsManager {
             }],
           )
         }
+        let status: BrowserTraceEntryStatus = 'pass'
+        const startTime = now()
         try {
           return await rpc.triggerCommand<T>(sessionId, command, filepath, args)
         }
         catch (err: any) {
+          status = 'fail'
           // rethrow an error to keep the stack trace in browser
           clientError.message = err.message
           clientError.name = err.name
@@ -172,7 +182,18 @@ export class CommandsManager {
           throw clientError
         }
         finally {
-          if (shouldMarkTrace) {
+          if (hasActiveTraceView) {
+            recordBrowserTraceEntry(currentTest, {
+              name: actionTraceGroupName,
+              kind: 'action',
+              status,
+              startTime,
+              duration: now() - startTime,
+              selector: typeof args[0] === 'string' ? args[0] : undefined,
+              stack: clientError.stack,
+            })
+          }
+          if (hasActiveTrace) {
             await rpc.triggerCommand<void>(
               sessionId,
               '__vitest_groupTraceEnd',
@@ -186,10 +207,6 @@ export class CommandsManager {
   }
 }
 
-const now = globalThis.performance
-  ? globalThis.performance.now.bind(globalThis.performance)
-  : Date.now
-
 export function processTimeoutOptions<T extends { timeout?: number }>(options_: T | undefined): T | undefined {
   if (
     // if timeout is set, keep it
diff --git a/packages/browser/src/client/tester/tester.ts b/packages/browser/src/client/tester/tester.ts
index 43a6b999f8aa..691bd7225405 100644
--- a/packages/browser/src/client/tester/tester.ts
+++ b/packages/browser/src/client/tester/tester.ts
@@ -109,6 +109,7 @@ const iframeId = url.searchParams.get('iframeId')!
 const commands = new CommandsManager()
 getBrowserState().commands = commands
 getBrowserState().activeTraceTaskIds = new Set()
+getBrowserState().browserTraceAttempts = new Map()
 getBrowserState().iframeId = iframeId
 
 let contextSwitched = false
diff --git a/packages/browser/src/client/tester/trace.ts b/packages/browser/src/client/tester/trace.ts
new file mode 100644
index 000000000000..4358b031217e
--- /dev/null
+++ b/packages/browser/src/client/tester/trace.ts
@@ -0,0 +1,158 @@
+import type { Task } from '@vitest/runner'
+import { getBrowserState, now } from '../utils'
+
+export interface BrowserTraceData {
+  retry: number
+  repeats: number
+  recordCanvas: boolean
+  entries: BrowserTraceEntry[]
+}
+
+export type BrowserTraceEntryKind = 'action' | 'expect' | 'mark' | 'lifecycle'
+export type BrowserTraceEntryStatus = 'pass' | 'fail'
+export type BrowserTraceSelectorResolution = 'matched' | 'missing' | 'error'
+
+export interface BrowserTraceEntry {
+  name: string
+  // not used yet for UI but tested
+  kind: BrowserTraceEntryKind
+  status?: BrowserTraceEntryStatus
+  startTime: number
+  duration?: number
+  stack?: string
+  // resolved server-side from stack in __vitest_recordBrowserTrace command
+  location?: { file: string; line: number; column: number }
+  selector?: string
+  snapshot: TraceSnapshot
+}
+
+interface TraceSnapshot {
+  serialized: unknown
+  viewport: {
+    width: number
+    height: number
+  }
+  scroll: {
+    x: number
+    y: number
+  }
+  selectorId?: number
+  // not used yet for UI but tested
+  selectorResolution?: BrowserTraceSelectorResolution
+  selectorError?: string
+}
+
+export type BrowserTraceState = Record<string, BrowserTraceData>
+
+export interface BrowserTraceAttempt {
+  retry: number
+  repeats: number
+  startTime: number
+}
+
+function getBrowserTraceState(): BrowserTraceState {
+  return getBrowserState().browserTraceState ??= {}
+}
+
+function getTraceStateKey(testId: string, repeats: number, retry: number) {
+  return `${testId}:${repeats}:${retry}`
+}
+
+// TODO: should we avoid accumulating? send and immediately clear each entry to save memory?
+export function recordBrowserTraceEntry(
+  task: Task,
+  options: Omit<BrowserTraceEntry, 'snapshot' | 'startTime'> & {
+    startTime?: number
+  },
+): void {
+  // TODO: trace-view currently receives selectors after locator/action resolution,
+  // so provider-specific lowered selectors can leak into snapshot lookup. Preserve
+  // the original locator selector, or record the target node id before lowering.
+  // for example, this causes shadow dom selectors to fail with `>>>` marker.
+  // For now, remove trivial `html >` prefix generated by convertElementToCssSelector.
+  // this is also necessary to `engine.querySelector + document.documentElement`
+  // to find an element on webdriverio
+  if (options.selector?.startsWith('html >')) {
+    options.selector = options.selector.slice(6)
+  }
+  const attemptInfo = getBrowserState().browserTraceAttempts.get(task.id)!
+  const relativeStartTime = (options.startTime ?? now()) - attemptInfo.startTime
+  const snapshot = takeSnapshot(options.selector)
+  const entry: BrowserTraceEntry = {
+    ...options,
+    startTime: relativeStartTime,
+    snapshot,
+  }
+  const { retry, repeats } = attemptInfo
+  const { recordCanvas } = getBrowserState().config.browser.traceView
+  const state = getBrowserTraceState()
+  const traceKey = getTraceStateKey(task.id, repeats, retry)
+  state[traceKey] ??= { retry, repeats, recordCanvas, entries: [] }
+  state[traceKey].entries.push(entry)
+}
+
+// Resolve ivya selector to a DOM element and take a snapshot with rrweb Mirror
+// so we can store the nodeId for provider-agnostic element highlighting in the viewer.
+// Note: Playwright's alternative approach is to store the raw selector and run the
+// selector engine inside the snapshot iframe at view time via injected script.
+// Our approach resolves at collection time (same moment as snapshot) — simpler but
+// requires Mirror plumbing. nodeId-based lookup also works across shadow DOM, unlike querySelector.
+function takeSnapshot(selector?: string): TraceSnapshot {
+  const { snapshot, createMirror } = getBrowserState().browserTraceDomSnapshot!
+  const traceView = getBrowserState().config.browser.traceView
+  const engine = getBrowserState().selectorEngine!
+  const mirror = createMirror()
+  const serialized = snapshot(document, {
+    mirror,
+    inlineImages: traceView.inlineImages,
+    recordCanvas: traceView.recordCanvas,
+  })
+  const result: TraceSnapshot = {
+    serialized,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    },
+    scroll: {
+      x: window.scrollX,
+      y: window.scrollY,
+    },
+  }
+  if (selector) {
+    try {
+      const el = engine.querySelector(
+        engine.parseSelector(selector),
+        document.documentElement,
+        false,
+      )
+      if (!el) {
+        result.selectorResolution = 'missing'
+      }
+      else {
+        const id = mirror.getId(el)
+        if (id !== -1) {
+          result.selectorId = id
+          result.selectorResolution = 'matched'
+        }
+        else {
+          result.selectorResolution = 'missing'
+        }
+      }
+    }
+    catch (error) {
+      result.selectorResolution = 'error'
+      result.selectorError = error instanceof Error ? error.message : String(error)
+    }
+  }
+  return result
+}
+
+export function getBrowserTrace(testId: string, repeats: number, retry: number): BrowserTraceData | undefined {
+  const state = getBrowserTraceState()
+  const traceKey = getTraceStateKey(testId, repeats, retry)
+  const result = state[traceKey]
+  if (result) {
+    delete state[traceKey]
+    return result
+  }
+}
diff --git a/packages/browser/src/client/utils.ts b/packages/browser/src/client/utils.ts
index 2091f614fc17..bdff966f5382 100644
--- a/packages/browser/src/client/utils.ts
+++ b/packages/browser/src/client/utils.ts
@@ -1,8 +1,10 @@
 import type { VitestRunner } from '@vitest/runner'
+import type { Ivya } from 'ivya'
 import type { SerializedConfig, WorkerGlobalState } from 'vitest'
 import type { OTELCarrier, Traces } from 'vitest/internal/browser'
 import type { IframeOrchestrator } from './orchestrator'
 import type { CommandsManager } from './tester/tester-utils'
+import type { BrowserTraceAttempt, BrowserTraceState } from './tester/trace'
 
 export async function importId(id: string): Promise<any> {
   const name = `/@id/${id}`.replace(/\\/g, '/')
@@ -25,6 +27,10 @@ export const moduleRunner = {
   },
 }
 
+export const now: () => number = globalThis.performance
+  ? globalThis.performance.now.bind(globalThis.performance)
+  : Date.now
+
 export function getConfig(): SerializedConfig {
   return getBrowserState().config
 }
@@ -65,6 +71,10 @@ export function ensureAwaited<T>(promise: (error?: Error) => Promise<T>): Promis
   } satisfies Promise<T>
 }
 
+// This object is the shared runtime bus for browser artifacts loaded into the
+// same page. Some browser code is built and served as independent bundles, so
+// getBrowserState() is the API they use to share runtime state instead of
+// relying on imports resolving to the same module instance.
 export interface BrowserRunnerState {
   files: string[]
   runningFiles: string[]
@@ -86,6 +96,11 @@ export interface BrowserRunnerState {
   orchestrator?: IframeOrchestrator
   commands: CommandsManager
   activeTraceTaskIds: Set<string>
+  browserTraceAttempts: Map<string, BrowserTraceAttempt>
+  // lazily loaded only when traceView is enabled
+  browserTraceDomSnapshot?: typeof import('rrweb-snapshot')
+  browserTraceState?: BrowserTraceState
+  selectorEngine: Ivya
   traces: Traces
   cleanups: Array<() => unknown>
   cdp?: {
diff --git a/packages/browser/src/node/commands/index.ts b/packages/browser/src/node/commands/index.ts
index d56c5765cd6c..21bbe8a367dc 100644
--- a/packages/browser/src/node/commands/index.ts
+++ b/packages/browser/src/node/commands/index.ts
@@ -6,7 +6,7 @@ import {
 } from './fs'
 import { screenshot } from './screenshot'
 import { screenshotMatcher } from './screenshotMatcher'
-import { _groupTraceEnd, _groupTraceStart, _markTrace } from './trace'
+import { _groupTraceEnd, _groupTraceStart, _markTrace, _recordBrowserTrace } from './trace'
 
 export default {
   readFile: readFile as typeof readFile,
@@ -16,6 +16,7 @@ export default {
   __vitest_markTrace: _markTrace as typeof _markTrace,
   __vitest_groupTraceStart: _groupTraceStart as typeof _groupTraceStart,
   __vitest_groupTraceEnd: _groupTraceEnd as typeof _groupTraceEnd,
+  __vitest_recordBrowserTrace: _recordBrowserTrace as typeof _recordBrowserTrace,
   __vitest_fileInfo: _fileInfo as typeof _fileInfo,
   __vitest_screenshot: screenshot as typeof screenshot,
   __vitest_screenshotMatcher: screenshotMatcher as typeof screenshotMatcher,
diff --git a/packages/browser/src/node/commands/trace.ts b/packages/browser/src/node/commands/trace.ts
index 7ae8525980de..6ba31c0feb94 100644
--- a/packages/browser/src/node/commands/trace.ts
+++ b/packages/browser/src/node/commands/trace.ts
@@ -1,4 +1,5 @@
 import type { BrowserCommand } from 'vitest/node'
+import type { BrowserTraceData, BrowserTraceEntry } from '../../client/tester/trace'
 
 interface MarkTracePayload {
   name: string
@@ -25,6 +26,10 @@ declare module 'vitest/browser' {
      * @internal
      */
     __vitest_groupTraceEnd: () => Promise<void>
+    /**
+     * @internal
+     */
+    __vitest_recordBrowserTrace: (payload: { testId: string; data: BrowserTraceData }) => Promise<void>
   }
 }
 
@@ -53,3 +58,24 @@ export const _groupTraceEnd: BrowserCommand<[]> = async (
     await context.triggerCommand('__vitest_groupTraceEnd')
   }
 }
+
+export const _recordBrowserTrace: BrowserCommand<[payload: { testId: string; data: BrowserTraceData }]> = async (
+  { project },
+  { testId, data },
+) => {
+  // resolve stack strings → source locations server-side (requires source maps)
+  const entries: BrowserTraceEntry[] = data.entries.map((entry) => {
+    if (!entry.stack || entry.location) {
+      return entry
+    }
+    const stacks = project.browser!.parseStacktrace(entry.stack)
+    if (stacks[0]) {
+      entry.location = stacks[0]
+    }
+    return entry
+  })
+  await project.vitest._testRun.recordArtifact(testId, {
+    type: 'internal:browserTrace',
+    data: { ...data, entries },
+  })
+}
diff --git a/packages/runner/src/types.ts b/packages/runner/src/types.ts
index 4b79bd876afa..3876feec10c7 100644
--- a/packages/runner/src/types.ts
+++ b/packages/runner/src/types.ts
@@ -14,6 +14,7 @@ export type {
   AroundEachListener,
   BeforeAllListener,
   BeforeEachListener,
+  BrowserTraceArtifact,
   FailureScreenshotArtifact,
   File,
   Fixture,
diff --git a/packages/runner/src/types/tasks.ts b/packages/runner/src/types/tasks.ts
index b30e04b015b4..98218623016e 100644
--- a/packages/runner/src/types/tasks.ts
+++ b/packages/runner/src/types/tasks.ts
@@ -1358,6 +1358,15 @@ export interface VisualRegressionArtifact extends TestArtifactBase {
   attachments: VisualRegressionArtifactAttachment[]
 }
 
+/**
+ * @experimental
+ */
+export interface BrowserTraceArtifact extends TestArtifactBase {
+  type: 'internal:browserTrace'
+  // TODO: should save a dedicated file/binary as attachments?
+  data: unknown
+}
+
 interface FailureScreenshotArtifactAttachment extends TestAttachment {
   path: string
   /** Original file system path to the screenshot, before attachment resolution */
@@ -1457,7 +1466,8 @@ export interface TestArtifactRegistry {}
  * This type automatically includes all artifacts registered via {@link TestArtifactRegistry}.
  */
 export type TestArtifact
-  = | FailureScreenshotArtifact
+  = | BrowserTraceArtifact
+    | FailureScreenshotArtifact
     | TestAnnotationArtifact
     | VisualRegressionArtifact
     | TestArtifactRegistry[keyof TestArtifactRegistry]
diff --git a/packages/ui/client/components/artifacts/Artifacts.vue b/packages/ui/client/components/artifacts/Artifacts.vue
index 4dc1da6f389f..3990eefc2673 100644
--- a/packages/ui/client/components/artifacts/Artifacts.vue
+++ b/packages/ui/client/components/artifacts/Artifacts.vue
@@ -3,11 +3,12 @@ import type { RunnerTestCase, TestArtifact } from 'vitest'
 import type { Component } from 'vue'
 import { computed } from 'vue'
 import { getLocationString, openLocation } from '~/composables/location'
+import TraceArtifactLauncher from '../trace/TraceArtifactLauncher.vue'
 import VisualRegression from './visual-regression/VisualRegression.vue'
 
 const { test } = defineProps<{ test: RunnerTestCase }>()
 
-interface HandledArtifact { artifact: TestArtifact; component: Component; props: object }
+interface HandledArtifact { artifact: TestArtifact; component?: Component; props: object }
 
 type ComponentProps<T> = T extends new(...args: any) => { $props: infer P } ? NonNullable<P>
   : T extends (props: infer P, ...args: any) => any ? P
@@ -18,6 +19,14 @@ const handledArtifacts = computed<readonly HandledArtifact[]>(() => {
 
   for (const artifact of test.artifacts) {
     switch (artifact.type) {
+      case 'internal:browserTrace': {
+        handledArtifacts.push({
+          artifact,
+          component: TraceArtifactLauncher,
+          props: { trace: artifact, test } satisfies ComponentProps<typeof TraceArtifactLauncher>,
+        })
+        continue
+      }
       case 'internal:toMatchScreenshot': {
         if (artifact.kind === 'visual-regression') {
           handledArtifacts.push({
diff --git a/packages/ui/client/components/dashboard/TestsEntry.vue b/packages/ui/client/components/dashboard/TestsEntry.vue
index f21411033328..032bf28125d1 100644
--- a/packages/ui/client/components/dashboard/TestsEntry.vue
+++ b/packages/ui/client/components/dashboard/TestsEntry.vue
@@ -19,7 +19,7 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'slow' | 'total')
 </script>
 
 <template>
-  <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative>
+  <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative data-testid="tests-entry">
     <DashboardEntry
       text-green-700 dark:text-green-500
       data-testid="pass-entry"
diff --git a/packages/ui/client/components/trace/TraceArtifactLauncher.vue b/packages/ui/client/components/trace/TraceArtifactLauncher.vue
new file mode 100644
index 000000000000..8aa332fe3b79
--- /dev/null
+++ b/packages/ui/client/components/trace/TraceArtifactLauncher.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { BrowserTraceArtifact } from '@vitest/runner'
+import type { RunnerTestCase } from 'vitest'
+import type { BrowserTraceData } from '../../../../browser/src/client/tester/trace'
+import { openTrace } from '~/composables/trace-view'
+
+defineProps<{
+  trace: BrowserTraceArtifact
+  test: RunnerTestCase
+}>()
+
+function getAttemptLabel(trace: BrowserTraceData) {
+  const parts: string[] = []
+  if (trace.retry) {
+    parts.push(`Retry ${trace.retry}`)
+  }
+  if (trace.repeats) {
+    parts.push(`Repeat ${trace.repeats}`)
+  }
+  return parts.join(' / ')
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex items-center gap-2 rounded px-2 py-1 hover:bg-yellow-500/10"
+    @click="openTrace(trace, test)"
+  >
+    <span class="i-carbon:play-outline block" />
+    Open trace viewer
+    <span v-if="getAttemptLabel(trace.data as BrowserTraceData)" class="text-xs opacity-70">
+      {{ getAttemptLabel(trace.data as BrowserTraceData) }}
+    </span>
+  </button>
+</template>
diff --git a/packages/ui/client/components/trace/TraceView.vue b/packages/ui/client/components/trace/TraceView.vue
new file mode 100644
index 000000000000..1c1b83515076
--- /dev/null
+++ b/packages/ui/client/components/trace/TraceView.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { BrowserTraceArtifact } from '@vitest/runner'
+import type { RunnerTestCase } from 'vitest'
+import type { BrowserTraceData, BrowserTraceEntry } from '../../../../browser/src/client/tester/trace'
+import { createCache, createMirror, rebuild } from 'rrweb-snapshot'
+// @ts-expect-error missing types
+import { Pane, Splitpanes } from 'splitpanes'
+import { computed, ref, watch } from 'vue'
+import { getLocationString, openLocation } from '~/composables/location'
+import { selectedTraceStepIndex } from '~/composables/trace-view'
+
+// TODO: review slop (NEVER REMOVE COMMENT)
+// - make it unit-testable for better iteration
+
+const props = defineProps<{
+  trace: BrowserTraceArtifact
+  test: RunnerTestCase
+}>()
+
+const traceData = computed(() => props.trace.data as BrowserTraceData)
+const entries = computed(() => traceData.value.entries)
+const selectedStep = computed(() => entries.value[selectedTraceStepIndex.value])
+const iframeSandbox = computed(() => {
+  // Canvas replay needs scripts for rrweb's image.onload -> drawImage path,
+  // but allow-same-origin + allow-scripts gives replayed app HTML more capability.
+  return traceData.value.recordCanvas ? 'allow-same-origin allow-scripts' : 'allow-same-origin'
+})
+const iframeEl = ref<HTMLIFrameElement>()
+
+function getStepButtonClass(step: BrowserTraceEntry, index: number) {
+  const selected = selectedTraceStepIndex.value === index
+  if (step.status === 'fail') {
+    return selected
+      ? 'bg-red-500/20 text-red-600 dark:text-red-400'
+      : 'text-red-600 hover:bg-red-500/10 dark:text-red-400'
+  }
+  return selected ? 'bg-blue-500/20' : 'hover:bg-gray/10'
+}
+
+function formatTraceTime(ms: number) {
+  return ms < 1000
+    ? `${Math.round(ms)}ms`
+    : `${(ms / 1000).toFixed(1)}s`
+}
+
+function formatTraceTiming(step: BrowserTraceEntry) {
+  const startTime = `+${formatTraceTime(step.startTime)}`
+  return step.duration == null
+    ? startTime
+    : `${startTime} · ${formatTraceTime(step.duration)}`
+}
+
+function onSelectStep(index: number) {
+  selectedTraceStepIndex.value = index
+  const step = entries.value[index]
+  if (step?.location) {
+    openLocation(props.test, step.location)
+  }
+}
+
+watch([selectedStep, iframeEl], ([step, iframe]) => {
+  if (!step || !iframe) {
+    return
+  }
+  const { serialized, selectorId, viewport, scroll } = step.snapshot
+  iframe.style.width = `${viewport.width}px`
+  iframe.style.height = `${viewport.height}px`
+  // Rebuild snapshot into iframe contentDocument — pattern from rrweb replayer:
+  // https://github.com/rrweb-io/rrweb/blob/master/packages/rrweb/src/replay/index.ts
+  // doc.open/close resets the iframe document to a blank state before rebuild.
+  // Unlike Playwright which serves snapshots via HTTP, this is fully client-side
+  // but external resources (images, stylesheets) won't load without a server.
+  const doc = iframe.contentDocument!
+  doc.open()
+  doc.close()
+  const mirror = createMirror()
+  rebuild(serialized, {
+    doc,
+    cache: createCache(),
+    mirror,
+  })
+  iframe.contentWindow!.scrollTo(scroll?.x ?? 0, scroll?.y ?? 0)
+  if (selectorId != null) {
+    const el = mirror.getNode(selectorId)
+    if (el) {
+      // Overlay highlight technique adapted from Playwright's highlight.ts:
+      // https://github.com/microsoft/playwright/blob/main/packages/injected/src/highlight.ts
+      // getBoundingClientRect() gives viewport-relative coords; position:fixed overlay matches.
+      // Simplified version: no shadow DOM glass pane, no tooltip.
+      iframe.contentWindow!.requestAnimationFrame(() => {
+        const rect = (el as Element).getBoundingClientRect()
+        const overlay = doc.createElement('div')
+        overlay.setAttribute('data-testid', 'trace-view-highlight')
+        overlay.style.cssText = `
+          position: fixed;
+          pointer-events: none;
+          z-index: 2147483647;
+          left: ${rect.left}px;
+          top: ${rect.top}px;
+          width: ${rect.width}px;
+          height: ${rect.height}px;
+          background: rgba(59, 130, 246, 0.15);
+          border: 2px solid #3b82f6;
+          box-sizing: border-box;
+        `
+        doc.documentElement.appendChild(overlay)
+      })
+    }
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <Splitpanes
+    class="h-full min-h-0"
+    data-testid="trace-view"
+  >
+    <Pane :size="30" min-size="20">
+      <div class="h-full min-h-0 p-4" flex="~ col gap-1" overflow-auto>
+        <button
+          v-for="(step, index) of entries"
+          :key="index"
+          type="button"
+          class="text-left px-2 py-1 rounded text-sm"
+          :class="getStepButtonClass(step, index)"
+          @click="onSelectStep(index)"
+        >
+          <div truncate>
+            {{ step.name }}
+          </div>
+          <div class="text-xs opacity-60 truncate">
+            {{ formatTraceTiming(step) }}
+          </div>
+          <div
+            v-if="step.selector"
+            class="font-mono text-xs opacity-70 truncate"
+          >
+            {{ step.selector }}
+          </div>
+          <div
+            v-if="step.location"
+            class="text-xs opacity-50 truncate"
+          >
+            {{ getLocationString(step.location) }}
+          </div>
+        </button>
+      </div>
+    </Pane>
+    <Pane :size="70" min-size="20">
+      <div class="h-full min-h-0" flex="~ col" overflow-auto>
+        <iframe
+          v-if="selectedStep"
+          ref="iframeEl"
+          :key="iframeSandbox"
+          :sandbox="iframeSandbox"
+          style="background: white; border: none; color-scheme: normal; flex: none"
+        />
+        <div v-else class="text-sm opacity-50 p-4">
+          No trace step selected.
+        </div>
+      </div>
+    </Pane>
+  </Splitpanes>
+</template>
diff --git a/packages/ui/client/components/trace/TraceViewPane.vue b/packages/ui/client/components/trace/TraceViewPane.vue
new file mode 100644
index 000000000000..ab34a51d16e0
--- /dev/null
+++ b/packages/ui/client/components/trace/TraceViewPane.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { BrowserTraceArtifact } from '@vitest/runner'
+import type { RunnerTestCase } from 'vitest'
+import type { BrowserTraceData } from '../../../../browser/src/client/tester/trace'
+import IconButton from '~/components/IconButton.vue'
+import { getLocationString, openLocation } from '~/composables/location'
+import { closeTrace } from '~/composables/trace-view'
+import TraceView from './TraceView.vue'
+
+const props = defineProps<{
+  trace: BrowserTraceArtifact
+  test: RunnerTestCase
+}>()
+
+// TODO: review slop (NEVER REMOVE COMMENT)
+function getAttemptLabel(trace: BrowserTraceData) {
+  const parts: string[] = []
+  if (trace.retry) {
+    parts.push(`Retry ${trace.retry}`)
+  }
+  if (trace.repeats) {
+    parts.push(`Repeat ${trace.repeats}`)
+  }
+  return parts.join(' / ')
+}
+</script>
+
+<template>
+  <div h-full min-h-0 flex="~ col">
+    <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
+      <div class="i-carbon:data-vis-4" />
+      <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Trace Viewer</span>
+      <span
+        v-if="getAttemptLabel(props.trace.data as BrowserTraceData)"
+        class="text-xs opacity-70"
+      >
+        {{ getAttemptLabel(props.trace.data as BrowserTraceData) }}
+      </span>
+      <button
+        v-if="props.trace.location"
+        type="button"
+        class="text-xs opacity-70 truncate hover:opacity-100"
+        @click="openLocation(props.test, props.trace.location)"
+      >
+        {{ getLocationString(props.trace.location) }}
+      </button>
+      <IconButton
+        v-tooltip.bottom="'Close Trace Viewer'"
+        title="Close Trace Viewer"
+        icon="i-carbon:close"
+        @click="closeTrace()"
+      />
+    </div>
+    <TraceView
+      :trace="props.trace"
+      :test="props.test"
+    />
+  </div>
+</template>
diff --git a/packages/ui/client/composables/trace-view.ts b/packages/ui/client/composables/trace-view.ts
new file mode 100644
index 000000000000..cea8f42ded50
--- /dev/null
+++ b/packages/ui/client/composables/trace-view.ts
@@ -0,0 +1,61 @@
+import type { BrowserTraceArtifact } from '@vitest/runner'
+import type { RunnerTestCase } from 'vitest'
+import { ref, watch } from 'vue'
+import { browserState, client, config } from './client'
+import { detailsPosition } from './navigation'
+import { selectedTest } from './params'
+
+// TODO: review slop (NEVER REMOVE COMMENT)
+
+export const activeTrace = ref<BrowserTraceArtifact>()
+export const activeTraceTest = ref<RunnerTestCase>()
+export const selectedTraceStepIndex = ref(0)
+
+export function openTrace(trace: BrowserTraceArtifact, test: RunnerTestCase) {
+  detailsPosition.value = 'bottom'
+  activeTrace.value = trace
+  activeTraceTest.value = test
+  selectedTraceStepIndex.value = 0
+}
+
+export function closeTrace() {
+  activeTrace.value = undefined
+  activeTraceTest.value = undefined
+  selectedTraceStepIndex.value = 0
+}
+
+function openTraceForTest(testId: string) {
+  // skip if already open
+  if (activeTraceTest.value?.id === testId && activeTrace.value) {
+    return
+  }
+
+  const test = client.state.idMap.get(testId)
+  if (test?.type !== 'test') {
+    return
+  }
+
+  const projectName = test.file.projectName || ''
+  const project = config.value.projects?.find(project => project.name === projectName)
+  const traceView
+    = browserState?.config.browser?.traceView
+      ?? project?.browser.traceView
+      ?? config.value.browser?.traceView
+  if (traceView?.enabled) {
+    const trace = test.artifacts.find((artifact): artifact is BrowserTraceArtifact => artifact.type === 'internal:browserTrace')
+    if (trace) {
+      openTrace(trace, test)
+    }
+  }
+}
+
+// sync with selected test / url navigation
+watch(selectedTest, (testId) => {
+  if (!testId || activeTraceTest.value?.id !== testId) {
+    closeTrace()
+  }
+  // auto-open trace view
+  if (testId) {
+    openTraceForTest(testId)
+  }
+})
diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue
index 060da4dbbac7..0e0b2d8d1550 100644
--- a/packages/ui/client/pages/index.vue
+++ b/packages/ui/client/pages/index.vue
@@ -2,6 +2,7 @@
 import { useDebounceFn } from '@vueuse/core'
 // @ts-expect-error missing types
 import { Pane, Splitpanes } from 'splitpanes'
+import { computed } from 'vue'
 import BrowserIframe from '~/components/BrowserIframe.vue'
 import ClosedDetailsHeader from '~/components/ClosedDetailsHeader.vue'
 import ConnectionOverlay from '~/components/ConnectionOverlay.vue'
@@ -10,6 +11,7 @@ import Dashboard from '~/components/Dashboard.vue'
 import FileDetails from '~/components/FileDetails.vue'
 import Navigation from '~/components/Navigation.vue'
 import ProgressBar from '~/components/ProgressBar.vue'
+import TraceViewPane from '~/components/trace/TraceViewPane.vue'
 import { browserState } from '~/composables/client'
 import {
   coverageVisible,
@@ -20,8 +22,10 @@ import {
   mainSizes,
   panels,
 } from '~/composables/navigation'
+import { activeTrace, activeTraceTest } from '~/composables/trace-view'
 
 const dashboardVisible = initializeNavigation()
+const showTracePane = computed(() => !!activeTrace.value && !!activeTraceTest.value)
 
 const onBrowserPanelResizing = useDebounceFn(({ panes }: { panes: { size: number }[] }) => {
   // don't trigger events in the iframe while resizing
@@ -91,7 +95,7 @@ function allowBrowserEvents() {
         <Navigation />
       </Pane>
       <Pane :size="mainSizes[1]">
-        <transition v-if="!browserState" key="ui-detail">
+        <transition v-if="!browserState && !showTracePane" key="ui-detail">
           <Dashboard v-if="dashboardVisible" key="summary" />
           <Coverage
             v-else-if="coverageVisible"
@@ -113,7 +117,29 @@ function allowBrowserEvents() {
               @resized="onModuleResized"
             >
               <Pane :size="detailSizes[0]" min-size="10">
-                <BrowserIframe v-once />
+                <template v-if="browserState">
+                  <Splitpanes
+                    v-if="browserState.config.browser?.traceView.enabled"
+                    class="h-full"
+                    :horizontal="detailsPosition === 'right'"
+                  >
+                    <Pane :size="showTracePane ? 55 : 100" min-size="10">
+                      <BrowserIframe v-once />
+                    </Pane>
+                    <Pane v-if="showTracePane" size="45" min-size="10">
+                      <TraceViewPane
+                        :trace="activeTrace!"
+                        :test="activeTraceTest!"
+                      />
+                    </Pane>
+                  </Splitpanes>
+                  <BrowserIframe v-else v-once />
+                </template>
+                <TraceViewPane
+                  v-else-if="showTracePane"
+                  :trace="activeTrace!"
+                  :test="activeTraceTest!"
+                />
               </Pane>
               <Pane
                 v-if="detailsPanelVisible"
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f6b67018534f..bfb35fa582e6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -72,6 +72,8 @@
     "@unocss/reset": "catalog:",
     "@vitejs/plugin-vue": "catalog:",
     "@vitest/browser-playwright": "workspace:*",
+    "@vitest/browser-preview": "workspace:*",
+    "@vitest/browser-webdriverio": "workspace:*",
     "@vitest/runner": "workspace:*",
     "@vitest/ws-client": "workspace:*",
     "@vue/test-utils": "^2.4.6",
@@ -84,6 +86,7 @@
     "floating-vue": "^5.2.2",
     "mime": "^4.1.0",
     "rollup": "^4.59.0",
+    "rrweb-snapshot": "2.0.0-alpha.20",
     "splitpanes": "^4.0.4",
     "typescript": "^5.9.3",
     "unocss": "catalog:",
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index 445b810c48e4..7a7a6562e9bf 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -1,22 +1,45 @@
 import { playwright } from '@vitest/browser-playwright'
+import { preview } from '@vitest/browser-preview'
+import { webdriverio } from '@vitest/browser-webdriverio'
 import { mergeConfig } from 'vite'
 import { defineConfig } from 'vitest/config'
 import viteConfig from './vite.config'
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    optimizeDeps: {
-      include: ['vue-router', 'splitpanes', 'd3-graph-controller', 'vue-virtual-scroller'],
-    },
-    test: {
-      browser: {
-        enabled: true,
-        provider: playwright({
-          actionTimeout: 5000,
-        }),
-        instances: [{ browser: 'chromium' }],
-      },
+// known working set of tests for providers
+// pnpm -C packages/ui test:ui
+// PROVIDER=webdriverio pnpm -C packages/ui test:ui SmallTab
+// PROVIDER=preview pnpm -C packages/ui test:ui SmallTab -t access
+
+const providerName = (process.env.PROVIDER || 'playwright') as
+  | 'playwright'
+  | 'webdriverio'
+  | 'preview'
+
+const testConfig = defineConfig({
+  optimizeDeps: {
+    include: [
+      'vue-router',
+      'splitpanes',
+      'd3-graph-controller',
+      'vue-virtual-scroller',
+      'rrweb-snapshot',
+    ],
+  },
+  test: {
+    browser: {
+      enabled: true,
+      traceView: true,
+      provider:
+        providerName === 'preview'
+          ? preview()
+          : providerName === 'webdriverio'
+            ? webdriverio()
+            : playwright({
+                actionTimeout: 5000,
+              }),
+      instances: [providerName === 'webdriverio' ? { browser: 'chrome' } : { browser: 'chromium' }],
     },
-  }),
-)
+  },
+})
+
+export default mergeConfig(viteConfig, testConfig)
diff --git a/packages/vitest/src/node/cli/cli-config.ts b/packages/vitest/src/node/cli/cli-config.ts
index a8823fa1c82b..f1099d4c708d 100644
--- a/packages/vitest/src/node/cli/cli-config.ts
+++ b/packages/vitest/src/node/cli/cli-config.ts
@@ -413,6 +413,22 @@ export const cliOptionsConfig: VitestCLIOptions = {
           return { mode: value }
         },
       },
+      traceView: {
+        description: 'Enable Vitest trace-view collection for browser tests (default: `false`)',
+        argument: '',
+        transform: transformNestedBoolean,
+        subcommands: {
+          enabled: {
+            description: 'Enable Vitest trace-view collection for browser tests (default: `false`)',
+          },
+          recordCanvas: {
+            description: 'Capture canvas pixels in trace-view snapshots (default: `false`)',
+          },
+          inlineImages: {
+            description: 'Inline loaded image pixels in trace-view snapshots (default: `false`)',
+          },
+        },
+      },
       orchestratorScripts: null,
       commands: null,
       viewport: null,
diff --git a/packages/vitest/src/node/config/resolveConfig.ts b/packages/vitest/src/node/config/resolveConfig.ts
index fb2569c9db5e..62332f0824d5 100644
--- a/packages/vitest/src/node/config/resolveConfig.ts
+++ b/packages/vitest/src/node/config/resolveConfig.ts
@@ -899,6 +899,22 @@ export function resolveConfig(
   if (typeof resolved.browser.trace === 'string' || !resolved.browser.trace) {
     resolved.browser.trace = { mode: resolved.browser.trace || 'off' }
   }
+
+  const traceView = resolved.browser.traceView
+  resolved.browser.traceView = typeof traceView === 'object'
+    ? {
+        enabled: traceView.enabled ?? false,
+        recordCanvas: traceView.recordCanvas ?? false,
+        inlineImages: traceView.inlineImages ?? false,
+      }
+    : {
+        enabled: traceView ?? false,
+        recordCanvas: false,
+        inlineImages: false,
+      }
+  if (resolved.browser.enabled && resolved.browser.traceView.enabled) {
+    resolved.browser.detailsPanelPosition = 'bottom'
+  }
   if (resolved.browser.trace.tracesDir != null) {
     resolved.browser.trace.tracesDir = resolvePath(
       resolved.browser.trace.tracesDir,
@@ -917,6 +933,17 @@ export function resolveConfig(
   if (htmlReporter) {
     resolved.includeTaskLocation ??= true
   }
+  else if (resolved.browser.enabled && resolved.browser.traceView.enabled && !resolved.watch) {
+    logger.console.warn(
+      c.yellow(
+        withLabel(
+          'yellow',
+          'Vitest',
+          '--browser.traceView is enabled without the HTML reporter.',
+        ),
+      ),
+    )
+  }
 
   resolved.server ??= {}
   resolved.server.deps ??= {}
diff --git a/packages/vitest/src/node/config/serializeConfig.ts b/packages/vitest/src/node/config/serializeConfig.ts
index c496766123d9..c1d14ebe4b6d 100644
--- a/packages/vitest/src/node/config/serializeConfig.ts
+++ b/packages/vitest/src/node/config/serializeConfig.ts
@@ -124,6 +124,7 @@ export function serializeConfig(project: TestProject): SerializedConfig {
           : {},
         trackUnhandledErrors: browser.trackUnhandledErrors ?? true,
         trace: browser.trace.mode,
+        traceView: browser.traceView,
       }
     })(config.browser),
     standalone: config.standalone,
diff --git a/packages/vitest/src/node/types/browser.ts b/packages/vitest/src/node/types/browser.ts
index faa6e969c043..1704b07e360e 100644
--- a/packages/vitest/src/node/types/browser.ts
+++ b/packages/vitest/src/node/types/browser.ts
@@ -53,6 +53,40 @@ export interface BrowserProvider {
 export type BrowserBuiltinProvider = 'webdriverio' | 'playwright' | 'preview'
 export interface _BrowserNames {}
 
+export interface BrowserTraceViewOptions {
+  /**
+   * Enable Vitest trace view artifacts collection.
+   *
+   * This option controls Vitest's own trace-view pipeline, independently from provider-specific trace retention.
+   *
+   * @default false
+   * @experimental
+   */
+  enabled?: boolean
+
+  /**
+   * Capture canvas pixels in trace view snapshots.
+   *
+   * This uses rrweb's canvas snapshot support and can increase trace artifact size.
+   * In the trace viewer, this enables a weaker replay iframe sandbox because rrweb needs scripts to redraw canvas data.
+   *
+   * @default false
+   * @experimental
+   */
+  recordCanvas?: boolean
+
+  /**
+   * Inline loaded `<img>` element pixels in trace view snapshots.
+   *
+   * This uses rrweb's image inlining support. It improves offline replay for still images,
+   * but can increase trace artifact size and does not preserve original image resource bytes.
+   *
+   * @default false
+   * @experimental
+   */
+  inlineImages?: boolean
+}
+
 type UnsupportedProperties
   = | 'browser'
     | 'typecheck'
@@ -233,6 +267,17 @@ export interface BrowserConfigOptions {
     snapshots?: boolean
   }
 
+  /**
+   *
+   * Enable Vitest trace view artifacts collection.
+   *
+   * This option controls Vitest's own trace-view pipeline, independently from provider-specific trace retention.
+   *
+   * @default false
+   * @experimental
+   */
+  traceView?: boolean | BrowserTraceViewOptions
+
   /**
    * Directory where screenshots will be saved when page.screenshot() is called
    * If not set, all screenshots are saved to __screenshots__ directory in the same folder as the test file.
@@ -408,6 +453,7 @@ export interface ResolvedBrowserOptions extends BrowserConfigOptions {
     snapshots?: boolean
     sources?: boolean
   }
+  traceView: Required<BrowserTraceViewOptions>
 }
 
 type ToMatchScreenshotResolvePath = (data: {
diff --git a/packages/vitest/src/runtime/config.ts b/packages/vitest/src/runtime/config.ts
index 27bdb2b75e30..bf0e4e7b40e7 100644
--- a/packages/vitest/src/runtime/config.ts
+++ b/packages/vitest/src/runtime/config.ts
@@ -115,6 +115,11 @@ export interface SerializedConfig {
       actionTimeout?: number
     }
     trace: BrowserTraceViewMode
+    traceView: {
+      enabled: boolean
+      recordCanvas: boolean
+      inlineImages: boolean
+    }
     trackUnhandledErrors: boolean
     detailsPanelPosition: 'right' | 'bottom'
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d2c401c462c..1857e1de90df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -575,6 +575,9 @@ importers:
       pathe:
         specifier: 'catalog:'
         version: 2.0.3
+      rrweb-snapshot:
+        specifier: 2.0.0-alpha.20
+        version: 2.0.0-alpha.20
       vitest:
         specifier: workspace:*
         version: link:../vitest
@@ -914,6 +917,12 @@ importers:
       '@vitest/browser-playwright':
         specifier: workspace:*
         version: link:../browser-playwright
+      '@vitest/browser-preview':
+        specifier: workspace:*
+        version: link:../browser-preview
+      '@vitest/browser-webdriverio':
+        specifier: workspace:*
+        version: link:../browser-webdriverio
       '@vitest/runner':
         specifier: workspace:*
         version: link:../runner
@@ -950,6 +959,9 @@ importers:
       rollup:
         specifier: ^4.59.0
         version: 4.59.0
+      rrweb-snapshot:
+        specifier: 2.0.0-alpha.20
+        version: 2.0.0-alpha.20
       splitpanes:
         specifier: ^4.0.4
         version: 4.0.4(vue@3.5.29(typescript@5.9.3))
@@ -9246,6 +9258,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rrweb-snapshot@2.0.0-alpha.20:
+    resolution: {integrity: sha512-YTNf9YVeaGRo/jxY3FKBge2c/Ojd/KTHmuWloUSB+oyPXuY73ZeeG873qMMmhIpqEn7hn7aBF1eWEQmP7wjf8A==}
+
   run-applescript@7.0.0:
     resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
     engines: {node: '>=18'}
@@ -18577,6 +18592,10 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.59.0
       fsevents: 2.3.3
 
+  rrweb-snapshot@2.0.0-alpha.20:
+    dependencies:
+      postcss: 8.5.6
+
   run-applescript@7.0.0: {}
 
   rxjs@7.8.2:
diff --git a/test/browser/README.md b/test/browser/README.md
index f4217a00fb50..907276453393 100644
--- a/test/browser/README.md
+++ b/test/browser/README.md
@@ -8,13 +8,13 @@ pnpm run test
 pnpm run test:playwright
 
 # run only playwright provider + chromium
-BROWSER=chromium pnpm run test:playwright
+TEST_BROWSER=chromium pnpm run test:playwright
 
 # run specific fixture (default is playwright provider + all browsers)
 pnpm run test-fixtures --root ./fixtures/locators
 
 # run specific fixture with selected provider and browser
-PROVIDER=webdriverio BROWSER=firefox pnpm run test-fixtures --root ./fixtures/locators
+PROVIDER=webdriverio TEST_BROWSER=firefox pnpm run test-fixtures --root ./fixtures/locators
 ```
 
 ## Using docker playwright
diff --git a/test/browser/fixtures/trace/.gitignore b/test/browser/fixtures/trace/.gitignore
new file mode 100644
index 000000000000..5ccff1a6bea2
--- /dev/null
+++ b/test/browser/fixtures/trace/.gitignore
@@ -0,0 +1 @@
+html/
diff --git a/test/browser/fixtures/trace/assets/trace-pixel.svg b/test/browser/fixtures/trace/assets/trace-pixel.svg
new file mode 100644
index 000000000000..b268c0724dd2
--- /dev/null
+++ b/test/browser/fixtures/trace/assets/trace-pixel.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <rect width="24" height="24" fill="#2563eb"/>
+  <circle cx="12" cy="12" r="6" fill="#dc2626"/>
+</svg>
diff --git a/test/browser/fixtures/trace/assets/trace-style.css b/test/browser/fixtures/trace/assets/trace-style.css
new file mode 100644
index 000000000000..54200a8cf315
--- /dev/null
+++ b/test/browser/fixtures/trace/assets/trace-style.css
@@ -0,0 +1,4 @@
+.trace-linked-css {
+  color: rgb(37, 99, 235);
+  font-weight: 700;
+}
diff --git a/test/browser/fixtures/trace/exotic.test.ts b/test/browser/fixtures/trace/exotic.test.ts
new file mode 100644
index 000000000000..49aea34453d6
--- /dev/null
+++ b/test/browser/fixtures/trace/exotic.test.ts
@@ -0,0 +1,59 @@
+import { beforeEach, test } from 'vitest'
+import { page } from 'vitest/browser'
+
+beforeEach(() => {
+  if ('adoptedStyleSheets' in document) {
+    document.adoptedStyleSheets = []
+  }
+  document.body.innerHTML = ''
+})
+
+test('canvas pixels are captured for replay', async () => {
+  document.body.innerHTML = '<canvas data-testid="trace-canvas" width="80" height="40"></canvas>'
+  const canvas = document.querySelector<HTMLCanvasElement>('[data-testid="trace-canvas"]')!
+  const context = canvas.getContext('2d')!
+  context.fillStyle = 'rgb(220, 38, 38)'
+  context.fillRect(0, 0, 80, 40)
+  await page.getByTestId('trace-canvas').mark('canvas drawn before mark')
+})
+
+test('shadow dom is rebuilt and highlightable by mirror id', async () => {
+  const host = document.createElement('section')
+  host.setAttribute('aria-label', 'shadow host')
+  const shadow = host.attachShadow({ mode: 'open' })
+  shadow.innerHTML = '<button>Shadow button</button>'
+  document.body.append(host)
+  // TODO: webdriverio currently records this trace-view selector after it is
+  // lowered to a provider-specific shadow DOM selector.
+  await page.getByRole('button', { name: 'Shadow button' }).mark('shadow button rendered')
+})
+
+// TODO: document or improve the boundary between rebuilt DOM shape and custom element runtime behavior.
+test('custom element dom shape is rebuilt without runtime behavior', async () => {
+  if (!customElements.get('trace-widget')) {
+    customElements.define(
+      'trace-widget',
+      class extends HTMLElement {
+        connectedCallback() {
+          this.attachShadow({ mode: 'open' }).innerHTML = '<button>Custom element button</button>'
+        }
+      },
+    )
+  }
+
+  document.body.innerHTML = '<trace-widget></trace-widget>'
+  // TODO: webdriverio currently records this trace-view selector after it is
+  // lowered to a provider-specific shadow DOM selector.
+  await page.getByRole('button', { name: 'Custom element button' }).mark('custom element rendered')
+})
+
+// TODO: collect adopted stylesheets so replay preserves constructable stylesheet styling.
+test('adopted stylesheets are not captured by snapshot alone', async () => {
+  document.body.innerHTML = '<button>Adopted stylesheet button</button>'
+  if ('adoptedStyleSheets' in document) {
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync('button { color: rgb(220, 38, 38); }')
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
+  }
+  await page.getByRole('button').mark('button rendered with adopted stylesheet')
+})
diff --git a/test/browser/fixtures/trace/expect.test.ts b/test/browser/fixtures/trace/expect.test.ts
new file mode 100644
index 000000000000..e2bac8aa2e89
--- /dev/null
+++ b/test/browser/fixtures/trace/expect.test.ts
@@ -0,0 +1,41 @@
+import { beforeEach, expect, test } from 'vitest'
+import { page } from 'vitest/browser'
+
+beforeEach(() => {
+  document.body.innerHTML = ''
+})
+
+test('expect.element pass', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  await expect.element(page.getByRole('button')).toHaveTextContent('Hello')
+})
+
+test('expect.element fail', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  await expect.element(page.getByRole('button'), { timeout: 100 }).toHaveTextContent('World')
+})
+
+test('failure', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  throw new Error('Test failure')
+})
+
+test('click', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  await page.getByRole('button').click()
+})
+
+test('click fail', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  try {
+    // TODO: webdriverio currently records only the lifecycle failure for this case,
+    // not the failed action trace entry with selectorResolution: "missing".
+    await page.getByRole('button', { name: 'Missing' }).click({ timeout: 100 })
+  }
+  catch (e) {
+    // error messages are different by providers.
+    // this is irrelevant since this is a test for action trace metadata
+    e.message = 'Click failed (normalized)'
+    throw e
+  }
+})
diff --git a/test/browser/fixtures/trace/mark.test.ts b/test/browser/fixtures/trace/mark.test.ts
new file mode 100644
index 000000000000..5c131bba7f7e
--- /dev/null
+++ b/test/browser/fixtures/trace/mark.test.ts
@@ -0,0 +1,37 @@
+import { beforeEach, test, vi } from 'vitest'
+import { page } from 'vitest/browser'
+
+beforeEach(() => {
+  document.body.innerHTML = ''
+})
+
+test('locator.mark', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  await page.getByRole('button').mark('button rendered - locator')
+})
+
+test('page.mark', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  await page.mark('button rendered - page')
+})
+
+const myRender = vi.defineHelper(async (content: string) => {
+  document.body.innerHTML = content
+  await page.elementLocator(document.body.firstElementChild!).mark('render helper')
+})
+
+test('helper', async () => {
+  await myRender('<button>Hello</button>')
+})
+
+test('stack', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  const error = new Error('Custom error for stack trace')
+  await page.getByRole('button').mark('button rendered - stack', { stack: error.stack })
+})
+
+test('mark function', async () => {
+  await page.mark('render group', async () => {
+    document.body.innerHTML = '<button>Hello</button>'
+  })
+})
diff --git a/test/browser/fixtures/trace/resources.test.ts b/test/browser/fixtures/trace/resources.test.ts
new file mode 100644
index 000000000000..aa910b895459
--- /dev/null
+++ b/test/browser/fixtures/trace/resources.test.ts
@@ -0,0 +1,21 @@
+import { beforeEach, test } from 'vitest'
+import { page } from 'vitest/browser'
+
+beforeEach(() => {
+  document.body.innerHTML = ''
+})
+
+// With traceView.inlineImages enabled, this is self-contained in the HTML reporter.
+test('same-origin image is inlined for offline replay', async () => {
+  document.body.innerHTML = '<img src="/assets/trace-pixel.svg" alt="local trace asset" width="24" height="24">'
+  await document.querySelector<HTMLImageElement>('img')!.decode()
+  await page.getByAltText('local trace asset').mark('image rendered from same-origin url')
+})
+
+// TODO(test): replace this live URL with deterministic CORS and non-CORS cross-origin fixtures.
+// This renders because the browser can load the external image, but rrweb cannot inline it without CORS-readable pixels.
+test('external image remains url dependent', async () => {
+  document.body.innerHTML = '<img src="https://vitest.dev/logo.svg" alt="external trace asset" width="24" height="24">'
+  await document.querySelector<HTMLImageElement>('img')!.decode()
+  await page.getByAltText('external trace asset').mark('image rendered from external url')
+})
diff --git a/test/browser/fixtures/trace/retry.test.ts b/test/browser/fixtures/trace/retry.test.ts
new file mode 100644
index 000000000000..3320452f5ba5
--- /dev/null
+++ b/test/browser/fixtures/trace/retry.test.ts
@@ -0,0 +1,40 @@
+import type { TestContext } from 'vitest'
+import { test, vi } from 'vitest'
+import { page } from 'vitest/browser'
+
+const renderContext = vi.defineHelper(async (context: TestContext) => {
+  const result = context.task.result
+  const content = `
+<ul>
+  <li>retryCount: ${result?.retryCount ?? '(none)'}</li>
+  <li>repeatCount: ${result?.repeatCount ?? '(none)'}</li>
+</ul>
+`
+  document.body.innerHTML = content
+  await page.getByRole('list').mark(`renderHelper`)
+})
+
+test('repeated test', { repeats: 2 }, ({ task }) => {
+  renderContext(task.context)
+})
+
+test('retried test', { retry: 2 }, ({ task }) => {
+  renderContext(task.context)
+  if (task.result?.retryCount !== 2) {
+    throw new Error(`failed test at retry count ${task.result?.retryCount}`)
+  }
+})
+
+test('repeated retried tests', { repeats: 2, retry: 2 }, ({ task }) => {
+  renderContext(task.context)
+  if (task.result?.retryCount !== 2) {
+    throw new Error(`failed test at retry count ${task.result?.retryCount}`)
+  }
+})
+
+test('repeated test retried on later repeat', { repeats: 2, retry: 2 }, ({ task }) => {
+  renderContext(task.context)
+  if (task.result?.repeatCount === 1 && task.result.retryCount !== 1) {
+    throw new Error(`failed test at retry count ${task.result?.retryCount}`)
+  }
+})
diff --git a/test/browser/fixtures/trace/styles.test.ts b/test/browser/fixtures/trace/styles.test.ts
new file mode 100644
index 000000000000..b766d7ceadc2
--- /dev/null
+++ b/test/browser/fixtures/trace/styles.test.ts
@@ -0,0 +1,70 @@
+import { beforeEach, test } from 'vitest'
+import { page } from 'vitest/browser'
+
+beforeEach(() => {
+  document.head.querySelectorAll('[data-trace-fixture]').forEach(node => node.remove())
+  document.body.innerHTML = ''
+})
+
+test('inline styles', async () => {
+  document.body.innerHTML = '<button style="color: red">Hello</button>'
+  await page.mark('button rendered with css')
+})
+
+test('style tag css is inlined', async () => {
+  const style = document.createElement('style')
+  style.dataset.traceFixture = ''
+  style.textContent = '.trace-style-tag { color: rgb(220, 38, 38); font-weight: 700; }'
+  document.head.append(style)
+  document.body.innerHTML = '<button class="trace-style-tag">Hello</button>'
+  await page.mark('button rendered with style tag css')
+})
+
+test('same-origin link css is inlined', async () => {
+  const link = document.createElement('link')
+  link.dataset.traceFixture = ''
+  link.rel = 'stylesheet'
+  link.href = '/assets/trace-style.css'
+  document.head.append(link)
+  document.body.innerHTML = '<button class="trace-linked-css">Hello</button>'
+  await page.mark('button rendered with same-origin linked css')
+})
+
+// TODO: capture or attach same-origin CSS subresources so replay does not depend on the original URL.
+test('css url resources stay as urls', async () => {
+  const style = document.createElement('style')
+  style.dataset.traceFixture = ''
+  style.textContent = '.trace-bg { width: 24px; height: 24px; background: url("/assets/trace-pixel.svg") center / contain no-repeat; }'
+  document.head.append(style)
+  document.body.innerHTML = '<div class="trace-bg" role="img" aria-label="local css background"></div>'
+  await page.mark('element rendered with css url resource')
+})
+
+// TODO(test): this test is not meaningful for fidelity because the URL never loads; replace it with a loaded cross-origin fixture.
+test('external stylesheet remains url dependent', async () => {
+  const link = document.createElement('link')
+  link.dataset.traceFixture = ''
+  link.rel = 'stylesheet'
+  link.href = 'https://example.invalid/trace-external.css'
+  document.head.append(link)
+  document.body.innerHTML = '<button class="trace-external-css">Hello</button>'
+  await page.mark('button rendered with external stylesheet')
+})
+
+// TODO(test): this test is not meaningful for fidelity until /assets/trace-font.woff2 exists and successfully loads.
+test('font files remain url dependent', async () => {
+  const style = document.createElement('style')
+  style.dataset.traceFixture = ''
+  style.textContent = `
+@font-face {
+  font-family: "TraceFixtureFont";
+  src: url("/assets/trace-font.woff2") format("woff2");
+}
+.trace-font {
+  font-family: "TraceFixtureFont", sans-serif;
+}
+`
+  document.head.append(style)
+  document.body.innerHTML = '<button class="trace-font">Hello</button>'
+  await page.mark('button rendered with font-face url')
+})
diff --git a/test/browser/fixtures/trace/viewport.test.ts b/test/browser/fixtures/trace/viewport.test.ts
new file mode 100644
index 000000000000..ad6be25d82c7
--- /dev/null
+++ b/test/browser/fixtures/trace/viewport.test.ts
@@ -0,0 +1,50 @@
+import { beforeEach, test } from 'vitest'
+import { page } from 'vitest/browser'
+
+beforeEach(() => {
+  document.head.querySelectorAll('[data-trace-fixture]').forEach(node => node.remove())
+  document.documentElement.scrollTop = 0
+  document.body.innerHTML = ''
+})
+
+// TODO: e2e for viewport/scroll replay in test/ui
+
+test('viewport media query depends on replay viewport', async () => {
+  const style = document.createElement('style')
+  style.dataset.traceFixture = ''
+  style.textContent = `
+.trace-viewport::before { content: "narrow"; }
+@media (min-width: 400px) {
+  .trace-viewport::before { content: "wide"; }
+}
+`
+  document.head.append(style)
+  document.body.innerHTML = '<div class="trace-viewport">viewport-sensitive layout</div>'
+  await page.mark('viewport sensitive layout rendered')
+})
+
+test('document scroll is restored from trace metadata', async () => {
+  document.body.innerHTML = `
+<main style="height: 2000px; padding-top: 900px">
+  <button>Scrolled document button</button>
+</main>
+`
+  window.scrollTo(0, 450)
+  await page.getByRole('button').mark('document scrolled before mark')
+})
+
+test('overflow element scroll is stored in snapshot payload', async () => {
+  document.body.innerHTML = `
+<section
+  data-testid="scroll-box"
+  style="height: 80px; width: 180px; overflow: auto; border: 1px solid black"
+>
+  <div style="height: 240px; padding-top: 150px">
+    <button>Nested scrolled button</button>
+  </div>
+</section>
+`
+  const scrollBox = document.querySelector<HTMLElement>('[data-testid="scroll-box"]')!
+  scrollBox.scrollTop = 120
+  await page.getByTestId('scroll-box').mark('overflow container scrolled before mark')
+})
diff --git a/test/browser/fixtures/trace/vitest.config.ts b/test/browser/fixtures/trace/vitest.config.ts
new file mode 100644
index 000000000000..9a548d935b37
--- /dev/null
+++ b/test/browser/fixtures/trace/vitest.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vitest/config'
+import { instances, provider } from '../../settings'
+
+// TEST_BROWSER=chromium pnpm -C test/browser test-fixtures --root fixtures/trace
+// TEST_BROWSER=chromium pnpm -C test/browser test-fixtures --root fixtures/trace --ui --browser.headless
+// TEST_BROWSER=chromium pnpm -C test/browser test-fixtures --root fixtures/trace --reporter=html --browser.headless --run
+// pnpm dlx serve test/browser/fixtures/trace/html
+export default defineConfig({
+  test: {
+    includeTaskLocation: true,
+    browser: {
+      enabled: true,
+      provider: provider,
+      instances: instances,
+      traceView: {
+        enabled: true,
+        inlineImages: true,
+        recordCanvas: true,
+      },
+      screenshotFailures: false,
+    },
+  },
+})
diff --git a/test/browser/settings.ts b/test/browser/settings.ts
index d8220aae83db..cdb4bc3df8a4 100644
--- a/test/browser/settings.ts
+++ b/test/browser/settings.ts
@@ -36,14 +36,17 @@ const webdriverioInstances: BrowserInstanceOption[] = [
   { browser: 'firefox' },
 ]
 
-export const instances: BrowserInstanceOption[] = process.env.BROWSER
+// use TEST_BROWSER to avoid BROWSER being selected for UI --open
+const testBrowser = process.env.TEST_BROWSER ?? process.env.BROWSER
+
+export const instances: BrowserInstanceOption[] = testBrowser
   ? [
       {
-        browser: process.env.BROWSER as any,
+        browser: testBrowser as any,
         headless:
           wsEndpoint
             ? true
-            : process.env.BROWSER === 'safari' ? false : undefined,
+            : testBrowser === 'safari' ? false : undefined,
       },
     ]
   : provider.name === 'playwright'
diff --git a/test/browser/specs/playwright-trace-mark.test.ts b/test/browser/specs/playwright-trace-mark.test.ts
index 45b02faee2d0..887323801403 100644
--- a/test/browser/specs/playwright-trace-mark.test.ts
+++ b/test/browser/specs/playwright-trace-mark.test.ts
@@ -207,7 +207,7 @@ describe.runIf(provider.name === 'playwright')('playwright trace marks', () => {
               // vitest command group (with source)
               expect.objectContaining({
                 method: 'tracingGroup',
-                title: '__vitest_click',
+                title: 'vitest:click',
               }),
               // playwright action (without source)
               expect.objectContaining({
@@ -218,7 +218,7 @@ describe.runIf(provider.name === 'playwright')('playwright trace marks', () => {
               }),
             ]),
           )
-          const markerEvent = events.find(e => e.title === '__vitest_click')
+          const markerEvent = events.find(e => e.title === 'vitest:click')
           const formattedFrame = formatStack(markerEvent)
           if (name === 'webkit') {
             if (rolldownVersion) {
diff --git a/test/browser/specs/trace.test.ts b/test/browser/specs/trace.test.ts
new file mode 100644
index 000000000000..7924c96a8bc2
--- /dev/null
+++ b/test/browser/specs/trace.test.ts
@@ -0,0 +1,1844 @@
+import type { BrowserTraceData, BrowserTraceEntry } from '../../../packages/browser/src/client/tester/trace'
+import { stripVTControlCharacters } from 'node:util'
+import { relative } from 'pathe'
+import { expect, test } from 'vitest'
+import { buildTestProjectTree } from '../../test-utils'
+import { instances, provider, runBrowserTests } from './utils'
+
+test('trace view artifacts', async () => {
+  const result = await runBrowserTests({
+    root: './fixtures/trace',
+  })
+  const root = result.ctx.config.root
+
+  function formatLocation(location: BrowserTraceEntry['location']) {
+    // columns can differ between browsers
+    // return `${relative(root, location.file)}:${location.line}:${location.column}`
+    return `${relative(root, location.file)}:${location.line}`
+  }
+
+  function formatEntry(raw: BrowserTraceEntry) {
+    // snapshot only stable data.
+    // other integration features need to be tested separately
+    const result = {
+      ...raw,
+      location: raw.location ? formatLocation(raw.location) : undefined,
+      stack: undefined,
+      startTime: undefined,
+      duration: undefined,
+      snapshot: {
+        selectorResolution: raw.snapshot.selectorResolution,
+        selectorError: raw.snapshot.selectorError,
+      },
+    }
+    // remove noisy undefined properties
+    for (const key of Object.keys(result)) {
+      if (result[key] === undefined) {
+        delete result[key]
+      }
+      if (result[key] && typeof result[key] === 'object') {
+        for (const subKey of Object.keys(result[key])) {
+          if (result[key][subKey] === undefined) {
+            delete result[key][subKey]
+          }
+        }
+      }
+    }
+    return result
+  }
+
+  const projectErrorTree = buildTestProjectTree(result.results, (testCase) => {
+    const result = testCase.result()
+    return result.state === 'failed'
+      ? result.errors.map(e => stripVTControlCharacters(e.message))
+      : result.state
+  })
+
+  const projectArtifactTree = buildTestProjectTree(result.results, (testCase) => {
+    const artifacts = testCase.artifacts()
+    const traces = artifacts.map((artifact) => {
+      if (artifact.type === 'internal:browserTrace') {
+        const data = artifact.data as BrowserTraceData
+        return {
+          entries: data.entries.map(e => formatEntry(e)),
+          ...(data.retry ? { retry: data.retry } : {}),
+          ...(data.repeats ? { repeats: data.repeats } : {}),
+        }
+      }
+      return artifact.type
+    })
+    return traces
+  })
+
+  for (const { browser } of instances) {
+    expect.soft(projectErrorTree[browser], browser).toMatchInlineSnapshot(`
+      {
+        "exotic.test.ts": {
+          "adopted stylesheets are not captured by snapshot alone": "passed",
+          "canvas pixels are captured for replay": "passed",
+          "custom element dom shape is rebuilt without runtime behavior": "passed",
+          "shadow dom is rebuilt and highlightable by mirror id": "passed",
+        },
+        "expect.test.ts": {
+          "click": "passed",
+          "click fail": [
+            "Click failed (normalized)",
+          ],
+          "expect.element fail": [
+            "expect(element).toHaveTextContent()
+
+      Expected element to have text content:
+        World
+      Received:
+        Hello",
+          ],
+          "expect.element pass": "passed",
+          "failure": [
+            "Test failure",
+          ],
+        },
+        "mark.test.ts": {
+          "helper": "passed",
+          "locator.mark": "passed",
+          "mark function": "passed",
+          "page.mark": "passed",
+          "stack": "passed",
+        },
+        "resources.test.ts": {
+          "external image remains url dependent": "passed",
+          "same-origin image is inlined for offline replay": "passed",
+        },
+        "retry.test.ts": {
+          "repeated retried tests": "passed",
+          "repeated test": "passed",
+          "repeated test retried on later repeat": "passed",
+          "retried test": "passed",
+        },
+        "styles.test.ts": {
+          "css url resources stay as urls": "passed",
+          "external stylesheet remains url dependent": "passed",
+          "font files remain url dependent": "passed",
+          "inline styles": "passed",
+          "same-origin link css is inlined": "passed",
+          "style tag css is inlined": "passed",
+        },
+        "viewport.test.ts": {
+          "document scroll is restored from trace metadata": "passed",
+          "overflow element scroll is stored in snapshot payload": "passed",
+          "viewport media query depends on replay viewport": "passed",
+        },
+      }
+    `)
+    // selector format is different between providers
+    if (provider.name === 'webdriverio') {
+      expect.soft(projectArtifactTree[browser], browser).toMatchInlineSnapshot(`
+        {
+          "exotic.test.ts": {
+            "adopted stylesheets are not captured by snapshot alone": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:58",
+                    "name": "button rendered with adopted stylesheet",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:51",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "canvas pixels are captured for replay": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:17",
+                    "name": "canvas drawn before mark",
+                    "selector": " body > canvas",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:11",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "custom element dom shape is rebuilt without runtime behavior": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:47",
+                    "name": "custom element rendered",
+                    "selector": ">>>html > body > trace-widget > button",
+                    "snapshot": {
+                      "selectorError": "Unexpected token "" while parsing selector """,
+                      "selectorResolution": "error",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:32",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "shadow dom is rebuilt and highlightable by mirror id": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:28",
+                    "name": "shadow button rendered",
+                    "selector": ">>>html > body > section > button",
+                    "snapshot": {
+                      "selectorError": "Unexpected token "" while parsing selector """,
+                      "selectorResolution": "error",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:20",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "expect.test.ts": {
+            "click": [
+              {
+                "entries": [
+                  {
+                    "kind": "action",
+                    "location": "expect.test.ts:25",
+                    "name": "vitest:click",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                    "status": "pass",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:23",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "click fail": [
+              {
+                "entries": [
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:33",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+            ],
+            "expect.element fail": [
+              {
+                "entries": [
+                  {
+                    "kind": "expect",
+                    "location": "expect.test.ts:15",
+                    "name": "expect.element().toHaveTextContent [ERROR]",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                    "status": "fail",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:15",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+            ],
+            "expect.element pass": [
+              {
+                "entries": [
+                  {
+                    "kind": "expect",
+                    "location": "expect.test.ts:10",
+                    "name": "expect.element().toHaveTextContent",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                    "status": "pass",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:8",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "failure": [
+              {
+                "entries": [
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:20",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+            ],
+          },
+          "mark.test.ts": {
+            "helper": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:24",
+                    "name": "render helper",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:23",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "locator.mark": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:10",
+                    "name": "button rendered - locator",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:8",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "mark function": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:34",
+                    "name": "render group",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:33",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "page.mark": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:15",
+                    "name": "button rendered - page",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:13",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "stack": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:29",
+                    "name": "button rendered - stack",
+                    "selector": " body > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:27",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "resources.test.ts": {
+            "external image remains url dependent": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "resources.test.ts:20",
+                    "name": "image rendered from external url",
+                    "selector": " body > img",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "resources.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "same-origin image is inlined for offline replay": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "resources.test.ts:12",
+                    "name": "image rendered from same-origin url",
+                    "selector": " body > img",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "resources.test.ts:9",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "retry.test.ts": {
+            "repeated retried tests": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:31",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:31",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+                "retry": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:28",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "retry": 2,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:28",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:28",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 2,
+              },
+            ],
+            "repeated test": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:18",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:18",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:18",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 2,
+              },
+            ],
+            "repeated test retried on later repeat": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:35",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:38",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+                "repeats": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:35",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 1,
+                "retry": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:35",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 2,
+              },
+            ],
+            "retried test": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:22",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:24",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:22",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:24",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+                "retry": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:22",
+                    "name": "renderHelper",
+                    "selector": " body > ul",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:21",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "retry": 2,
+              },
+            ],
+          },
+          "styles.test.ts": {
+            "css url resources stay as urls": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:40",
+                    "name": "element rendered with css url resource",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:34",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "external stylesheet remains url dependent": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:51",
+                    "name": "button rendered with external stylesheet",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:44",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "font files remain url dependent": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:69",
+                    "name": "button rendered with font-face url",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:55",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "inline styles": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:11",
+                    "name": "button rendered with css",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:9",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "same-origin link css is inlined": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:30",
+                    "name": "button rendered with same-origin linked css",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:23",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "style tag css is inlined": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:20",
+                    "name": "button rendered with style tag css",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:14",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "viewport.test.ts": {
+            "document scroll is restored from trace metadata": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "viewport.test.ts:33",
+                    "name": "document scrolled before mark",
+                    "selector": " body > main > button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "viewport.test.ts:26",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "overflow element scroll is stored in snapshot payload": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "viewport.test.ts:49",
+                    "name": "overflow container scrolled before mark",
+                    "selector": " body > section",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "viewport.test.ts:36",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "viewport media query depends on replay viewport": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "viewport.test.ts:23",
+                    "name": "viewport sensitive layout rendered",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "viewport.test.ts:12",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+        }
+      `)
+    }
+    if (provider.name === 'playwright') {
+      expect.soft(projectArtifactTree[browser], browser).toMatchInlineSnapshot(`
+        {
+          "exotic.test.ts": {
+            "adopted stylesheets are not captured by snapshot alone": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:58",
+                    "name": "button rendered with adopted stylesheet",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:51",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "canvas pixels are captured for replay": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:17",
+                    "name": "canvas drawn before mark",
+                    "selector": "internal:testid=[data-testid="trace-canvas"s]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:11",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "custom element dom shape is rebuilt without runtime behavior": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:47",
+                    "name": "custom element rendered",
+                    "selector": "internal:role=button[name="Custom element button"i]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:32",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "shadow dom is rebuilt and highlightable by mirror id": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "exotic.test.ts:28",
+                    "name": "shadow button rendered",
+                    "selector": "internal:role=button[name="Shadow button"i]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "exotic.test.ts:20",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "expect.test.ts": {
+            "click": [
+              {
+                "entries": [
+                  {
+                    "kind": "action",
+                    "location": "expect.test.ts:25",
+                    "name": "vitest:click",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                    "status": "pass",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:23",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "click fail": [
+              {
+                "entries": [
+                  {
+                    "kind": "action",
+                    "location": "expect.test.ts:33",
+                    "name": "vitest:click",
+                    "selector": "internal:role=button[name="Missing"i]",
+                    "snapshot": {
+                      "selectorResolution": "missing",
+                    },
+                    "status": "fail",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:33",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+            ],
+            "expect.element fail": [
+              {
+                "entries": [
+                  {
+                    "kind": "expect",
+                    "location": "expect.test.ts:15",
+                    "name": "expect.element().toHaveTextContent [ERROR]",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                    "status": "fail",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:15",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+            ],
+            "expect.element pass": [
+              {
+                "entries": [
+                  {
+                    "kind": "expect",
+                    "location": "expect.test.ts:10",
+                    "name": "expect.element().toHaveTextContent",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                    "status": "pass",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:8",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "failure": [
+              {
+                "entries": [
+                  {
+                    "kind": "lifecycle",
+                    "location": "expect.test.ts:20",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+            ],
+          },
+          "mark.test.ts": {
+            "helper": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:24",
+                    "name": "render helper",
+                    "selector": "internal:role=button[name="Hello"i]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:23",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "locator.mark": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:10",
+                    "name": "button rendered - locator",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:8",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "mark function": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:34",
+                    "name": "render group",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:33",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "page.mark": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:15",
+                    "name": "button rendered - page",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:13",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "stack": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "mark.test.ts:29",
+                    "name": "button rendered - stack",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "mark.test.ts:27",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "resources.test.ts": {
+            "external image remains url dependent": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "resources.test.ts:20",
+                    "name": "image rendered from external url",
+                    "selector": "internal:attr=[alt="external trace asset"i]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "resources.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "same-origin image is inlined for offline replay": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "resources.test.ts:12",
+                    "name": "image rendered from same-origin url",
+                    "selector": "internal:attr=[alt="local trace asset"i]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "resources.test.ts:9",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "retry.test.ts": {
+            "repeated retried tests": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:31",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:31",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+                "retry": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:28",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "retry": 2,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:28",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:29",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:28",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 2,
+              },
+            ],
+            "repeated test": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:18",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:18",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:18",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:17",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 2,
+              },
+            ],
+            "repeated test retried on later repeat": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:35",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:38",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+                "repeats": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:35",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 1,
+                "retry": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:36",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:35",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "repeats": 2,
+              },
+            ],
+            "retried test": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:22",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:24",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:22",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:24",
+                    "name": "vitest:onAfterRetryTask [fail]",
+                    "snapshot": {},
+                    "status": "fail",
+                  },
+                ],
+                "retry": 1,
+              },
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "retry.test.ts:22",
+                    "name": "renderHelper",
+                    "selector": "internal:role=list",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "retry.test.ts:21",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+                "retry": 2,
+              },
+            ],
+          },
+          "styles.test.ts": {
+            "css url resources stay as urls": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:40",
+                    "name": "element rendered with css url resource",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:34",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "external stylesheet remains url dependent": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:51",
+                    "name": "button rendered with external stylesheet",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:44",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "font files remain url dependent": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:69",
+                    "name": "button rendered with font-face url",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:55",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "inline styles": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:11",
+                    "name": "button rendered with css",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:9",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "same-origin link css is inlined": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:30",
+                    "name": "button rendered with same-origin linked css",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:23",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "style tag css is inlined": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "styles.test.ts:20",
+                    "name": "button rendered with style tag css",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "styles.test.ts:14",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+          "viewport.test.ts": {
+            "document scroll is restored from trace metadata": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "viewport.test.ts:33",
+                    "name": "document scrolled before mark",
+                    "selector": "internal:role=button",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "viewport.test.ts:26",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "overflow element scroll is stored in snapshot payload": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "viewport.test.ts:49",
+                    "name": "overflow container scrolled before mark",
+                    "selector": "internal:testid=[data-testid="scroll-box"s]",
+                    "snapshot": {
+                      "selectorResolution": "matched",
+                    },
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "viewport.test.ts:36",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+            "viewport media query depends on replay viewport": [
+              {
+                "entries": [
+                  {
+                    "kind": "mark",
+                    "location": "viewport.test.ts:23",
+                    "name": "viewport sensitive layout rendered",
+                    "snapshot": {},
+                  },
+                  {
+                    "kind": "lifecycle",
+                    "location": "viewport.test.ts:12",
+                    "name": "vitest:onAfterRetryTask [pass]",
+                    "snapshot": {},
+                    "status": "pass",
+                  },
+                ],
+              },
+            ],
+          },
+        }
+      `)
+    }
+  }
+})
diff --git a/test/browser/vitest.config.mts b/test/browser/vitest.config.mts
index 5f221683491c..7c21962bdc51 100644
--- a/test/browser/vitest.config.mts
+++ b/test/browser/vitest.config.mts
@@ -40,7 +40,6 @@ export default defineConfig({
     },
     browser: {
       enabled: true,
-      headless: false,
       instances,
       provider,
       // isolate: false,
@@ -76,7 +75,6 @@ export default defineConfig({
     alias: {
       '#src': resolve(dir, './src'),
     },
-    open: false,
     diff: './custom-diff-config.ts',
     outputFile: {
       html: './html/index.html',
diff --git a/test/ui/README.md b/test/ui/README.md
new file mode 100644
index 000000000000..8f0a4440da87
--- /dev/null
+++ b/test/ui/README.md
@@ -0,0 +1,10 @@
+# test/ui
+
+```sh
+# run e2e
+pnpm test
+
+# run fixture projects
+pnpm test-fixtures
+pnpm test-fixtures --root fixtures-trace
+```
diff --git a/test/ui/fixtures-trace/basic.test.ts b/test/ui/fixtures-trace/basic.test.ts
new file mode 100644
index 000000000000..21e90a00f69b
--- /dev/null
+++ b/test/ui/fixtures-trace/basic.test.ts
@@ -0,0 +1,7 @@
+import { test } from 'vitest'
+import { page } from 'vitest/browser'
+
+test('locator.mark', async () => {
+  document.body.innerHTML = '<button>Hello</button>'
+  await page.getByRole('button').mark('button rendered - locator')
+})
diff --git a/test/ui/fixtures-trace/vitest.config.ts b/test/ui/fixtures-trace/vitest.config.ts
new file mode 100644
index 000000000000..9a87c6310126
--- /dev/null
+++ b/test/ui/fixtures-trace/vitest.config.ts
@@ -0,0 +1,19 @@
+import { playwright } from '@vitest/browser-playwright'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    ui: true,
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      instances: [
+        { browser: 'chromium' },
+      ],
+      headless: true,
+      ui: false,
+      traceView: true,
+      screenshotFailures: false,
+    },
+  },
+})
diff --git a/test/ui/test/trace.spec.ts b/test/ui/test/trace.spec.ts
new file mode 100644
index 000000000000..8961f2234d08
--- /dev/null
+++ b/test/ui/test/trace.spec.ts
@@ -0,0 +1,104 @@
+import type { Page } from '@playwright/test'
+import type { PreviewServer } from 'vite'
+import type { Vitest } from 'vitest/node'
+import assert from 'node:assert'
+import { Writable } from 'node:stream'
+import { expect, test } from '@playwright/test'
+import { preview } from 'vite'
+import { startVitest } from 'vitest/node'
+
+test.describe('ui', () => {
+  let vitest: Vitest | undefined
+  let baseURL: string
+
+  test.beforeAll(async () => {
+    // silence Vitest logs
+    const stdout = new Writable({ write: (_, __, callback) => callback() })
+    const stderr = new Writable({ write: (_, __, callback) => callback() })
+    vitest = await startVitest(
+      'test',
+      undefined,
+      {
+        root: './fixtures-trace',
+        watch: true,
+        ui: true,
+        open: false,
+      },
+      {},
+      { stdout, stderr },
+    )
+    const address = vitest.vite.httpServer?.address()
+    assert(address && typeof address === 'object', 'Invalid server address')
+    baseURL = `http://localhost:${address.port}/__vitest__/`
+  })
+
+  test.afterAll(async () => {
+    await vitest?.close()
+  })
+
+  test('basic', async ({ page }) => {
+    await page.goto(baseURL)
+    await testBasic(page)
+  })
+})
+
+test.describe('html reporter', () => {
+  let previewServer: PreviewServer
+  let baseURL: string
+
+  test.beforeAll(async () => {
+    // silence Vitest logs
+    const stdout = new Writable({ write: (_, __, callback) => callback() })
+    const stderr = new Writable({ write: (_, __, callback) => callback() })
+    await startVitest(
+      'test',
+      undefined,
+      {
+        root: './fixtures-trace',
+        run: true,
+        ui: false,
+        reporters: 'html',
+      },
+      {},
+      { stdout, stderr },
+    )
+    previewServer = await preview({
+      root: './fixtures-trace',
+      build: { outDir: 'html' },
+    })
+    const address = previewServer.httpServer?.address()
+    assert(address && typeof address === 'object', 'Invalid server address')
+    baseURL = `http://localhost:${address.port}/`
+  })
+
+  test.afterAll(async () => {
+    await previewServer.close()
+  })
+
+  test('basic', async ({ page }) => {
+    await page.goto(baseURL)
+    await testBasic(page)
+  })
+})
+
+async function testBasic(page: Page) {
+  await expect.soft(page.getByTestId('tests-entry')).toContainText('1 Pass 0 Fail 1 Total')
+
+  // selecting test case opens trace viewer
+  const traceView = page.getByTestId('trace-view')
+  await expect(traceView).toBeHidden()
+  await page.getByText('locator.mark').click()
+  await expect(traceView).toBeVisible()
+
+  // selecting steps should open source code view
+  await expect(page.getByTestId('btn-report')).toContainClass('tab-button-active')
+  await traceView.getByRole('button', { name: 'button rendered - locator' }).click()
+  await expect(page.getByTestId('btn-code')).toContainClass('tab-button-active')
+
+  // verify snaphsot replay in iframe
+  const traceViewFrame = traceView.frameLocator('iframe')
+  await expect(traceViewFrame.getByRole('button', { name: 'Hello' })).toBeVisible()
+
+  // verify selector highlight
+  await expect(traceViewFrame.getByTestId('trace-view-highlight')).toBeVisible()
+}
diff --git a/test/ui/vitest.config.ts b/test/ui/vitest.config.ts
index 3d504ca22691..5dcda4628adf 100644
--- a/test/ui/vitest.config.ts
+++ b/test/ui/vitest.config.ts
@@ -4,6 +4,7 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   test: {
+    exclude: ['**/fixtures-trace/**'],
     coverage: {
       reportOnFailure: true,
     },