vitest-plugin-vis 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -20,6 +20,8 @@
   },
   "type": "module",
   "imports": {
+    "#vitest-plugin-vis": "./src/index.ts",
+    "#vitest-plugin-vis/client-api": "./src/client-api.ts",
     "#vitest-plugin-vis/config": "./src/config.ts",
     "#vitest-plugin-vis/setup": "./src/setup.ts"
   },
@@ -56,6 +58,10 @@
       "types": "./dist/setup.d.mts",
       "default": "./dist/setup.mjs"
     },
+    "./setup-api": {
+      "types": "./dist/setup-api.d.mts",
+      "default": "./dist/setup-api.mjs"
+    },
     "./testing": {
       "types": "./dist/testing.d.mts",
       "default": "./dist/testing.mjs"
@@ -78,38 +84,39 @@
     "pngjs": "^7.0.0",
     "rimraf": "^6.0.1",
     "ssim.js": "^3.5.0",
-    "type-plus": "8.0.0-beta.7"
+    "type-plus": "8.0.0-beta.8"
   },
   "devDependencies": {
     "@repobuddy/storybook": "^2.1.2",
     "@repobuddy/typescript": "^2.1.0",
-    "@storybook-community/storybook-dark-mode": "^7.0.3",
-    "@storybook/addon-docs": "^10.1.2",
-    "@storybook/addon-vitest": "^10.1.2",
-    "@storybook/react-vite": "^10.1.2",
+    "@storybook-community/storybook-dark-mode": "^7.1.0",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-mdx-gfm": "^8.6.14",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
     "@tailwindcss/vite": "^4.1.14",
     "@types/is-ci": "^3.0.4",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.2",
-    "@vitest/browser": "^4.0.9",
-    "@vitest/browser-playwright": "^4.0.9",
-    "@vitest/browser-webdriverio": "^4.0.9",
-    "@vitest/coverage-istanbul": "^4.0.9",
-    "@vitest/coverage-v8": "^4.0.9",
-    "@vitest/expect": "^4.0.9",
-    "@vitest/ui": "4.0.9",
+    "@vitest/browser": "^4.0.16",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/browser-webdriverio": "^4.0.16",
+    "@vitest/coverage-istanbul": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/expect": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
     "cross-env": "^10.0.0",
     "never-fail": "^1.1.4",
     "npm-run-all2": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "storybook": "^10.1.2",
+    "storybook": "^10.1.10",
     "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^4.1.14",
-    "tsdown": "^0.16.6",
+    "tsdown": "^0.19.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
-    "vitest": "^4.0.9",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
     "vitest-browser-react": "^2.0.2"
   },
   "peerDependencies": {

package/readme.md

@@ -179,12 +179,12 @@ you can use `snapshotSubpath` to customize the snapshot sub-path to avoid confli
 
 ```ts
 // vitest.config.ts
-import { storybookVis } from 'storybook-addon-vis/vitest-plugin'
+import { vis } from 'vitest-plugin-vis/config'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
 	plugins: [
-		storybookVis({
+		vis({
 			// keep the folder structure
 			snapshotSubpath: (subpath) => subpath
 		})
@@ -245,12 +245,14 @@ export default defineConfig({
 		vis({
 			snapshotRootDir: ({
 				ci, // true if running on CI
+				rootDir, // base directory for snapshots (default: '__vis__')
 				platform, // process.platform
 				providerName, // 'playwright' or 'webdriverio'
 				browserName, // 'chromium', 'firefox', etc.
+				projectName, // instance name when using multiple browser instances
 				screenshotFailures, // from `browser` config
 				screenshotDirectory, // from `browser` config
-			}) => `__vis__/${ci ? platform : 'local'}`,
+			}) => `${rootDir}/${ci ? platform : 'local'}`,
 			snapshotSubpath: ({ subpath }) => trimCommonFolder(subpath),
 			// Alphanumeric characters, and underscore are allowed. Dash is not allowed.
 			snapshotKey: 'auto',
@@ -259,6 +261,49 @@ export default defineConfig({
 })
 ```
 
+#### Multiple browser instances
+
+When using multiple browser instances (e.g., different viewports or browsers),
+each instance runs the same tests and would overwrite snapshots if they shared the same directory.
+Use `projectName` in `snapshotRootDir` to separate snapshots per instance:
+
+```ts
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+import { playwright } from '@vitest/browser-playwright'
+import { vis } from 'vitest-plugin-vis/config'
+
+export default defineConfig({
+	plugins: [
+		vis({
+			snapshotRootDir({ ci, rootDir, projectName, platform }) {
+				return `${rootDir}/${ci ? platform : 'local'}/${projectName}`
+			},
+		}),
+	],
+	test: {
+		browser: {
+			enabled: true,
+			provider: playwright(),
+			instances: [
+				{ browser: 'chromium', name: 'HD', viewport: { width: 1280, height: 720 } },
+				{ browser: 'chromium', name: 'SVGA', viewport: { width: 800, height: 600 } },
+			],
+		},
+	},
+})
+```
+
+With this configuration, snapshots are stored in separate directories per instance:
+
+```sh
+__vis__/local/HD/__baselines__/...
+__vis__/local/SVGA/__baselines__/...
+```
+
+On CI, the `projectName` corresponds to the `name` of each instance.
+See [vitest.config.playwright.ts](vitest.config.playwright.ts) for a full example.
+
 ### Customizing auto snapshot subject
 
 By default, auto snapshots are taken from the `document.body` element.

package/src/{client/ctx.ts → auto_snapshots/_ctx.ts}

@@ -1,12 +1,10 @@
-import { getCurrentSuite, getCurrentTest } from './vitest_suite_proxy.ts'
+import { getCurrentSuite, getCurrentTest } from '../client/external/vitest/vitest_suite_proxy.ts'
 
 export const ctx = {
-	autoEnabled: undefined as boolean | undefined,
 	getCurrentTest,
 	getCurrentSuite,
 	__test__reset() {
 		ctx.getCurrentTest = getCurrentTest
 		ctx.getCurrentSuite = getCurrentSuite
-		ctx.autoEnabled = undefined
 	},
 }

package/src/auto_snapshots/_extract_auto_snapshot_options.ts

@@ -0,0 +1,26 @@
+import { NAME } from '../client-api.ts'
+import type { MetaTask } from './auto_snapshot_options.ts'
+import type { SnapshotMeta } from './snapshot_meta.ts'
+
+export function extractAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(
+	task: MetaTask,
+): M | undefined {
+	if (!task) return
+
+	const list: any[] = []
+	let current = task
+	while (current?.suite) {
+		list.unshift(current.suite.meta)
+		current = current.suite
+	}
+	list.unshift(task.file?.meta)
+	list.push(task.meta)
+	return list.reduce(
+		(acc, cur) => {
+			const meta = cur?.[NAME]
+			// biome-ignore lint/performance/noAccumulatingSpread: I think this is needed
+			return meta ? Object.assign({}, acc, meta) : acc
+		},
+		{ enable: false },
+	)
+}

package/src/{client → auto_snapshots}/auto_snapshot_options.mdx

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
-import { setAutoSnapshotOptions } from '../index'
 
-<Meta title="vitest-plugin-vis/setAutoSnapshotOptions" />
+<Meta title="auto snapshots/setAutoSnapshotOptions" />
 
 # setAutoSnapshotOptions
 

package/src/{client → auto_snapshots}/auto_snapshot_options.ts

@@ -1,7 +1,7 @@
 import { assertSnapshotKeyWithoutDash } from '../shared/asserts.ts'
 import { NAME } from '../shared/constants.ts'
 import type { ComparisonMethod } from '../shared/types.ts'
-import { ctx } from './ctx.ts'
+import { ctx } from './_ctx.ts'
 import type { SnapshotMeta } from './snapshot_meta.ts'
 
 type Suite = { meta: Record<string, any>; suite?: Suite | undefined }
@@ -62,25 +62,3 @@ function getTask(): MetaTask | undefined {
 function parseMeta<M extends ComparisonMethod>(meta: boolean | SnapshotMeta<M>): SnapshotMeta<M> {
 	return typeof meta === 'boolean' ? ({ enable: meta } as any) : { enable: true, ...meta }
 }
-
-export function extractAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(
-	task: MetaTask,
-): M | undefined {
-	if (!task) return
-
-	const list: any[] = []
-	let current = task
-	while (current?.suite) {
-		list.unshift(current.suite.meta)
-		current = current.suite
-	}
-	list.unshift(task.file?.meta)
-	list.push(task.meta)
-	return list.reduce(
-		(acc, cur) => {
-			const meta = cur?.[NAME]
-			return meta ? Object.assign({}, acc, meta) : acc
-		},
-		{ enable: false },
-	)
-}

package/src/client/actions/has_image_snapshot_action.ts

@@ -1,4 +1,4 @@
-import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../commands.ts'
+import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../shared/commands.types.ts'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 
 export function hasImageSnapshotAction(

package/src/client/actions/load_image_snapshot_results_action.ts

@@ -1,4 +1,4 @@
-import type { LoadImageSnapshotResultsCommand } from '../../server/commands/load_image_snapshot_results.ts'
+import type { LoadImageSnapshotResultsCommand } from '../../shared/commands.types.ts'
 
 export function loadImageSnapshotResultsAction(commands: LoadImageSnapshotResultsCommand, taskId: string) {
 	return commands.loadImageSnapshotResults(taskId)

package/src/client/actions/match_image_snapshot_action.ts

@@ -1,11 +1,13 @@
 import type { BrowserCommands } from 'vitest/browser'
-import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
 import { isBase64String } from '../../shared/base64.ts'
+import type {
+	ImageSnapshotNextIndexCommand,
+	PrepareImageSnapshotComparisonCommand,
+} from '../../shared/commands.types.ts'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
-import { compareImageSnapshot } from '../compare_image_snapshot.ts'
-import { convertElementToCssSelector } from '../selector.ts'
+import { convertElementToCssSelector } from '../external/browser/selector.ts'
+import { compareImageSnapshot } from '../snapshot/compare_image_snapshot.ts'
 
 export async function matchImageSnapshotAction(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,
@@ -17,8 +19,6 @@ export async function matchImageSnapshotAction(
 
 	const info = await commands.prepareImageSnapshotComparison(taskId, parseImageSnapshotSubject(subject), options)
 
-	if (!info) return
-
 	return compareImageSnapshot(commands, taskId, info, options)
 }
 

package/src/client/actions/match_page_image_snapshot_action.ts

@@ -1,9 +1,11 @@
 import type { BrowserCommands } from 'vitest/browser'
-import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
+import type {
+	ImageSnapshotNextIndexCommand,
+	PrepareImageSnapshotComparisonCommand,
+} from '../../shared/commands.types.ts'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
-import { compareImageSnapshot } from '../compare_image_snapshot.ts'
+import { compareImageSnapshot } from '../snapshot/compare_image_snapshot.ts'
 
 export async function matchPageImageSnapshotAction(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/expect/_ctx.ts

@@ -0,0 +1,10 @@
+import { commands } from 'vitest/browser'
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export const ctx = {
+	commands,
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,9 +1,8 @@
-import { commands } from 'vitest/browser'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 import { matchImageSnapshotAction } from '../actions/match_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
 import { success } from './expectation_result.ts'
 
 export function toMatchImageSnapshot(
@@ -26,5 +25,5 @@ export function toMatchImageSnapshot(
 		)
 	}
 
-	return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success)
+	return matchImageSnapshotAction(ctx.commands, toTaskId(test), subject, options).then(() => success)
 }

package/src/client/external/browser/has_render_content.ts

@@ -0,0 +1,3 @@
+export function hasRenderContent() {
+	return document.body.childElementCount > 0
+}

package/src/client/{image_resizer.ts → external/browser/image_resizer.ts}

@@ -1,4 +1,4 @@
-import { isSameSize } from '../shared/is_same_size.ts'
+import { isSameSize } from '../../../shared/is_same_size.ts'
 
 export const createImageResizer =
 	({ width, height }: { width: number; height: number }) =>

package/src/client/{vitest_suite_proxy.ts → external/vitest/vitest_suite_proxy.ts}

@@ -1,4 +1,4 @@
-import type { SnapshotTestMeta } from '../shared/types.ts'
+import type { SnapshotTestMeta } from '../../../shared/types.ts'
 
 let vitestSuite: Awaited<typeof import('vitest/suite')>
 

package/src/client/{align_images.ts → image/align_images.ts}

@@ -1,6 +1,6 @@
-import { getMaxSize } from '../shared/get_max_size.ts'
-import { isSameSize } from '../shared/is_same_size.ts'
-import { createImageResizer } from './image_resizer.ts'
+import { getMaxSize } from '../../shared/get_max_size.ts'
+import { isSameSize } from '../../shared/is_same_size.ts'
+import { createImageResizer } from '../external/browser/image_resizer.ts'
 
 export function alignImagesToSameSize(image1: ImageData, image2: ImageData): [image1: ImageData, image2: ImageData] {
 	if (isSameSize(image1, image2)) return [image1, image2] as const

package/src/client/page/_ctx.ts

@@ -0,0 +1,12 @@
+import { type BrowserPage, commands } from 'vitest/browser'
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export type { BrowserPage }
+
+export const ctx = {
+	commands,
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/page/has_image_snapshot.ts

@@ -1,8 +1,8 @@
-import { type BrowserPage, commands } from 'vitest/browser'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 import { hasImageSnapshotAction } from '../actions/has_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import type { BrowserPage } from './_ctx.ts'
+import { ctx } from './_ctx.ts'
 
 export interface HasImageSnapshotAction {
 	/**
@@ -23,5 +23,5 @@ export function hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotKeyOp
 				"concurrent tests run at the same time in the same iframe and affect each other's environment. ",
 		)
 	}
-	return hasImageSnapshotAction(commands, toTaskId(test), options)
+	return hasImageSnapshotAction(ctx.commands, toTaskId(test), options)
 }

package/src/client/page/to_match_image_snapshot.ts

@@ -1,8 +1,7 @@
-import { commands } from 'vitest/browser'
 import type { ComparisonMethod, ToMatchPageImageSnapshotOptions } from '../../shared/types.ts'
 import { matchPageImageSnapshotAction } from '../actions/match_page_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
 
 export interface ToMatchImageSnapshotAction {
 	toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
@@ -25,5 +24,5 @@ export function toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
 		)
 	}
 
-	return matchPageImageSnapshotAction(commands, toTaskId(test), options)
+	return matchPageImageSnapshotAction(ctx.commands, toTaskId(test), options)
 }

package/src/client/{compare_image_snapshot.logic.ts → snapshot/compare_image_snapshot.logic.ts}

@@ -1,4 +1,4 @@
-import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
+import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 
 export function prettifyOptions(options: ToMatchImageSnapshotOptions<any> | undefined) {
 	if (!options) return 'none'
@@ -10,5 +10,5 @@ export function prettifyOptions(options: ToMatchImageSnapshotOptions<any> | unde
 		options.diffOptions ? `diffOptions: ${JSON.stringify(options.diffOptions)}` : '',
 	]
 		.filter(Boolean)
-		.join('\n                 ')
+		.join('\n                ')
 }

package/src/client/{compare_image_snapshot.ts → snapshot/compare_image_snapshot.ts}

@@ -1,17 +1,16 @@
-import type { BrowserCommands } from 'vitest/browser'
 import dedent from 'dedent'
 import { resolve } from 'pathe'
-import type { ImageSnapshotNextIndexCommand } from '../commands.ts'
+import type { BrowserCommands } from 'vitest/browser'
 import type {
-	ImageSnapshotComparisonInfo,
+	ImageSnapshotNextIndexCommand,
 	PrepareImageSnapshotComparisonCommand,
-} from '../server/commands/prepare_image_snapshot_comparison.ts'
-import { compareImage } from '../shared/compare_image.ts'
-import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
-import { alignImagesToSameSize } from './align_images.ts'
+} from '../../shared/commands.types.ts'
+import { compareImage } from '../../shared/compare_image.ts'
+import type { ImageSnapshotComparisonInfo, ToMatchImageSnapshotOptions } from '../../shared/types.ts'
+import { toDataURL, toImageData } from '../external/browser/image_data.ts'
+import { server } from '../external/vitest/vitest_browser_context_proxy.ts'
+import { alignImagesToSameSize } from '../image/align_images.ts'
 import { prettifyOptions } from './compare_image_snapshot.logic.ts'
-import { toDataURL, toImageData } from './image_data.ts'
-import { server } from './vitest_browser_context_proxy.ts'
 
 export async function compareImageSnapshot(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,
@@ -21,8 +20,22 @@ export async function compareImageSnapshot(
 ) {
 	options = { ...info, ...options } as any
 
-	const baselineImage = await toImageData(info.baseline)
 	const resultImage = await toImageData(info.result)
+
+	if (!info.baseline) {
+		if (server.config.snapshotOptions.updateSnapshot === 'all') {
+			await writeSnapshot(commands, resolve(info.projectRoot, info.baselinePath), resultImage)
+			return
+		}
+		throw new Error(
+			dedent`Snapshot \`${taskId}\` has no baseline image. Please review the new snapshot and update the baseline image.
+
+				Options:    ${prettifyOptions(options)}
+				Actual:     ${resolve(info.projectRoot, info.resultPath)}`,
+		)
+	}
+
+	const baselineImage = await toImageData(info.baseline)
 	const [baselineAlignedImage, resultAlignedImage] = alignImagesToSameSize(baselineImage, resultImage)
 	const { width, height } = baselineAlignedImage
 	const diffImage = new ImageData(width, height)

package/src/client/snapshot/should_take_snapshot.ts

@@ -0,0 +1,6 @@
+import type { SnapshotMeta } from '../../auto_snapshots/snapshot_meta.ts'
+import { hasRenderContent } from '../external/browser/has_render_content.ts'
+
+export function shouldTakeSnapshot(meta: SnapshotMeta<any> | undefined) {
+	return hasRenderContent() && meta?.enable
+}

package/src/client/suite/_ctx.ts

@@ -0,0 +1,8 @@
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export const ctx = {
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/suite/auto_snapshot_matcher.ts

@@ -0,0 +1,67 @@
+import dedent from 'dedent'
+import { extractAutoSnapshotOptions } from '../../auto_snapshots/_extract_auto_snapshot_options.ts'
+import type { SnapshotMeta } from '../../auto_snapshots/snapshot_meta.ts'
+import type { SetupVisSuiteCommand } from '../../shared/commands.types.ts'
+import type { ComparisonMethod } from '../../shared/types.ts'
+import { shouldTakeSnapshot } from '../snapshot/should_take_snapshot.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
+
+export function autoSnapshotMatcher<GM extends Record<string, any> | unknown = unknown>(
+	commands: SetupVisSuiteCommand,
+	expect: any,
+) {
+	let subject: string | undefined
+
+	return {
+		async setup() {
+			subject = (await commands.setupVisSuite()).subject
+		},
+		createMatcher<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(
+			themes: Record<
+				string,
+				boolean | ((options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)
+			>,
+		) {
+			return async function matchImageSnapshot() {
+				const test = ctx.getCurrentTest()
+
+				const meta = extractAutoSnapshotOptions(test)
+				if (!shouldTakeSnapshot(meta)) return
+				const errors: Array<[string, Error]> = []
+				for (const themeId in themes) {
+					try {
+						await new Promise((a) => setTimeout(a, 10))
+						const theme = themes[themeId]
+						const r = typeof theme === 'function' ? await theme(meta! as any) : theme
+						if (r === false) continue
+						await expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
+							...meta,
+							snapshotKey: meta?.snapshotKey ?? themeId,
+						})
+					} catch (error) {
+						errors.push([themeId, error as Error])
+					}
+				}
+				if (errors.length > 0) {
+					if (errors.length === 1) throw errors[0]![1]
+					const taskId = toTaskId(test!)
+					throw new AggregateError(
+						errors,
+						dedent`Snapshot \`${taskId}\` mismatched
+
+					${errors
+						.map(([themeId, error]) => {
+							return `Theme \`${themeId}\` failed: ${error.message}`
+						})
+						.join('\n\n')}`,
+					)
+				}
+			}
+		},
+	}
+}
+
+function getSubject(selectors: string | undefined) {
+	return selectors ? (document.querySelector(selectors) ?? document.body) : document.body
+}

package/src/client-api.ts

@@ -1,12 +1,13 @@
 import './server/commands/augment.ts'
 
+export * from './auto_snapshots/auto_snapshot_options.ts'
 export * from './client/actions/has_image_snapshot_action.ts'
 export * from './client/actions/load_image_snapshot_results_action.ts'
 export * from './client/actions/match_image_snapshot_action.ts'
 export * from './client/actions/match_page_image_snapshot_action.ts'
-export { setAutoSnapshotOptions, type MetaTask } from './client/auto_snapshot_options.ts'
 export * from './client/expect/expectation_result.ts'
 export type * from './client/expect/to_match_image_snapshot.types.ts'
-export * from './client/task_id.ts'
+export * from './client/suite/auto_snapshot_matcher.ts'
+export * from './client/task/task_id.ts'
 export * from './shared/constants.ts'
 export type * from './shared/types.ts'