GeezerVison

- **Type:** `boolean | { enabled?: boolean; recordCanvas?: boolean; inlineImages?: boolean }`

- **Type:** `boolean | { enabled?: boolean; recordCanvas?: boolean; inlineImages?: boolean; ariaSnapshot?: boolean }`

- **CLI:** `--browser.traceView`

- **Default:** `false`

| `enabled` | `false` | Enables Vitest trace-view artifact collection. |

| `inlineImages` | `false` | Inlines loaded `<img>` pixels into snapshots for more portable replay, useful in the HTML reporter. |

| `recordCanvas` | `false` | Captures canvas pixels in snapshots. |

| `ariaSnapshot` | `true` | Captures the accessibility tree alongside each snapshot. |

Captures canvas pixels in snapshots. This enables a weaker replay iframe sandbox because rrweb needs scripts to redraw canvas data.

- **Type:** `boolean`

- **Default:** `true`

- **CLI:** `--browser.traceView.ariaSnapshot`

Captures the accessibility tree of the page alongside each snapshot. The trace viewer header can then switch from the DOM snapshot to an **Aria** view, which uses the same format as [aria snapshots](/guide/browser/aria-snapshots).

See [Trace View](/guide/browser/trace-view) for full documentation.

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.

## Accessibility Tree <Version>5.1.0</Version> {#accessibility-tree}

Trace view also captures the page's accessibility tree at each step. The trace viewer header shows a view selector to switch the snapshot pane between **DOM** and **Aria**. The Aria view lists the roles, accessible names, and states that role-based locators such as `getByRole()` see, in the same format as [aria snapshots](/guide/browser/aria-snapshots). Set [`traceView.ariaSnapshot`](/config/browser/traceview#traceview-ariasnapshot) to `false` to disable it.

## 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.

Inline loaded image pixels in trace-view snapshots (default: `false`)

- **CLI:** `--browser.traceView.ariaSnapshot`

- **Config:** [browser.traceView.ariaSnapshot](/config/browser/traceview#traceview-ariasnapshot)

Capture the accessibility tree in trace-view snapshots (default: `true`)

- **CLI:** `--browser.locators.exact`

selectorResolution?: BrowserTraceSelectorResolution

selectorError?: string

pseudoClassIds: Record<PseudoClassName, number[]>

ariaSnapshot?: string

},

pseudoClassIds: {} as any,

}

if (traceView.ariaSnapshot) {

const { generateAriaTree, renderAriaTree } = getBrowserState().aria

result.ariaSnapshot = renderAriaTree(generateAriaTree(document.body))

}

for (const className of PSEUDO_CLASS_NAMES) {

const elements = document.querySelectorAll(className)

const ids = Array.from(elements, (el) => mirror.getId(el)).filter((id) => id !== -1)

</Pane>

<Pane :size="traceViewSplitSizes[1]" min-size="20">

<div :ref="setFitContainer" class="h-full min-h-0 flex flex-col overflow-auto">

<div

v-if="selectedStep"

class="mx-auto flex-none overflow-hidden"

:style="scaledViewportStyle"

>

<div v-if="!selectedStep" class="text-sm opacity-50 p-4">No trace step found</div>

<template v-else-if="showAriaSnapshot">

<pre

v-if="selectedStep.snapshot.ariaSnapshot != null"

data-testid="trace-aria-snapshot"

class="m-0 p-4 font-mono text-xs whitespace-pre"

>{{ selectedStep.snapshot.ariaSnapshot }}</pre>

<div v-else class="text-sm opacity-50 p-4">No aria snapshot for this step</div>

</template>

<div v-else class="mx-auto flex-none overflow-hidden" :style="scaledViewportStyle">

<iframe

ref="iframeEl"

:key="iframeSandbox"

:style="{ transform: `scale(${zoomLevel})` }"

/>

</div>

<div v-else class="text-sm opacity-50 p-4">No trace step found</div>

</div>

</Pane>

</Splitpanes>

<span v-else-if="attemptLabel" class="text-xs opacity-70">

{{ attemptLabel }}

</span>

<TraceZoomControl v-if="trace" />

<label class="flex items-center gap-1 text-xs ws-nowrap select-none cursor-pointer">

<input v-model="showTraceSelectorHighlight" type="checkbox" />

<select

v-if="hasAriaSnapshot"

v-model="snapshotViewMode"

aria-label="Trace snapshot view"

class="cursor-pointer border border-base rounded bg-base px-2 py-1 text-xs"

>

<option value="dom">DOM</option>

<option value="aria">Aria</option>

</select>

<TraceZoomControl v-if="trace" :disabled="showAriaSnapshot" />

<label

class="flex items-center gap-1 text-xs ws-nowrap select-none"

:class="showAriaSnapshot ? 'op-50 cursor-not-allowed' : 'cursor-pointer'"

>

<input v-model="showTraceSelectorHighlight" type="checkbox" :disabled="showAriaSnapshot" />

<span>Show highlight</span>

</label>

<a

</script>

<template>

<Dropdown placement="bottom-end">

<Dropdown placement="bottom-end" :disabled="disabled">

<button

type="button"

aria-label="Trace zoom"

data-testid="trace-zoom-trigger"

class="flex items-center gap-1 rounded px-1 text-xs tabular-nums op70 hover:bg-active hover:op100"

:disabled="disabled"

class="flex items-center gap-1 rounded px-1 text-xs tabular-nums op70 enabled:hover:bg-active enabled:hover:op100 disabled:op40 disabled:cursor-not-allowed"

>

<span class="i-carbon:zoom-in block" />

<span>{{ percent }}</span>

return { level, percent, nextIn, nextOut, zoomIn, zoomOut, resetZoom, fit, setFitContainer }

const traceSnapshotViewMode = useLocalStorage<'dom' | 'aria'>(

'vitest-ui_trace-snapshot-view-mode',

'dom',

export function useTraceSnapshotViewMode(getTrace: () => BrowserTraceData | undefined) {

const snapshotViewMode = traceSnapshotViewMode

const hasAriaSnapshot = computed(

() => !!getTrace()?.entries.some((entry) => entry.snapshot.ariaSnapshot != null),

)

const showAriaSnapshot = computed(

() => snapshotViewMode.value === 'aria' && hasAriaSnapshot.value,

)

return { snapshotViewMode, hasAriaSnapshot, showAriaSnapshot }

inlineImages: {

description: 'Inline loaded image pixels in trace-view snapshots (default: `false`)',

},

ariaSnapshot: {

description: 'Capture the accessibility tree in trace-view snapshots (default: `true`)',

},

},

},

orchestratorScripts: null,

enabled: traceView.enabled ?? false,

recordCanvas: traceView.recordCanvas ?? false,

inlineImages: traceView.inlineImages ?? false,

ariaSnapshot: traceView.ariaSnapshot ?? true,

}

: {

enabled: traceView ?? false,

recordCanvas: false,

inlineImages: false,

ariaSnapshot: true,

}

if (resolved.browser.enabled && resolved.browser.traceView.enabled) {

resolved.browser.detailsPanelPosition = 'bottom'