From f496bc9afb93471ef34bf401b5c4827a88a47044 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com> Date: Mon, 7 Sep 2026 13:12:24 +0900 Subject: [PATCH] docs: document Trace View workflow Co-authored-by: OpenCode (gpt-5.6-sol) --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index d395024..3510778 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ - **Coverage** support - **Inline console.log display**: Console logs appear inline in the editor next to the code that produced them - **Imports duration**: Displays the execution time for each import during continuous test runs. +- **Trace View**: Opens recorded Vitest 5 browser interactions for a selected test. ## Requirements @@ -65,6 +66,30 @@ When viewing a test file, you'll notice test icons in the gutter next to each te - `Reveal in Test Explorer`: Locate and highlight the test in the centralized Testing view. - `Breakpoint Settings`: Set breakpoints to pause execution during debugging. You can add a standard breakpoint, a conditional breakpoint, a logpoint, or a triggered breakpoint. +### Trace View + +With Vitest 5, the extension can open recorded browser interactions for a selected test in [Vitest Trace View](https://vitest.dev/guide/browser/trace-view.html). Enable Trace View and the HTML reporter in your existing Browser Mode configuration: + +```ts +import { defineConfig } from 'vitest/config' + +export default defineConfig({ + test: { + reporters: ['default', 'html'], + browser: { + // Your existing Browser Mode configuration + traceView: true, + }, + }, +}) +``` + +After running a browser test through the extension, right-click the test in the Testing view or its editor gutter icon and select **Open Trace View**. The extension opens the generated HTML report at that test's first recorded step, using Visual Studio Code's Integrated Browser when available. + +The HTML reporter persists the recorded trace for replay. Normal test results remain available in Visual Studio Code's Testing view. + + + ## Configuration You can identify if your config is loaded by the extension with `process.env.VITEST_VSCODE` and change the configuration accordingly. -- 2.51.2