---
url: /config/browser/traceview.md
---

# 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](/guide/browser/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](/guide/browser/trace-view#failure-output).

```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,
      },
    },
  },
})
```

| Option         | Default | Description                                                                                          |
| -------------- | ------- | ---------------------------------------------------------------------------------------------------- |
| `mode`         | `'off'` | How trace view records tests: `'on'` (every test), `'failure-only'` (only failed tests), or `'off'`. |
| `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.                                             |
| `enabled`      | `false` | Deprecated. Use `mode` instead.                                                                      |

## browser.traceView.enabled  {#traceview-enabled}

* **Type:** `boolean`
* **Default:** `false`
* **CLI:** `--browser.traceView.enabled`

Use [`mode`](#traceview-mode) instead. `true` is the same as `mode: 'on'`.

## browser.traceView.mode 5.1.0 {#traceview-mode}

* **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 {#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 {#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 {#traceview-ariasnapshot}

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