Skip to content

browser.traceView 5.0.0+ ​

  • Type: boolean | 'off' | 'on' | 'failure-only' | { mode?: 'off' | 'on' | 'failure-only'; recordCanvas?: boolean; inlineImages?: boolean; ariaSnapshot?: 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. When a test fails, the terminal output also includes a timeline of its recorded steps.

ts
export default defineConfig({
  test: {
    browser: {
      traceView: true,
    },
  },
})

To keep traces only for failed tests, use the 'failure-only' mode:

ts
export default defineConfig({
  test: {
    browser: {
      traceView: 'failure-only',
    },
  },
})

Use the object form to enable additional snapshot fidelity options:

ts
export default defineConfig({
  test: {
    browser: {
      traceView: {
        mode: 'on',
        inlineImages: true,
        recordCanvas: true,
      },
    },
  },
})
OptionDefaultDescription
mode'off'How trace view records tests: 'on' (every test), 'failure-only' (only failed tests), or 'off'.
inlineImagesfalseInlines loaded <img> pixels into snapshots for more portable replay, useful in the HTML reporter.
recordCanvasfalseCaptures canvas pixels in snapshots.
ariaSnapshottrueCaptures the accessibility tree alongside each snapshot.
enabledfalseDeprecated. Use mode instead.

browser.traceView.enabled deprecated ​

  • Type: boolean
  • Default: false
  • CLI: --browser.traceView.enabled

Use mode instead. true is the same as mode: 'on'.

browser.traceView.mode 5.1.0+ ​

  • Type: 'off' | 'on' | 'failure-only'
  • Default: 'off'
  • CLI: --browser.traceView.mode <mode>

How trace view records tests. Takes precedence over the deprecated enabled.

  • 'on': every test gets a trace with a snapshot at every step, and Vitest UI shows steps live as tests run.
  • 'failure-only': only failed tests get a trace, with the full step timeline and a snapshot at the end.
  • 'off': no traces.

browser.traceView.inlineImages ​

  • Type: boolean
  • Default: false
  • CLI: --browser.traceView.inlineImages

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

browser.traceView.recordCanvas ​

  • Type: boolean
  • Default: false
  • CLI: --browser.traceView.recordCanvas

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

browser.traceView.ariaSnapshot 5.1.0+ ​

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

See Trace View for full documentation.