Trace Viewer

Vitest Browser Mode supports generating Playwright's trace files. To enable tracing, you need to set the trace option in the test.browser configuration.

WARNING

Generating trace files is only available when using the Playwright provider.

vitest.config.js

import { defineConfig } from 'vitest/config'
import { playwright } from '@vitest/browser/providers/playwright'

export default defineConfig({
  test: {
    browser: {
      provider: playwright(),
      trace: 'on',
    },
  },
})

CLI

vitest --browser.trace=on

By default, Vitest will generate a trace file for each test. You can also configure it to only generate traces on test failures by setting trace to 'on-first-retry', 'on-all-retries' or 'retain-on-failure'. The files will be saved in __traces__ folder next to your test files. The name of the trace includes the project name, the test name, the repeats count and retry count:

chromium-my-test-0-0.trace.zip
^^^^^^^^ project name
         ^^^^^^ test name
                ^ repeat count
                  ^ retry count

To change the output directory, you can set the tracesDir option in the test.browser.trace configuration. This way all traces will be stored in the same directory, grouped by the test file.

vitest.config.js

import { defineConfig } from 'vitest/config'
import { playwright } from '@vitest/browser/providers/playwright'

export default defineConfig({
  test: {
    browser: {
      provider: playwright(),
      trace: {
        mode: 'on',
        // the path is relative to the root of the project
        tracesDir: './playwright-traces',
      },
    },
  },
})

The traces are available in reporters as annotations. For example, in the HTML reporter, you can find the link to the trace file in the test details.

Preview

To open the trace file, you can use the Playwright Trace Viewer. Run the following command in your terminal:

npx playwright show-trace "path-to-trace-file"

This will start the Trace Viewer and load the specified trace file.

Alternatively, you can open the Trace Viewer in your browser at https://trace.playwright.dev and upload the trace file there.

Limitations

At the moment, Vitest cannot populate the "Sources" tab in the Trace Viewer. This means that while you can see the actions and screenshots captured during the test, you won't be able to view the source code of your tests directly within the Trace Viewer. You will need to refer back to your code editor to see the test implementation.