feat(browser): add an option to take screenshots if the browser test fails

docs/config/index.md

@@ -1620,6 +1620,20 @@ Should Vitest UI be injected into the page. By default, injects UI iframe during
 
 Default iframe's viewport.
 
+#### browser.screenshotDirectory {#browser-screenshotdirectory}
+
+- **Type:** `string`
+- **Default:** `__snapshots__` in the test file directory
+
+Path to the snapshots directory relative to the `root`.
+
+#### browser.screenshotFailures {#browser-screenshotfailures}
+
+- **Type:** `boolean`
+- **Default:** `!browser.ui`
+
+Should Vitest take screenshots if the test fails.
+
 #### browser.orchestratorScripts {#browser-orchestratorscripts}
 
 - **Type:** `BrowserScript[]`

packages/browser/src/client/tester/runner.ts

@@ -4,6 +4,7 @@ import type { VitestExecutor } from 'vitest/execute'
 import { NodeBenchmarkRunner, VitestTestRunner } from 'vitest/runners'
 import { loadDiffConfig, loadSnapshotSerializers, takeCoverageInsideWorker } from 'vitest/browser'
 import { TraceMap, originalPositionFor } from 'vitest/utils'
+import { page } from '@vitest/browser/context'
 import { importId } from '../utils'
 import { globalChannel } from '../channel'
 import { VitestBrowserSnapshotEnvironment } from './snapshot'
@@ -53,6 +54,12 @@ export function createBrowserRunner(
       }
     }
 
+    onTaskFinished = async (task: Task) => {
+      if (this.config.browser.screenshotFailures && task.result?.state === 'fail') {
+        await page.screenshot()
+      }
+    }
+
     onCancel = (reason: CancelReason) => {
       super.onCancel?.(reason)
       globalChannel.postMessage({ type: 'cancel', reason })

packages/browser/src/client/tester/tester.ts

@@ -92,8 +92,8 @@ async function runTests(files: string[]) {
   try {
     preparedData = await prepareTestEnvironment(files)
   }
-  catch (error) {
-    debug('data cannot be loaded because it threw an error')
+  catch (error: any) {
+    debug('data cannot be loaded because it threw an error', error.stack || error.message)
     await client.rpc.onUnhandledError(serializeError(error), 'Preload Error')
     done(files)
     return

packages/browser/src/client/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
         orchestrator: resolve(__dirname, './orchestrator.html'),
         tester: resolve(__dirname, './tester/tester.html'),
       },
-      external: [/__virtual_vitest__/],
+      external: [/__virtual_vitest__/, '@vitest/browser/context'],
     },
   },
   plugins: [

packages/runner/src/run.ts

@@ -262,6 +262,13 @@ export async function runTest(test: Test | Custom, runner: VitestRunner) {
         return
       }
 
+      try {
+        await runner.onTaskFinished?.(test)
+      }
+      catch (e) {
+        failTask(test.result, e, runner.config.diffOptions)
+      }
+
       try {
         await callSuiteHook(suite, test, 'afterEach', runner, [
           test.context,

packages/runner/src/types/runner.ts

@@ -80,6 +80,10 @@ export interface VitestRunner {
     test: Task,
     options: { retry: number; repeats: number }
   ) => unknown
+  /**
+   * When the task has finished running, but before cleanup hooks are called
+   */
+  onTaskFinished?: (test: Task) => unknown
   /**
    * Called after result and state are set.
    */

packages/vitest/src/node/config.ts

@@ -683,6 +683,7 @@ export function resolveConfig(
       resolved.browser.screenshotDirectory,
     )
   }
+  resolved.browser.screenshotFailures ??= !resolved.browser.ui
 
   resolved.browser.viewport ??= {} as any
   resolved.browser.viewport.width ??= 414

packages/vitest/src/types/browser.ts

@@ -135,6 +135,13 @@ export interface BrowserConfigOptions {
    * @default __screenshots__
    */
   screenshotDirectory?: string
+
+  /**
+   * Should Vitest take screenshots if the test fails
+   * @default !browser.ui
+   */
+  screenshotFailures?: boolean
+
   /**
    * Scripts injected into the tester iframe.
    */