feat: support opening trace view

.github/workflows/ci.yml

@@ -48,6 +48,7 @@ jobs:
           deno-version: v2.x
 
       - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install chromium
       - run: pnpm build
 
       - name: test

.gitignore

@@ -9,5 +9,6 @@ test-results
 .yarn
 .pnp.*
 samples/**/coverage
+samples/**/.vitest
 tests-logs-*
-*.tsbuildinfo
+*.tsbuildinfo

.vscode/launch.json

@@ -38,6 +38,17 @@
       ],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"]
     },
+    {
+      "name": "Run Extension Browser V5 Sample",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--disable-extensions",
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "${workspaceFolder}/samples/browser-v5"
+      ],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
+    },
     {
       "name": "Run Extension Continuous Sample",
       "type": "extensionHost",

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
 
@@ -134,6 +135,28 @@ If you hover over it, you can get a more detailed diagnostic.
 
 You can disable this feature by turning off `vitest.showImportsDuration`.
 
+### 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 { configDefaults, defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    reporters: [...configDefaults.reporters, '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 trace view of the selected test from the generated HTML report in an editor tab.
+
+![Vitest Trace View open in Visual Studio Code](./img/trace-view.png)
+
 ## FAQs (Frequently Asked Questions)
 
 ### How can I use it in monorepo?

package.json

@@ -78,6 +78,7 @@
     "tsdown": "catalog:",
     "tsx": "catalog:",
     "typescript": "catalog:",
+    "vite": "catalog:latest",
     "vitest": "catalog:latest",
     "which": "catalog:",
     "ws": "catalog:"
@@ -121,6 +122,11 @@
         "command": "vitest.openOutput",
         "category": "Vitest"
       },
+      {
+        "title": "Open Trace View",
+        "command": "vitest.openTraceView",
+        "category": "Vitest"
+      },
       {
         "title": "Show Shell Terminal",
         "command": "vitest.showShellTerminal",
@@ -189,6 +195,10 @@
         }
       ],
       "commandPalette": [
+        {
+          "command": "vitest.openTraceView",
+          "when": "false"
+        },
         {
           "command": "vitest.toggleContinuousRun",
           "when": "false"
@@ -203,6 +213,11 @@
         }
       ],
       "testing/item/context": [
+        {
+          "command": "vitest.openTraceView",
+          "when": "controllerId == 'vitest' && testId in vitest.traceViewTests",
+          "group": "vitest"
+        },
         {
           "command": "vitest.updateSnapshot",
           "when": "controllerId == 'vitest'"
@@ -213,6 +228,11 @@
         }
       ],
       "testing/item/gutter": [
+        {
+          "command": "vitest.openTraceView",
+          "when": "controllerId == 'vitest' && testId in vitest.traceViewTests",
+          "group": "vitest"
+        },
         {
           "command": "vitest.updateSnapshot",
           "when": "controllerId == 'vitest'"

packages/extension/src/apiProcess.ts

@@ -57,6 +57,10 @@ export class VitestProjectConfig {
     return usesJestTestNamePattern(this.pkg)
   }
 
+  get htmlReportPath() {
+    return this.metadata.htmlReportPath
+  }
+
   get package() {
     return this.pkg
   }

packages/extension/src/extension.ts

@@ -19,6 +19,7 @@ import { ExtensionTerminalProcess } from './spawn/terminal'
 import { ExtensionState } from './state'
 import { TagsManager } from './tagsManager'
 import { TestTree } from './testTree'
+import { TraceViewManager } from './traceView'
 import { getTestData, TestFile } from './testTreeData'
 import { debounce, showVitestError } from './utils'
 import './polyfills'
@@ -52,6 +53,7 @@ class VitestExtension {
   private debugManager: DebugManager
   private schemaProvider: TransformSchemaProvider
   private importsBreakdownProvider: ImportsBreakdownProvider
+  private traceViewManager = new TraceViewManager()
 
   /** @internal */
   _debugDisposable: vscode.Disposable | undefined
@@ -106,6 +108,7 @@ class VitestExtension {
   private async _defineTestProfiles(showWarning: boolean, cancelToken?: vscode.CancellationToken) {
     this.importsBreakdownProvider.clear()
     this.testTree.reset([])
+    this.traceViewManager.clear()
     this.runQueues.forEach((q) => q.dispose())
     this.runQueues.clear()
 
@@ -222,6 +225,7 @@ class VitestExtension {
       vitest,
       this.diagnostic,
       this.importsBreakdownProvider,
+      this.traceViewManager,
     )
     const runQueueId = `${vitest.id}:run`
     this.runQueues.set(runQueueId, runQueue)
@@ -284,6 +288,7 @@ class VitestExtension {
       vitest,
       this.diagnostic,
       this.importsBreakdownProvider,
+      this.traceViewManager,
     )
     const coverageQueueId = `${vitest.id}:coverage`
     this.runQueues.set(coverageQueueId, coverageQueue)
@@ -342,6 +347,9 @@ class VitestExtension {
       vscode.commands.registerCommand('vitest.openOutput', () => {
         log.openOutput()
       }),
+      vscode.commands.registerCommand('vitest.openTraceView', (testItem: vscode.TestItem) =>
+        this.traceViewManager.open(testItem),
+      ),
       vscode.commands.registerCommand('vitest.runRelatedTests', async (uri?: vscode.Uri) => {
         const currentUri = uri || vscode.window.activeTextEditor?.document.uri
         if (!currentUri) {
@@ -638,6 +646,7 @@ class VitestExtension {
     this.testController.dispose()
     this.schemaProvider.dispose()
     this.importsBreakdownProvider.dispose()
+    this.traceViewManager.dispose()
     this.runProfiles.forEach((p) => p.dispose())
     this.runProfiles.clear()
     this.disposables.forEach((d) => d.dispose())

packages/extension/src/runQueue.ts

@@ -3,6 +3,7 @@ import type { RunHandle } from './apiProcess'
 import type { ExtensionDiagnostic } from './diagnostic'
 import type { ImportsBreakdownProvider } from './importsBreakdownProvider'
 import type { TestTree } from './testTree'
+import type { TraceViewManager } from './traceView'
 import { VitestProcessAPI } from './apiProcess'
 import { log } from './log'
 import { ContinuousTestRunner, TestRunner } from './runner'
@@ -33,6 +34,7 @@ export class RunQueue {
     private readonly api: VitestProcessAPI,
     private readonly diagnostic: ExtensionDiagnostic | undefined,
     private readonly importsBreakdown: ImportsBreakdownProvider,
+    private readonly traceViewManager: TraceViewManager,
   ) {}
 
   public isContinuousTestItem(testItem: vscode.TestItem): boolean {
@@ -205,6 +207,7 @@ export class RunQueue {
       api || this.api,
       this.diagnostic,
       this.importsBreakdown,
+      this.traceViewManager,
     )
   }
 
@@ -216,6 +219,7 @@ export class RunQueue {
       this.api,
       this.diagnostic,
       this.importsBreakdown,
+      this.traceViewManager,
       this.testRunProfile,
       this.continuousRequests,
     )

packages/extension/src/runner.ts

@@ -4,6 +4,7 @@ import type { RunHandle, VitestProcessAPI } from './apiProcess'
 import type { ExtensionDiagnostic } from './diagnostic'
 import type { ImportsBreakdownProvider } from './importsBreakdownProvider'
 import type { TestTree } from './testTree'
+import type { TraceViewManager } from './traceView'
 import crypto from 'node:crypto'
 import path from 'node:path'
 import { stripVTControlCharacters } from 'node:util'
@@ -40,6 +41,7 @@ export class TestRunner extends vscode.Disposable {
     protected readonly api: VitestProcessAPI,
     protected readonly diagnostic: ExtensionDiagnostic | undefined,
     protected readonly importsBreakdown: ImportsBreakdownProvider,
+    protected readonly traceViewManager?: TraceViewManager,
   ) {
     super(() => {
       log.verbose?.('Disposing test runner')
@@ -110,6 +112,10 @@ export class TestRunner extends vscode.Disposable {
     })
 
     handle.handlers.onTestRunEnd(async (files, unhandledError, collecting, coverage) => {
+      const htmlReportPath = this.api.config.htmlReportPath
+      if (!collecting && htmlReportPath) {
+        await this.traceViewManager?.update(this.api.id, htmlReportPath, files, this.tree)
+      }
       const testRun = this.testRun
 
       if (!testRun) {
@@ -369,10 +375,11 @@ export class ContinuousTestRunner extends TestRunner {
     api: VitestProcessAPI,
     diagnostic: ExtensionDiagnostic | undefined,
     importsBreakdown: ImportsBreakdownProvider,
+    traceViewManager: TraceViewManager,
     private readonly testRunProfile: vscode.TestRunProfile,
     private readonly continuousRequests: Set<vscode.TestRunRequest>,
   ) {
-    super(handle, controller, tree, api, diagnostic, importsBreakdown)
+    super(handle, controller, tree, api, diagnostic, importsBreakdown, traceViewManager)
     handle.handlers.onTestRunStart((files) => {
       this.startTestRun(files)
       log.verbose?.(