vitest-dev · hi-ogawa · Aug 24, 2026 · Aug 24, 2026 · Aug 24, 2026 · Aug 24, 2026
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
@@ -141,7 +141,7 @@ function codemirrorChanges() {
 }
 
 const TRACE_GUTTER_ID = 'trace-step-gutter'
-const traceGutterConfigs = isTraceViewEnabled(props.file)
+const traceGutterConfigs = activeTraceView.value || isTraceViewEnabled(props.file)
   ? [{ className: TRACE_GUTTER_ID, style: 'width: 14px' }]
   : []
 let traceGutterLines: number[] = []

diff --git a/packages/ui/client/composables/trace-view.ts b/packages/ui/client/composables/trace-view.ts
@@ -97,7 +97,13 @@ export function getTraceAttemptMap(artifacts: TestArtifact[]): Map<string, Norma
     const trace = artifact.data as BrowserTraceData
     const key = getTraceAttemptKey(trace)
     grouped[key] ??= []
-    grouped[key].push(trace)
+    grouped[key].push({
+      ...trace,
+      entries: trace.entries.map(entry => ({
+        ...entry,
+        location: entry.location ?? artifact.location,
+      })),
+    })
   }
 
   const merged = new Map<string, NormalizedBrowserTraceData>()
@@ -212,7 +218,9 @@ const selectedTestTask = computed(() => {
   const test = selectedTest.value
     ? client.state.idMap.get(selectedTest.value)
     : undefined
-  return test?.type === 'test' && isTraceViewEnabled(test.file)
+  const hasTrace = test?.type === 'test'
+    && test.artifacts.some(artifact => artifact.type === 'internal:browserTrace')
+  return test?.type === 'test' && (isTraceViewEnabled(test.file) || hasTrace)
     ? test
     : undefined
 })
@@ -226,6 +234,7 @@ watch(selectedTest, (testId) => {
     const test = selectedTestTask.value
     if (test) {
       // Auto-open trace view when selecting a trace-enabled test.
+      detailsPosition.value = 'bottom'
       setActiveTrace({ test, selectedStepIndex: 0 })
       return
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/ui/fixtures/trace-custom/app/app.js b/test/ui/fixtures/trace-custom/app/app.js
@@ -0,0 +1,11 @@
+const button = document.querySelector('button')
+const input = document.querySelector('input')
+const output = document.querySelector('output')
+
+button.addEventListener('click', () => {
+  button.textContent = 'After action'
+})
+
+input.addEventListener('input', () => {
+  output.textContent = `Attempt ${input.value}`
+})
diff --git a/test/ui/fixtures/trace-custom/app/index.html b/test/ui/fixtures/trace-custom/app/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trace demo</title>
+  </head>
+  <body>
+    <main>
+      <button type="button">Before action</button>
+      <label>
+        Attempt
+        <input type="number" value="0">
+      </label>
+      <output>Attempt 0</output>
+    </main>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>
diff --git a/test/ui/fixtures/trace-custom/attempts.test.ts b/test/ui/fixtures/trace-custom/attempts.test.ts
@@ -0,0 +1,15 @@
+import { test } from './trace/test'
+
+let attemptIndex = 0
+
+test('custom trace attempts', { retry: 1, repeats: 1 }, async ({ page, trace }) => {
+  const currentAttempt = attemptIndex++
+
+  await page.goto('/')
+  await page.getByLabel('Attempt').fill(String(currentAttempt))
+  await trace.snapshot('attempt')
+
+  if (currentAttempt % 2 === 0) {
+    throw new Error('Retry this attempt')
+  }
+})
diff --git a/test/ui/fixtures/trace-custom/basic.test.ts b/test/ui/fixtures/trace-custom/basic.test.ts
@@ -0,0 +1,10 @@
+import { expect } from 'vitest'
+import { test } from './trace/test'
+
+test('custom trace', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('button', { name: 'Before action' }).click()
+
+  await expect(page.getByRole('button', { name: 'After action' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Missing' }).click({ timeout: 10 })).rejects.toThrow()
+})
diff --git a/test/ui/fixtures/trace-custom/global-setup.ts b/test/ui/fixtures/trace-custom/global-setup.ts
@@ -0,0 +1,29 @@
+import type { AddressInfo } from 'node:net'
+import type { TestProject } from 'vitest/node'
+import { fileURLToPath } from 'node:url'
+import { preview } from 'vite'
+
+declare module 'vitest' {
+  interface ProvidedContext {
+    baseURL: string
+  }
+}
+
+export async function setup({ provide }: TestProject): Promise<() => Promise<void>> {
+  const root = fileURLToPath(new URL('./app', import.meta.url))
+  const server = await preview({
+    root,
+    logLevel: 'silent' as const,
+    build: {
+      outDir: root,
+    },
+    preview: {
+      host: '127.0.0.1',
+      port: 0,
+    },
+  })
+
+  const address = server.httpServer.address() as AddressInfo
+  provide('baseURL', `http://127.0.0.1:${address.port}`)
+  return () => server.close()
+}
diff --git a/test/ui/fixtures/trace-custom/trace/active.ts b/test/ui/fixtures/trace-custom/trace/active.ts
@@ -0,0 +1,20 @@
+import type { TraceRecorder } from './recorder'
+
+let activeTraceRecorder: TraceRecorder | undefined
+
+export function setActiveTraceRecorder(recorder: TraceRecorder): void {
+  activeTraceRecorder = recorder
+}
+
+export function clearActiveTraceRecorder(recorder: TraceRecorder): void {
+  if (activeTraceRecorder === recorder) {
+    activeTraceRecorder = undefined
+  }
+}
+
+export function getActiveTraceRecorder(): TraceRecorder {
+  if (!activeTraceRecorder) {
+    throw new Error('Trace expect was used outside of a traced test')
+  }
+  return activeTraceRecorder
+}
diff --git a/test/ui/fixtures/trace-custom/trace/attempt.ts b/test/ui/fixtures/trace-custom/trace/attempt.ts
@@ -0,0 +1,27 @@
+import type { RunnerTestCase, TestContext, TestTryOptions } from 'vitest'
+import type { TraceAttempt } from './recorder'
+
+const traceAttemptKey = Symbol.for('vitest.traceAttempt')
+type TraceContext = TestContext & { [traceAttemptKey]?: TraceAttempt }
+
+export function startTraceAttempt(task: RunnerTestCase, options: TestTryOptions): void {
+  const context = task.context as TraceContext
+  context[traceAttemptKey] = {
+    ...options,
+    startTime: performance.now(),
+  }
+}
+
+export function getTraceAttempt(task: TestContext['task']): TraceAttempt {
+  const context = task.context as TraceContext
+  const attempt = context[traceAttemptKey]
+  if (!attempt) {
+    throw new Error('Trace attempt was not initialized by the custom runner')
+  }
+  return attempt
+}
+
+export function finishTraceAttempt(task: RunnerTestCase): void {
+  const context = task.context as TraceContext
+  delete context[traceAttemptKey]
+}
diff --git a/test/ui/fixtures/trace-custom/trace/expect.ts b/test/ui/fixtures/trace-custom/trace/expect.ts
@@ -0,0 +1,48 @@
+import type { Locator } from 'playwright'
+// @ts-ignore
+import { parseStacktrace } from '@vitest/utils/source-map'
+import { expect } from 'vitest'
+import { getActiveTraceRecorder } from './active'
+
+expect.extend({
+  async toBeVisible(actual: unknown, options?: { timeout?: number }) {
+    if (!isLocator(actual)) {
+      throw new TypeError('toBeVisible expects a Playwright Locator')
+    }
+
+    const frame = parseStacktrace(new Error().stack ?? '').find(({ file }) => {
+      return !file.includes('/node_modules/') && !file.includes('/trace/')
+    })
+    const location = frame
+      ? { file: frame.file, line: frame.line, column: frame.column }
+      : undefined
+    const isNot = this.isNot
+    try {
+      await getActiveTraceRecorder().assert(
+        `expect.${isNot ? 'not.' : ''}toBeVisible`,
+        () => actual.waitFor({
+          state: isNot ? 'hidden' : 'visible',
+          timeout: options?.timeout,
+        }),
+        { location },
+      )
+      return {
+        pass: !isNot,
+        message: () => `Expected locator ${isNot ? '' : 'not '}to be visible`,
+      }
+    }
+    catch (error) {
+      return {
+        pass: isNot,
+        message: () => error instanceof Error ? error.message : String(error),
+      }
+    }
+  },
+})
+
+function isLocator(value: unknown): value is Locator {
+  return !!value
+    && typeof value === 'object'
+    && typeof (value as Locator).isVisible === 'function'
+    && typeof (value as Locator).locator === 'function'
+}