From 24603e3c462631602be154472815c84f99e262b2 Mon Sep 17 00:00:00 2001
From: Raul Macarie <raul@macarie.me>
Date: Mon, 9 Feb 2026 11:41:55 +0100
Subject: [PATCH] feat: store failure screenshots using artifacts API (#9588)

---
 docs/api/advanced/artifacts.md                |   4 +-
 packages/browser/src/client/tester/runner.ts  |   7 +-
 packages/browser/src/node/plugin.ts           |  60 +---------
 packages/runner/src/artifact.ts               |   7 +-
 packages/runner/src/types.ts                  |   1 +
 packages/runner/src/types/tasks.ts            |  23 +++-
 .../client/components/FailureScreenshot.vue   |  70 ++++++++++++
 .../client/components/artifacts/Artifacts.vue |  78 +++++++++++++
 .../ui/client/components/views/ViewReport.vue |  45 +-------
 .../components/views/ViewTestReport.vue       | 105 ++----------------
 packages/ui/client/composables/location.ts    |  15 +++
 packages/ui/client/composables/screenshot.ts  |  35 ------
 packages/vitest/src/node/reporters/base.ts    |  14 ++-
 packages/vitest/src/types/global.ts           |   1 -
 test/cli/test/artifacts.test.ts               |   4 +-
 15 files changed, 223 insertions(+), 246 deletions(-)
 create mode 100644 packages/ui/client/components/FailureScreenshot.vue
 create mode 100644 packages/ui/client/components/artifacts/Artifacts.vue
 create mode 100644 packages/ui/client/composables/location.ts
 delete mode 100644 packages/ui/client/composables/screenshot.ts

diff --git a/docs/api/advanced/artifacts.md b/docs/api/advanced/artifacts.md
index 8d9ae9f54..b1db9f49d 100644
--- a/docs/api/advanced/artifacts.md
+++ b/docs/api/advanced/artifacts.md
@@ -39,7 +39,9 @@ function recordArtifact<Artifact extends TestArtifact>(task: Test, artifact: Art
 
 The `recordArtifact` function records an artifact during test execution and returns it. It expects a [task](/api/advanced/runner#tasks) as the first parameter and an object assignable to [`TestArtifact`](#testartifact) as the second.
 
-This function has to be used within a test, and the test has to still be running. Recording after test completion will throw an error.
+::: info
+Artifacts must be recorded before the task is reported. Any artifacts recorded after that will not be included in the task.
+:::
 
 When an artifact is recorded on a test, it emits an `onTestArtifactRecord` runner event and a [`onTestCaseArtifactRecord` reporter event](/api/advanced/reporters#ontestcaseartifactrecord). To retrieve recorded artifacts from a test case, use the [`artifacts()`](/api/advanced/test-case#artifacts) method.
 
diff --git a/packages/browser/src/client/tester/runner.ts b/packages/browser/src/client/tester/runner.ts
index 31e66e000..cebf35858 100644
--- a/packages/browser/src/client/tester/runner.ts
+++ b/packages/browser/src/client/tester/runner.ts
@@ -18,7 +18,7 @@ import type { VitestBrowserClientMocker } from './mocker'
 import type { CommandsManager } from './tester-utils'
 import { globalChannel, onCancel } from '@vitest/browser/client'
 import { getTestName } from '@vitest/runner/utils'
-import { BenchmarkRunner, TestRunner } from 'vitest'
+import { BenchmarkRunner, recordArtifact, TestRunner } from 'vitest'
 import { page, userEvent } from 'vitest/browser'
 import {
   DecodedMap,
@@ -175,7 +175,10 @@ export function createBrowserRunner(
           console.error('[vitest] Failed to take a screenshot', err)
         })
         if (screenshot) {
-          task.meta.failScreenshotPath = screenshot
+          await recordArtifact(task, {
+            type: 'internal:failureScreenshot',
+            attachments: [{ contentType: 'image/png', path: screenshot, originalPath: screenshot }],
+          } as const)
         }
       }
     }
diff --git a/packages/browser/src/node/plugin.ts b/packages/browser/src/node/plugin.ts
index 0b23b6dd4..5380a76e7 100644
--- a/packages/browser/src/node/plugin.ts
+++ b/packages/browser/src/node/plugin.ts
@@ -1,14 +1,13 @@
-import type { Stats } from 'node:fs'
 import type { HtmlTagDescriptor } from 'vite'
 import type { Plugin } from 'vitest/config'
 import type { Vitest } from 'vitest/node'
 import type { ParentBrowserProject } from './projectParent'
-import { createReadStream, lstatSync, readFileSync } from 'node:fs'
+import { createReadStream, readFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { dynamicImportPlugin } from '@vitest/mocker/node'
 import { toArray } from '@vitest/utils/helpers'
 import MagicString from 'magic-string'
-import { basename, dirname, extname, join, resolve } from 'pathe'
+import { basename, dirname, join, resolve } from 'pathe'
 import sirv from 'sirv'
 import { coverageConfigDefaults } from 'vitest/config'
 import {
@@ -97,61 +96,6 @@ export default (parentServer: ParentBrowserProject, base = '/'): Plugin[] => {
           )
         }
 
-        const uiEnabled = parentServer.config.browser.ui
-
-        if (uiEnabled) {
-        // eslint-disable-next-line prefer-arrow-callback
-          server.middlewares.use(`${base}__screenshot-error`, function vitestBrowserScreenshotError(req, res) {
-            if (!req.url) {
-              res.statusCode = 404
-              res.end()
-              return
-            }
-
-            const url = new URL(req.url, 'http://localhost')
-            const id = url.searchParams.get('id')
-            if (!id) {
-              res.statusCode = 404
-              res.end()
-              return
-            }
-
-            const task = parentServer.vitest.state.idMap.get(id)
-            const file = task?.meta.failScreenshotPath
-            if (!file) {
-              res.statusCode = 404
-              res.end()
-              return
-            }
-
-            let stat: Stats | undefined
-            try {
-              stat = lstatSync(file)
-            }
-            catch {
-            }
-
-            if (!stat?.isFile()) {
-              res.statusCode = 404
-              res.end()
-              return
-            }
-
-            const ext = extname(file)
-            const buffer = readFileSync(file)
-            res.setHeader(
-              'Cache-Control',
-              'public,max-age=0,must-revalidate',
-            )
-            res.setHeader('Content-Length', buffer.length)
-            res.setHeader('Content-Type', ext === 'jpeg' || ext === 'jpg'
-              ? 'image/jpeg'
-              : ext === 'webp'
-                ? 'image/webp'
-                : 'image/png')
-            res.end(buffer)
-          })
-        }
         server.middlewares.use((req, res, next) => {
           // 9000 mega head move
           // Vite always caches optimized dependencies, but users might mock
diff --git a/packages/runner/src/artifact.ts b/packages/runner/src/artifact.ts
index 125df7590..6f64d8567 100644
--- a/packages/runner/src/artifact.ts
+++ b/packages/runner/src/artifact.ts
@@ -13,12 +13,13 @@ import { findTestFileStackTrace } from './utils/collect'
  *
  * Vitest automatically injects the source location where the artifact was created and manages any attachments you include.
  *
+ * **Note:** artifacts must be recorded before the task is reported. Any artifacts recorded after that will not be included in the task.
+ *
  * @param task - The test task context, typically accessed via `this.task` in custom matchers or `context.task` in tests
  * @param artifact - The artifact to record. Must extend {@linkcode TestArtifactBase}
  *
  * @returns A promise that resolves to the recorded artifact with location injected
  *
- * @throws {Error} If called after the test has finished running
  * @throws {Error} If the test runner doesn't support artifacts
  *
  * @example
@@ -40,10 +41,6 @@ import { findTestFileStackTrace } from './utils/collect'
 export async function recordArtifact<Artifact extends TestArtifact>(task: Test, artifact: Artifact): Promise<Artifact> {
   const runner = getRunner()
 
-  if (task.result && task.result.state !== 'run') {
-    throw new Error(`Cannot record a test artifact outside of the test run. The test "${task.name}" finished running with the "${task.result.state}" state already.`)
-  }
-
   const stack = findTestFileStackTrace(
     task.file.filepath,
     new Error('STACK_TRACE').stack!,
diff --git a/packages/runner/src/types.ts b/packages/runner/src/types.ts
index 304023fa2..4b79bd876 100644
--- a/packages/runner/src/types.ts
+++ b/packages/runner/src/types.ts
@@ -14,6 +14,7 @@ export type {
   AroundEachListener,
   BeforeAllListener,
   BeforeEachListener,
+  FailureScreenshotArtifact,
   File,
   Fixture,
   FixtureFn,
diff --git a/packages/runner/src/types/tasks.ts b/packages/runner/src/types/tasks.ts
index 1c231c255..c1f9f4c2b 100644
--- a/packages/runner/src/types/tasks.ts
+++ b/packages/runner/src/types/tasks.ts
@@ -1345,6 +1345,23 @@ export interface VisualRegressionArtifact extends TestArtifactBase {
   attachments: VisualRegressionArtifactAttachment[]
 }
 
+interface FailureScreenshotArtifactAttachment extends TestAttachment {
+  path: string
+  /** Original file system path to the screenshot, before attachment resolution */
+  originalPath: string
+  body?: undefined
+}
+
+/**
+ * @experimental
+ *
+ * Artifact type for failure screenshots.
+ */
+export interface FailureScreenshotArtifact extends TestArtifactBase {
+  type: 'internal:failureScreenshot'
+  attachments: [FailureScreenshotArtifactAttachment] | []
+}
+
 /**
  * @experimental
  * @advanced
@@ -1426,4 +1443,8 @@ export interface TestArtifactRegistry {}
  *
  * This type automatically includes all artifacts registered via {@link TestArtifactRegistry}.
  */
-export type TestArtifact = TestAnnotationArtifact | VisualRegressionArtifact | TestArtifactRegistry[keyof TestArtifactRegistry]
+export type TestArtifact
+  = | FailureScreenshotArtifact
+    | TestAnnotationArtifact
+    | VisualRegressionArtifact
+    | TestArtifactRegistry[keyof TestArtifactRegistry]
diff --git a/packages/ui/client/components/FailureScreenshot.vue b/packages/ui/client/components/FailureScreenshot.vue
new file mode 100644
index 000000000..78cf18eae
--- /dev/null
+++ b/packages/ui/client/components/FailureScreenshot.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { RunnerTask } from 'vitest'
+import { computed, ref } from 'vue'
+import { getAttachmentUrl } from '~/composables/attachments'
+import { isReport } from '~/constants'
+import IconButton from './IconButton.vue'
+import Modal from './Modal.vue'
+import ScreenshotError from './views/ScreenshotError.vue'
+
+const { task } = defineProps<{
+  task: RunnerTask
+}>()
+
+const showScreenshot = ref(false)
+const artifact = computed(() => {
+  if (task.type === 'test') {
+    const artifact = task.artifacts.find(artifact => artifact.type === 'internal:failureScreenshot')
+
+    if (artifact !== undefined) {
+      return artifact
+    }
+  }
+
+  return null
+})
+const screenshotUrl = computed(() =>
+  artifact.value && artifact.value.attachments.length && getAttachmentUrl(artifact.value.attachments[0]),
+)
+
+function openScreenshot() {
+  if (artifact.value === null || artifact.value.attachments.length === 0) {
+    return
+  }
+
+  const filePath = artifact.value.attachments[0].originalPath
+
+  fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
+}
+</script>
+
+<template>
+  <template v-if="screenshotUrl">
+    <div flex="~ gap-2 items-center">
+      <IconButton
+        v-tooltip.bottom="'View screenshot error'"
+        class="!op-100"
+        icon="i-carbon:image"
+        title="View screenshot error"
+        @click="showScreenshot = true"
+      />
+      <!-- in a report there is no dev server to handle the action -->
+      <IconButton
+        v-if="!isReport"
+        v-tooltip.bottom="'Open screenshot error in editor'"
+        class="!op-100"
+        icon="i-carbon:image-reference"
+        title="Open screenshot error in editor"
+        @click="openScreenshot"
+      />
+    </div>
+    <Modal :key="screenshotUrl" v-model="showScreenshot" direction="right">
+      <ScreenshotError
+        :file="task.file.filepath"
+        :name="task.name"
+        :url="screenshotUrl"
+        @close="showScreenshot = false"
+      />
+    </Modal>
+  </template>
+</template>
diff --git a/packages/ui/client/components/artifacts/Artifacts.vue b/packages/ui/client/components/artifacts/Artifacts.vue
new file mode 100644
index 000000000..4dc1da6f3
--- /dev/null
+++ b/packages/ui/client/components/artifacts/Artifacts.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { RunnerTestCase, TestArtifact } from 'vitest'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import { getLocationString, openLocation } from '~/composables/location'
+import VisualRegression from './visual-regression/VisualRegression.vue'
+
+const { test } = defineProps<{ test: RunnerTestCase }>()
+
+interface HandledArtifact { artifact: TestArtifact; component: Component; props: object }
+
+type ComponentProps<T> = T extends new(...args: any) => { $props: infer P } ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any ? P
+    : object
+
+const handledArtifacts = computed<readonly HandledArtifact[]>(() => {
+  const handledArtifacts: HandledArtifact[] = []
+
+  for (const artifact of test.artifacts) {
+    switch (artifact.type) {
+      case 'internal:toMatchScreenshot': {
+        if (artifact.kind === 'visual-regression') {
+          handledArtifacts.push({
+            artifact,
+            component: VisualRegression,
+            props: { regression: artifact } satisfies ComponentProps<typeof VisualRegression>,
+          })
+        }
+
+        continue
+      }
+    }
+  }
+
+  return handledArtifacts
+})
+</script>
+
+<template>
+  <template v-if="handledArtifacts.length">
+    <h1 m-2>
+      Test Artifacts
+    </h1>
+    <div
+      v-for="{ artifact, component, props }, index of handledArtifacts"
+      :key="artifact.type + index"
+      bg="yellow-500/10"
+      text="yellow-500 sm"
+      p="x3 y2"
+      m-2
+      rounded
+      role="note"
+    >
+      <div flex="~ gap-2 items-center justify-between" overflow-hidden>
+        <div>
+          <span
+            v-if="artifact.location && artifact.location.file === test.file.filepath"
+            v-tooltip.bottom="'Open in Editor'"
+            title="Open in Editor"
+            class="flex gap-1 text-yellow-500/80 cursor-pointer"
+            ws-nowrap
+            @click="openLocation(test, artifact.location)"
+          >
+            {{ getLocationString(artifact.location) }}
+          </span>
+          <span
+            v-else-if="artifact.location && artifact.location.file !== test.file.filepath"
+            class="flex gap-1 text-yellow-500/80"
+            ws-nowrap
+          >
+            {{ getLocationString(artifact.location) }}
+          </span>
+        </div>
+      </div>
+      <component :is="component" v-bind="props" />
+    </div>
+  </template>
+</template>
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 33cdd436e..e75652145 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import type { RunnerTask, RunnerTestFile, RunnerTestSuite } from 'vitest'
 import { computed } from 'vue'
-import { browserState, config } from '~/composables/client'
+import { config } from '~/composables/client'
 import { isDark } from '~/composables/dark'
 import { mapLeveledTaskStacks } from '~/composables/error'
-import { openScreenshot, useScreenshot } from '~/composables/screenshot'
-import IconButton from '../IconButton.vue'
-import Modal from '../Modal.vue'
-import ScreenshotError from './ScreenshotError.vue'
+import FailureScreenshot from '../FailureScreenshot.vue'
 import ViewReportError from './ViewReportError.vue'
 
 const props = defineProps<{
@@ -60,13 +57,6 @@ const failed = computed(() => {
     ? mapLeveledTaskStacks(isDark.value, failedFlatMap)
     : failedFlatMap
 })
-
-const {
-  currentTask,
-  showScreenshot,
-  showScreenshotModal,
-  currentScreenshotUrl,
-} = useScreenshot()
 </script>
 
 <template>
@@ -87,22 +77,7 @@ const {
         >
           <div flex="~ gap-2 items-center">
             <span>{{ task.name }}</span>
-            <template v-if="browserState && task.meta?.failScreenshotPath">
-              <IconButton
-                v-tooltip.bottom="'View screenshot error'"
-                class="!op-100"
-                icon="i-carbon:image"
-                title="View screenshot error"
-                @click="showScreenshotModal(task)"
-              />
-              <IconButton
-                v-tooltip.bottom="'Open screenshot error in editor'"
-                class="!op-100"
-                icon="i-carbon:image-reference"
-                title="Open screenshot error in editor"
-                @click="openScreenshot(task)"
-              />
-            </template>
+            <FailureScreenshot :task="task" />
           </div>
           <div
             v-if="task.result?.htmlError"
@@ -129,20 +104,6 @@ const {
         All tests passed in this file
       </div>
     </template>
-    <template v-if="browserState">
-      <Modal v-model="showScreenshot" direction="right">
-        <template v-if="currentTask">
-          <Suspense>
-            <ScreenshotError
-              :file="currentTask.file.filepath"
-              :name="currentTask.name"
-              :url="currentScreenshotUrl"
-              @close="showScreenshot = false"
-            />
-          </Suspense>
-        </template>
-      </Modal>
-    </template>
   </div>
 </template>
 
diff --git a/packages/ui/client/components/views/ViewTestReport.vue b/packages/ui/client/components/views/ViewTestReport.vue
index 0f0f249fc..19e841bf6 100644
--- a/packages/ui/client/components/views/ViewTestReport.vue
+++ b/packages/ui/client/components/views/ViewTestReport.vue
@@ -1,19 +1,14 @@
 <script setup lang="ts">
-import type { TestArtifactLocation } from '@vitest/runner'
 import type { RunnerTestCase } from 'vitest'
-import { relative } from 'pathe'
 import { computed } from 'vue'
 import { getAttachmentUrl, sanitizeFilePath } from '~/composables/attachments'
-import { browserState, config } from '~/composables/client'
-import { showAttachmentSource } from '~/composables/codemirror'
+import { config } from '~/composables/client'
 import { isDark } from '~/composables/dark'
 import { mapLeveledTaskStacks } from '~/composables/error'
-import { openScreenshot, useScreenshot } from '~/composables/screenshot'
+import { getLocationString, openLocation } from '~/composables/location'
 import AnnotationAttachmentImage from '../AnnotationAttachmentImage.vue'
-import VisualRegression from '../artifacts/visual-regression/VisualRegression.vue'
-import IconButton from '../IconButton.vue'
-import Modal from '../Modal.vue'
-import ScreenshotError from './ScreenshotError.vue'
+import Artifacts from '../artifacts/Artifacts.vue'
+import FailureScreenshot from '../FailureScreenshot.vue'
 import ViewReportError from './ViewReportError.vue'
 
 const props = defineProps<{
@@ -27,27 +22,9 @@ const failed = computed(() => {
   return mapLeveledTaskStacks(isDark.value, [props.test])[0] as RunnerTestCase | null
 })
 
-function openLocation(location?: TestArtifactLocation) {
-  return showAttachmentSource(props.test, location)
-}
-
-const {
-  currentTask,
-  showScreenshot,
-  showScreenshotModal,
-  currentScreenshotUrl,
-} = useScreenshot()
-
-function getLocationString(location: TestArtifactLocation) {
-  const root = config.value.root
-  const path = root ? relative(root, location.file) : location.file
-  return `${path}:${location.line}:${location.column}`
-}
-
 const kWellKnownMeta = new Set([
   'benchmark',
   'typecheck',
-  'failScreenshotPath',
 ])
 const meta = computed(() => {
   return Object.entries(props.test.meta).filter(([name]) => {
@@ -66,24 +43,7 @@ const meta = computed(() => {
         m-2
         rounded
       >
-        <div flex="~ gap-2 items-center">
-          <template v-if="browserState && test.meta?.failScreenshotPath">
-            <IconButton
-              v-tooltip.bottom="'View screenshot error'"
-              class="!op-100"
-              icon="i-carbon:image"
-              title="View screenshot error"
-              @click="showScreenshotModal(test)"
-            />
-            <IconButton
-              v-tooltip.bottom="'Open screenshot error in editor'"
-              class="!op-100"
-              icon="i-carbon:image-reference"
-              title="Open screenshot error in editor"
-              @click="openScreenshot(test)"
-            />
-          </template>
-        </div>
+        <FailureScreenshot :task="test" />
         <div
           v-if="test.result?.htmlError"
           class="scrolls scrolls-rounded task-error"
@@ -142,7 +102,7 @@ const meta = computed(() => {
               title="Open in Editor"
               class="flex gap-1 text-yellow-500/80 cursor-pointer"
               ws-nowrap
-              @click="openLocation(annotation.location)"
+              @click="openLocation(test, annotation.location)"
             >
               {{ getLocationString(annotation.location) }}
             </span>
@@ -166,44 +126,7 @@ const meta = computed(() => {
         <AnnotationAttachmentImage :annotation="annotation" />
       </div>
     </template>
-    <template v-if="test.artifacts.length">
-      <h1 m-2>
-        Test Artifacts
-      </h1>
-      <div
-        v-for="artifact, index of test.artifacts"
-        :key="artifact.type + index"
-        bg="yellow-500/10"
-        text="yellow-500 sm"
-        p="x3 y2"
-        m-2
-        rounded
-        role="note"
-      >
-        <div flex="~ gap-2 items-center justify-between" overflow-hidden>
-          <div>
-            <span
-              v-if="artifact.location && artifact.location.file === test.file.filepath"
-              v-tooltip.bottom="'Open in Editor'"
-              title="Open in Editor"
-              class="flex gap-1 text-yellow-500/80 cursor-pointer"
-              ws-nowrap
-              @click="openLocation(artifact.location)"
-            >
-              {{ getLocationString(artifact.location) }}
-            </span>
-            <span
-              v-else-if="artifact.location && artifact.location.file !== test.file.filepath"
-              class="flex gap-1 text-yellow-500/80"
-              ws-nowrap
-            >
-              {{ getLocationString(artifact.location) }}
-            </span>
-          </div>
-        </div>
-        <VisualRegression v-if="artifact.type === 'internal:toMatchScreenshot' && artifact.kind === 'visual-regression'" :regression="artifact" />
-      </div>
-    </template>
+    <Artifacts :test="test" />
     <template v-if="meta.length">
       <h1 m-2>
         Test Meta
@@ -225,20 +148,6 @@ const meta = computed(() => {
         </template>
       </div>
     </template>
-    <template v-if="browserState">
-      <Modal v-model="showScreenshot" direction="right">
-        <template v-if="currentTask">
-          <Suspense>
-            <ScreenshotError
-              :file="currentTask.file.filepath"
-              :name="currentTask.name"
-              :url="currentScreenshotUrl"
-              @close="showScreenshot = false"
-            />
-          </Suspense>
-        </template>
-      </Modal>
-    </template>
   </div>
 </template>
 
diff --git a/packages/ui/client/composables/location.ts b/packages/ui/client/composables/location.ts
new file mode 100644
index 000000000..d45578748
--- /dev/null
+++ b/packages/ui/client/composables/location.ts
@@ -0,0 +1,15 @@
+import type { RunnerTestCase, TestArtifactLocation } from 'vitest'
+import { relative } from 'pathe'
+import { config } from './client'
+import { showAttachmentSource } from './codemirror'
+
+export function openLocation(test: RunnerTestCase, location?: TestArtifactLocation) {
+  return showAttachmentSource(test, location)
+}
+
+export function getLocationString(location: TestArtifactLocation) {
+  const root = config.value.root
+  const path = root ? relative(root, location.file) : location.file
+
+  return `${path}:${location.line}:${location.column}`
+}
diff --git a/packages/ui/client/composables/screenshot.ts b/packages/ui/client/composables/screenshot.ts
deleted file mode 100644
index c9924a4f0..000000000
--- a/packages/ui/client/composables/screenshot.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { RunnerTask } from 'vitest'
-import { computed, ref } from 'vue'
-
-export function openScreenshot(task: RunnerTask) {
-  const filePath = task.meta?.failScreenshotPath
-  if (filePath) {
-    fetch(`/__open-in-editor?file=${encodeURIComponent(filePath)}`)
-  }
-}
-
-export function useScreenshot() {
-  const showScreenshot = ref(false)
-  const timestamp = ref(Date.now())
-  const currentTask = ref<RunnerTask | undefined>()
-  const currentScreenshotUrl = computed(() => {
-    const id = currentTask.value?.id
-    // force refresh
-    const t = timestamp.value
-    // browser plugin using /, change this if base can be modified
-    return id ? `/__screenshot-error?id=${encodeURIComponent(id)}&t=${t}` : undefined
-  })
-
-  function showScreenshotModal(task: RunnerTask) {
-    currentTask.value = task
-    timestamp.value = Date.now()
-    showScreenshot.value = true
-  }
-
-  return {
-    currentTask,
-    showScreenshot,
-    currentScreenshotUrl,
-    showScreenshotModal,
-  }
-}
diff --git a/packages/vitest/src/node/reporters/base.ts b/packages/vitest/src/node/reporters/base.ts
index 207b9db2d..eda6d4f1a 100644
--- a/packages/vitest/src/node/reporters/base.ts
+++ b/packages/vitest/src/node/reporters/base.ts
@@ -857,7 +857,19 @@ export abstract class BaseReporter implements Reporter {
         )
       }
 
-      const screenshotPaths = tasks.map(t => t.meta?.failScreenshotPath).filter(screenshot => screenshot != null)
+      const screenshotPaths = tasks.reduce<string[]>((paths, t) => {
+        if (t.type === 'test') {
+          for (const artifact of t.artifacts) {
+            if (artifact.type === 'internal:failureScreenshot') {
+              if (artifact.attachments.length) {
+                paths.push(artifact.attachments[0].originalPath)
+              }
+            }
+          }
+        }
+
+        return paths
+      }, [])
 
       this.ctx.logger.printError(error, {
         project: this.ctx.getProjectByName(tasks[0].file.projectName || ''),
diff --git a/packages/vitest/src/types/global.ts b/packages/vitest/src/types/global.ts
index adf8f130f..fc3bb5ee3 100644
--- a/packages/vitest/src/types/global.ts
+++ b/packages/vitest/src/types/global.ts
@@ -108,7 +108,6 @@ declare module '@vitest/runner' {
   interface TaskMeta {
     typecheck?: boolean
     benchmark?: boolean
-    failScreenshotPath?: string
   }
 
   interface File {
diff --git a/test/cli/test/artifacts.test.ts b/test/cli/test/artifacts.test.ts
index 0be46d09d..6ecfc22f5 100644
--- a/test/cli/test/artifacts.test.ts
+++ b/test/cli/test/artifacts.test.ts
@@ -243,7 +243,7 @@ describe('API', () => {
     `)
   })
 
-  test('cannot record artifacts when the test finished running', async () => {
+  test('can record artifacts even after the test finished running', async () => {
     const { stderr } = await runInlineTests({
       'basic.test.ts': `
         import { recordArtifact } from 'vitest'
@@ -258,7 +258,7 @@ describe('API', () => {
         })
       `,
     }, { globals: true })
-    expect(stderr).toContain('Cannot record a test artifact outside of the test run. The test "finished early" finished running with the "pass" state already.')
+    expect(stderr).toBe('')
   })
 })
 
-- 
2.51.2