Support Trace View outside browser mode

• design note https://gist.github.com/hi-ogawa/16903b72364acac9ce87136e61dda346

Motivation

Vitest's Trace View provides useful step-by-step DOM snapshots, but trace collection is currently coupled to browser mode. Some users run E2E tests in Vitest's Node environment and control a complete app or page through a programmatic API such as Playwright. This is a different use case from running test code in the browser-mode runtime, but both can benefit from inspecting recorded test flows in the Vitest UI and HTML report.

As agents increasingly help author and run tests, a human reviewer may want to quickly skim the recorded states in a generated HTML report and judge whether the UI and interactions look right, whether iterating locally or reviewing a CI run.

Proposed Approach / Hypothetical API

Expose the existing snapshot producer as an injectable client script and provide a task-side helper that records its opaque result as a Trace View entry. The caller owns script injection, browser lifecycle, and the transfer from the page back to the test.

For example, an integration using the Playwright programmatic API could look roughly like this:

import {
  recordTraceViewSnapshot,
  traceViewClientPath,
} from 'vitest/trace-view'

test('checkout', async (context) => {
  await page.addInitScript({ path: traceViewClientPath })

  await page.goto(appUrl)

  const snapshot = await page.evaluate(() => {
    return globalThis.__vitest_trace_view__.snapshot()
  })

  await recordTraceViewSnapshot(context.task, {
    name: 'checkout page',
    snapshot,
  })
})

The snapshot value remains opaque. recordTraceViewSnapshot owns the internal artifact envelope, attempt metadata, and defaults expected by the viewer. The Vitest UI and HTML reporter discover the resulting trace from artifact presence rather than browser-mode configuration.

Browser mode remains the built-in higher-level integration that automatically records actions, assertions, marks, retries, and final state. Playwright fixtures, automatic lifecycle capture, and locator assertions can be explored separately as ergonomics on top of the same primitive.

Start with the linked design note and the existing snapshot producer behind browser-mode Trace View. Trace how the UI and HTML reporter discover trace artifacts, then assess the proposed injectable client script and task-side helper. Done means Node-environment callers can record an opaque snapshot that appears in both viewers with the expected envelope and metadata.