vitest-plugin-vis 3.5.1 → 4.0.0

package/src/client/setup/vis.ctx.ts

@@ -1,5 +1,6 @@
-import { commands } from '@vitest/browser/context'
-import { afterEach, beforeAll, beforeEach, vi, type Awaitable, type Suite } from 'vitest'
+import { afterEach, beforeAll, beforeEach, vi, type SuiteAPI } from 'vitest'
+import { commands } from 'vitest/browser'
+import type { Awaitable } from '../../shared/types.ts'
 
 export const ctx = {
 	beforeAll,
@@ -7,7 +8,7 @@ export const ctx = {
 	afterEach,
 	commands,
 	mock() {
-		const beforeAllListeners: Array<(suite: Readonly<Suite | File>) => Awaitable<unknown>> = []
+		const beforeAllListeners: Array<(suite: Readonly<SuiteAPI | File>) => Awaitable<unknown>> = []
 		beforeEach(() => {
 			ctx.beforeAll = vi.fn((fn) => {
 				beforeAllListeners.push(fn)

package/src/client/setup/vis.ts

@@ -1,4 +1,4 @@
-import { commands } from '@vitest/browser/context'
+import { commands } from 'vitest/browser'
 import { createVis } from './create_vis.ts'
 
 /**

package/src/client/snapshot_meta.ts

@@ -2,6 +2,11 @@ import type { ComparisonMethod, ImageSnapshotSubjectOptions, ToMatchImageSnapsho
 
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> &
 	ImageSnapshotSubjectOptions & {
+		/**
+		 * Whether to enable the snapshot.
+		 *
+		 * Default: `true`
+		 */
 		enable?: boolean | undefined
 		[key: string]: unknown
 	}

package/src/client/vitest_browser_context_proxy.ts

@@ -1,10 +1,10 @@
-import type { BrowserCommands, Platform } from '@vitest/browser/context'
 import type { SerializedConfig } from 'vitest'
+import type { BrowserCommands, Platform } from 'vitest/browser'
 
-let ctx: Awaited<typeof import('@vitest/browser/context')>
+let ctx: Awaited<typeof import('vitest/browser')>
 
 if ((globalThis as any).__vitest_browser__) {
-	import('@vitest/browser/context').then((m) => {
+	import('vitest/browser').then((m) => {
 		ctx = m
 	})
 }

package/src/config/vis.ts

@@ -1,4 +1,4 @@
-import type { PluginOption } from 'vite'
+import type { Plugin } from 'vitest/config'
 import { commands } from '../server/commands/commands.ts'
 import { setVisOption } from '../server/vis_options.ts'
 import { NAME } from '../shared/constants.ts'
@@ -20,12 +20,12 @@ export function vis<M extends ComparisonMethod = 'pixel'>(options: VisOptions<M>
 			return {
 				test: {
 					browser: {
-						name: undefined as unknown as string,
-						commands,
+						name: undefined,
+						commands: commands as any,
 					},
 					setupFiles: preset && preset !== 'none' && preset !== 'custom' ? [`vitest-plugin-vis/presets/${preset}`] : [],
 				},
 			}
 		},
-	} satisfies PluginOption
+	} satisfies Plugin
 }

package/src/server/browser_provider/browser_api.ts

@@ -1,8 +1,8 @@
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import { playwright } from './playwright.ts'
 import { webdriverio } from './webdriverio.ts'
 
-export function browserApi(context: BrowserCommandContext) {
+export function browserApi(context: ExtendedBrowserCommandContext) {
 	if (context.provider.name === 'playwright') {
 		return playwright(context)
 	}

package/src/server/browser_provider/playwright.ts

@@ -1,18 +1,20 @@
 import { resolve } from 'pathe'
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import type { BrowserApi } from './types.ts'
 
-export function playwright(context: BrowserCommandContext): BrowserApi {
+export function playwright(context: ExtendedBrowserCommandContext): BrowserApi {
+	const { page, iframe } = context
+
 	return {
 		async takeScreenshot(projectRoot, relativeFilePath, selector, options) {
-			const subject = context.iframe.locator(selector)
+			const subject = iframe.locator(selector)
 			return subject.screenshot({
 				path: resolve(projectRoot, relativeFilePath),
 				...options,
 			})
 		},
 		async takePageScreenshot(projectRoot, relativeFilePath, options) {
-			return context.page.screenshot({
+			return page.screenshot({
 				path: resolve(projectRoot, relativeFilePath),
 				...options,
 			})

package/src/server/browser_provider/webdriverio.ts

@@ -1,8 +1,8 @@
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import type { BrowserApi } from './types.ts'
 
-export function webdriverio(context: BrowserCommandContext): BrowserApi {
-	const browser = context.browser
+export function webdriverio(context: ExtendedBrowserCommandContext): BrowserApi {
+	const { browser } = context
 	return {
 		async takeScreenshot(_projectRoot, relativeFilePath, selector) {
 			const element = await browser.$(`${selector}`)

package/src/server/commands/_assertions.ts

@@ -1,11 +1,11 @@
 import { isAbsolute } from 'pathe'
 import type { RequiredPick } from 'type-plus'
-import type { BrowserCommandContext } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 
 export function assertTestPathDefined(
-	context: BrowserCommandContext,
+	context: ExtendedBrowserCommandContext,
 	commandName: string,
-): asserts context is RequiredPick<BrowserCommandContext, 'testPath'> {
+): asserts context is RequiredPick<ExtendedBrowserCommandContext, 'testPath'> {
 	if (!context.testPath) {
 		throw new Error(`'commands.${commandName}' requires testPath to be defined`)
 	}

package/src/server/commands/augment.ts

@@ -5,7 +5,7 @@ import type { PrepareImageSnapshotComparisonCommand } from './prepare_image_snap
 import type { PreparePageImageSnapshotComparisonCommand } from './prepare_page_image_snapshot_comparison.ts'
 import type { SetupVisSuiteCommand } from './setup_vis_suite.ts'
 
-declare module '@vitest/browser/context' {
+declare module 'vitest/browser' {
 	interface BrowserCommands
 		extends SetupVisSuiteCommand,
 			ImageSnapshotNextIndexCommand,

package/src/server/commands/has_image_snapshot.ts

@@ -1,12 +1,12 @@
-import type { BrowserCommand } from 'vitest/node'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
 export interface HasImageSnapshotCommand {
 	hasImageSnapshot(taskId: string, snapshotKey: string | undefined): Promise<boolean>
 }
 
-export const hasImageSnapshot: BrowserCommand<Parameters<HasImageSnapshotCommand['hasImageSnapshot']>> = async (
+export const hasImageSnapshot: ExtendedBrowserCommand<Parameters<HasImageSnapshotCommand['hasImageSnapshot']>> = async (
 	context,
 	taskId,
 	snapshotKey,

package/src/server/commands/image_snapshot_next_index.ts

@@ -1,5 +1,5 @@
-import type { BrowserCommand } from 'vitest/node'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
 export interface ImageSnapshotNextIndexCommand {
@@ -9,7 +9,7 @@ export interface ImageSnapshotNextIndexCommand {
 	imageSnapshotNextIndex(taskId: string): Promise<number>
 }
 
-export const imageSnapshotNextIndex: BrowserCommand<
+export const imageSnapshotNextIndex: ExtendedBrowserCommand<
 	Parameters<ImageSnapshotNextIndexCommand['imageSnapshotNextIndex']>
 > = async (context, taskId) => {
 	assertTestPathDefined(context, 'imageSnapshotNextIndex')

package/src/server/commands/load_image_snapshot_results.ts

@@ -1,5 +1,5 @@
-import type { BrowserCommand } from 'vitest/node'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
 export interface ImageSnapshotResult {
@@ -22,11 +22,10 @@ export interface LoadImageSnapshotResultsCommand {
 	loadImageSnapshotResults(taskId: string): Promise<ImageSnapshotResult[]>
 }
 
-export const loadImageSnapshotResults: BrowserCommand<[taskId: string]> = async (
+export const loadImageSnapshotResults: ExtendedBrowserCommand<[taskId: string]> = async (
 	context,
 	taskId,
 ): Promise<ImageSnapshotResult[]> => {
 	assertTestPathDefined(context, 'loadImageSnapshotResults')
-
 	return visServerContext.getSnapshotResults(context, taskId)
 }

package/src/server/commands/prepare_image_snapshot_comparison.ts

@@ -1,5 +1,4 @@
 import { resolve } from 'pathe'
-import type { BrowserCommand } from 'vitest/node'
 import { isBase64String } from '../../shared/base64.ts'
 import type {
 	FailureThresholdOptions,
@@ -12,6 +11,7 @@ import { getProjectRoot } from '../project.ts'
 import { takeSnapshot, takeSnapshotByBrowser } from '../snapshot.ts'
 import { snapshotWriter } from '../snapshot_writer.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 import type { MatchImageSnapshotOptions } from './types.ts'
 
@@ -56,7 +56,7 @@ export interface PrepareImageSnapshotComparisonCommand {
 	) => Promise<ImageSnapshotComparisonInfo | undefined>
 }
 
-export const prepareImageSnapshotComparison: BrowserCommand<
+export const prepareImageSnapshotComparison: ExtendedBrowserCommand<
 	Parameters<PrepareImageSnapshotComparisonCommand['prepareImageSnapshotComparison']>
 > = async (context, taskId, subject, options): Promise<ImageSnapshotComparisonInfo | undefined> => {
 	assertTestPathDefined(context, 'prepareImageSnapshotComparison')

package/src/server/commands/prepare_page_image_snapshot_comparison.ts

@@ -1,5 +1,4 @@
 import { resolve } from 'pathe'
-import type { BrowserCommand } from 'vitest/node'
 import type {
 	FailureThresholdOptions,
 	ImageSnapshotTimeoutOptions,
@@ -10,6 +9,7 @@ import { file } from '../externals/file.ts'
 import { getProjectRoot } from '../project.ts'
 import { takePageSnapshot } from '../snapshot.ts'
 import { visServerContext } from '../vis_server_context.ts'
+import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 import type { MatchImageSnapshotOptions } from './types.ts'
 
@@ -49,7 +49,7 @@ export interface PreparePageImageSnapshotComparisonCommand {
 	) => Promise<ImageSnapshotComparisonInfo | undefined>
 }
 
-export const preparePageImageSnapshotComparison: BrowserCommand<
+export const preparePageImageSnapshotComparison: ExtendedBrowserCommand<
 	Parameters<PreparePageImageSnapshotComparisonCommand['preparePageImageSnapshotComparison']>
 > = async (context, taskId, options) => {
 	assertTestPathDefined(context, 'preparePageImageSnapshotComparison')

package/src/server/commands/setup_vis_suite.ts

@@ -1,7 +1,7 @@
 import type { Pick } from 'type-plus'
-import type { BrowserCommand } from 'vitest/node'
 import type { VisOptions } from '../../config/types.ts'
 import { setupSuite } from '../suite.ts'
+import type { ExtendedBrowserCommand, ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
 export interface SetupVisSuiteCommand {
@@ -26,7 +26,7 @@ export interface SetupVisSuiteCommand {
 	>
 }
 
-export const setupVisSuite: BrowserCommand<[]> = async (context): Promise<{ subject: string | undefined }> => {
+export const setupVisSuite: ExtendedBrowserCommand<[]> = async (context): Promise<{ subject: string | undefined }> => {
 	assertTestPathDefined(context, 'setupVisSuite')
-	return setupSuite(context)
+	return setupSuite(context as unknown as ExtendedBrowserCommandContext)
 }

package/src/server/project.ts

@@ -1,13 +1,14 @@
-export function getProjectName(context: {
-	project: { vite: { config: { test?: { name?: { label: string } | string | undefined } } } }
-}) {
-	const name = context.project.vite.config.test?.name
+import type { ExtendedBrowserCommandContext } from './vis_server_context.types.ts'
+
+export function getProjectName(context: ExtendedBrowserCommandContext) {
+	const { runner } = context.project
+	const name = runner.config.name
 	if (typeof name === 'string') {
 		return name
 	}
-	if (typeof name === 'object' && 'label' in name) {
-		return name.label
-	}
+	// if (typeof name === 'object' && 'label' in name) {
+	// 	return (name as { label: string }).label
+	// }
 	return undefined
 }
 

package/src/server/snapshot.ts

@@ -1,13 +1,13 @@
 import { mkdirp } from 'mkdirp'
 import { dirname, resolve } from 'pathe'
-import type { BrowserCommandContext } from 'vitest/node'
 import { isBase64String } from '../shared/base64.ts'
 import type { ImageSnapshotTimeoutOptions, PageImageSnapshotOptions } from '../shared/types.ts'
 import { browserApi } from './browser_provider/browser_api.ts'
 import { snapshotWriter } from './snapshot_writer.ts'
+import type { ExtendedBrowserCommandContext } from './vis_server_context.types.ts'
 
 export async function takeSnapshot(
-	context: BrowserCommandContext,
+	context: ExtendedBrowserCommandContext,
 	projectRoot: string,
 	relativeFilePath: string,
 	subject: string,
@@ -21,7 +21,7 @@ export async function takeSnapshot(
 }
 
 export async function takeSnapshotByBrowser(
-	context: BrowserCommandContext,
+	context: ExtendedBrowserCommandContext,
 	projectRoot: string,
 	relativeFilePath: string,
 	subject: string,
@@ -36,7 +36,7 @@ export async function takeSnapshotByBrowser(
 }
 
 export async function takePageSnapshot(
-	context: BrowserCommandContext,
+	context: ExtendedBrowserCommandContext,
 	projectRoot: string,
 	relativeFilePath: string,
 	options: (PageImageSnapshotOptions & ImageSnapshotTimeoutOptions) | undefined,

package/src/server/snapshot_path.ts

@@ -3,19 +3,20 @@ import { platform } from 'node:process'
 import type { VisOptions } from '../config/types.ts'
 import { SNAPSHOT_ROOT_DIR } from '../shared/constants.ts'
 import { trimCommonFolder } from '../shared/trim_common_folder.ts'
-import type { PartialBrowserCommandContext } from './vis_server_context.types.ts'
+import type { ExtendedBrowserCommandContext } from './vis_server_context.types.ts'
 
-export function resolveSnapshotRootDir(browserCommandContext: PartialBrowserCommandContext, options: VisOptions) {
+export function resolveSnapshotRootDir(browserCommandContext: ExtendedBrowserCommandContext, options: VisOptions) {
 	if (!options.snapshotRootDir) return getSnapshotRootDir(SNAPSHOT_ROOT_DIR)
 	const snapshotRootDir = options.snapshotRootDir
 	if (typeof snapshotRootDir === 'string') return getSnapshotRootDir(snapshotRootDir)
+	const { config } = browserCommandContext.project.browser
 	return snapshotRootDir({
 		ci,
-		browserName: browserCommandContext.provider.browserName,
+		browserName: config.browser.name,
 		providerName: browserCommandContext.provider.name,
 		platform,
-		screenshotFailures: browserCommandContext.provider.options?.screenshotFailures,
-		screenshotDirectory: browserCommandContext.provider.options?.screenshotDirectory,
+		screenshotFailures: config.browser.screenshotFailures,
+		screenshotDirectory: config.browser.screenshotDirectory,
 	})
 }
 

package/src/server/suite.ts

@@ -1,12 +1,11 @@
 import { join, relative } from 'pathe'
-import type { UserConfig } from 'vitest/node'
 import type { VisOptions } from '../config/types.ts'
 import { BASELINE_DIR, DIFF_DIR, RESULT_DIR } from '../shared/constants.ts'
 import { getProjectName, getProjectRoot } from './project.ts'
 import { getSnapshotSubpath, resolveSnapshotRootDir } from './snapshot_path.ts'
 import { getVisOption } from './vis_options.ts'
 import { deps } from './vis_server_context.deps.ts'
-import type { PartialBrowserCommandContext, VisSuite, VisSuites } from './vis_server_context.types.ts'
+import type { ExtendedBrowserCommandContext, VisSuite, VisSuites } from './vis_server_context.types.ts'
 
 const suites: VisSuites = {}
 
@@ -15,7 +14,7 @@ const suites: VisSuites = {}
  * Test files include vitest test files and storybook story files.
  * It needs to make sure there is no race condition between the test files.
  */
-export async function setupSuite(browserContext: PartialBrowserCommandContext) {
+export async function setupSuite(browserContext: ExtendedBrowserCommandContext) {
 	const suiteId = getSuiteId(browserContext)
 	const visOptions = getVisOption(browserContext)
 
@@ -27,7 +26,7 @@ export async function setupSuite(browserContext: PartialBrowserCommandContext) {
 
 	const { taskSubpath, baselineDir, diffDir, resultDir, tasks } = createModule(
 		suite,
-		browserContext.testPath,
+		browserContext.testPath!,
 		visOptions,
 	)
 	suite.modules[taskSubpath] = { baselineDir, diffDir, resultDir, tasks }
@@ -48,19 +47,15 @@ export async function setupSuite(browserContext: PartialBrowserCommandContext) {
  * Suite ID also contains the project name to make it unique
  * across different projects.
  */
-export function getSuiteId(context: {
-	project: {
-		config: { root: string; name: string }
-		vite: { config: { test?: { name?: UserConfig['name'] | undefined } } }
-	}
-}) {
+export function getSuiteId(context: ExtendedBrowserCommandContext) {
 	return `${getProjectName(context)}/${context.project.config.name}`
 }
 
 async function createSuite(
-	browserContext: PartialBrowserCommandContext,
+	browserContext: ExtendedBrowserCommandContext,
 	visOptions: Pick<VisOptions, 'snapshotRootDir' | 'subject'>,
 ) {
+	// console.log('visOptions', visOptions)
 	const snapshotRootDir = resolveSnapshotRootDir(browserContext, visOptions)
 	const projectRoot = getProjectRoot(browserContext)
 
@@ -95,6 +90,6 @@ export function getTaskSubpath(state: VisSuite, testPath: string, options: Pick<
 	return getSnapshotSubpath(relative(state.projectRoot, testPath), options)
 }
 
-export function getSuite(context: PartialBrowserCommandContext) {
+export function getSuite(context: ExtendedBrowserCommandContext) {
 	return suites[getSuiteId(context)]!
 }

package/src/server/testing/stubBrowserCommandContext.ts

@@ -0,0 +1,16 @@
+import '@vitest/browser-playwright'
+import { stub } from 'type-plus'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
+
+export const stubBrowserCommandContext = stub.build<ExtendedBrowserCommandContext>({})
+
+export function createStubPartialBrowserCommandContext({ root, testPath }: { root: string; testPath: string }) {
+	return stub.build<ExtendedBrowserCommandContext>({
+		project: {
+			config: { root },
+			runner: { config: { name: 'subject' } },
+		} as any,
+		provider: {},
+		testPath,
+	})
+}

package/src/{testing → server/testing}/stubSuite.ts

@@ -1,13 +1,13 @@
 import { resolve } from 'pathe'
 import { requiredDeep, type RecursivePartial } from 'type-plus'
-import type { UserConfig } from 'vite'
-import type { BrowserCommandContext } from 'vitest/node'
+import type { TestUserConfig } from 'vitest/node'
+import type { ExtendedBrowserCommandContext } from '../vis_server_context.types.ts'
 import { stubBrowserCommandContext } from './stubBrowserCommandContext.ts'
 import { stubUserConfig } from './stubUserConfig.ts'
 
 export function stubSuite(
-	partialUserConfig: RecursivePartial<UserConfig> = {},
-	partialBrowserCommandContext: RecursivePartial<BrowserCommandContext> = {},
+	partialUserConfig: RecursivePartial<{ test?: { name?: TestUserConfig['name'] } }> = {},
+	partialBrowserCommandContext: RecursivePartial<ExtendedBrowserCommandContext> = {},
 ) {
 	const root = resolve(import.meta.dirname, '../..')
 	const userConfig = stubUserConfig({
@@ -15,15 +15,13 @@ export function stubSuite(
 		...partialUserConfig,
 	})
 	const browserCommandContext = stubBrowserCommandContext(
-		requiredDeep<RecursivePartial<BrowserCommandContext>>(
+		requiredDeep<RecursivePartial<ExtendedBrowserCommandContext>>(
 			{
 				project: {
 					config: { root },
-					vite: {
+					runner: {
 						config: {
-							test: {
-								name: partialUserConfig.test?.name,
-							},
+							name: partialUserConfig.test?.name as string | undefined,
 						},
 					},
 				},

package/src/server/testing/stubUserConfig.ts

@@ -0,0 +1,6 @@
+import { stub } from 'type-plus'
+import type { ViteUserConfig } from 'vitest/config'
+
+export const stubUserConfig = stub.build<ViteUserConfig>((stub) => ({
+	...stub,
+}))

package/src/server/vis_options.ts

@@ -1,26 +1,25 @@
-import type { UserConfig } from 'vitest/node'
+import type { TestUserConfig } from 'vitest/node'
 import type { VisOptions } from '../config/types.ts'
 import { assertSnapshotKeyWithoutDash } from '../shared/asserts.ts'
 import { getProjectName } from './project.ts'
+import type { ExtendedBrowserCommandContext } from './vis_server_context.types.ts'
 
 const DEFAULT_PROJECT_NAME = '__default'
 
 const visOptions: Record<string, VisOptions<any> | undefined> = {}
 
 export function setVisOption(
-	userConfig: { test?: { name?: UserConfig['name'] | undefined } | undefined },
+	userConfig: { test?: { name?: TestUserConfig['name'] | undefined } },
 	options: VisOptions<any> | undefined,
 ) {
 	assertSnapshotKeyWithoutDash(options?.snapshotKey)
 
 	const name = userConfig.test?.name
 	const id = typeof name === 'string' ? name : typeof name === 'object' ? name?.label : DEFAULT_PROJECT_NAME
-
 	visOptions[id] = options
 }
 
-export function getVisOption(context: { project: { vite: { config: { test?: { name?: UserConfig['name'] } } } } }) {
+export function getVisOption(context: ExtendedBrowserCommandContext) {
 	const id = getProjectName(context) ?? DEFAULT_PROJECT_NAME
-
 	return visOptions[id] ?? {}
 }

package/src/server/vis_server_context.logic.ts

@@ -5,11 +5,11 @@ import type { ImageSnapshotResult } from './commands/load_image_snapshot_results
 import { file } from './externals/file.ts'
 import { getSuite, getTaskSubpath } from './suite.ts'
 import { getVisOption } from './vis_options.ts'
-import type { PartialBrowserCommandContext } from './vis_server_context.types.ts'
+import type { ExtendedBrowserCommandContext } from './vis_server_context.types.ts'
 
 export function createVisServerContext() {
 	const context = {
-		async getSnapshotResults(browserContext: PartialBrowserCommandContext, taskId: string) {
+		async getSnapshotResults(browserContext: ExtendedBrowserCommandContext, taskId: string) {
 			const suiteInfo = await context.getSuiteInfo(browserContext, taskId)
 			const baselines = await file.glob(join(suiteInfo.projectRoot, suiteInfo.baselineDir, `${suiteInfo.taskId}-*.png`))
 			const results = await file.glob(join(suiteInfo.projectRoot, suiteInfo.resultDir, `${suiteInfo.taskId}-*.png`))
@@ -36,7 +36,7 @@ export function createVisServerContext() {
 			return r
 		},
 		async getSnapshotInfo(
-			browserContext: PartialBrowserCommandContext,
+			browserContext: ExtendedBrowserCommandContext,
 			taskId: string,
 			options?: ImageSnapshotKeyOptions,
 		) {
@@ -65,11 +65,11 @@ export function createVisServerContext() {
 			}
 		},
 
-		async getTaskCount(browserContext: PartialBrowserCommandContext, taskId: string) {
+		async getTaskCount(browserContext: ExtendedBrowserCommandContext, taskId: string) {
 			return (await context.getSuiteInfo(browserContext, taskId)).task.count
 		},
 		async hasImageSnapshot(
-			browserContext: PartialBrowserCommandContext,
+			browserContext: ExtendedBrowserCommandContext,
 			taskId: string,
 			snapshotKey: string | undefined,
 		) {
@@ -80,7 +80,7 @@ export function createVisServerContext() {
 			)
 		},
 		getSnapshotFilename(
-			browserContext: PartialBrowserCommandContext,
+			browserContext: ExtendedBrowserCommandContext,
 			info: { taskId: string; task: { count: number } },
 			snapshotKey: string | undefined,
 		) {
@@ -91,7 +91,7 @@ export function createVisServerContext() {
 			}
 			return `${info.taskId}-${info.task.count}.png`
 		},
-		async getSuiteInfo(browserContext: PartialBrowserCommandContext, taskId: string) {
+		async getSuiteInfo(browserContext: ExtendedBrowserCommandContext, taskId: string) {
 			const projectState = await getSuite(browserContext)
 			const visOptions = getVisOption(browserContext)
 			const moduleId = getTaskSubpath(projectState, browserContext.testPath, visOptions)

package/src/server/vis_server_context.types.ts

@@ -1,4 +1,6 @@
-import type { UserConfig } from 'vitest/node'
+import type { Merge } from 'type-plus'
+import type { BrowserCommandContext } from 'vitest/node'
+import type { Awaitable } from '../shared/types.ts'
 
 export type VisSuites = {
 	[projectPath: string]: Promise<VisSuite>
@@ -30,33 +32,36 @@ export type VisSuite = {
 	>
 }
 
-export type PartialBrowserCommandContext = {
-	project: {
-		config: {
-			name: string
-			root: string
-			snapshotOptions: {
-				updateSnapshot: 'all' | 'new' | 'none'
+export type ExtendedBrowserCommand<Payload extends unknown[] = [], ReturnValue = any> = (
+	context: ExtendedBrowserCommandContext,
+	...payload: Payload
+) => Awaitable<ReturnValue>
+
+export type ExtendedBrowserCommandContext = {
+	page: BrowserCommandContext['page']
+	browser: BrowserCommandContext['browser']
+	iframe: BrowserCommandContext['iframe']
+	testPath: NonNullable<BrowserCommandContext['testPath']>
+	provider: BrowserCommandContext['provider']
+	// project: BrowserCommandContext['project']
+	project: Merge<
+		BrowserCommandContext['project'],
+		{
+			browser: {
+				config: {
+					browser: {
+						name: string
+						screenshotFailures: boolean
+						screenshotDirectory: string
+					}
+				}
 			}
-			testTimeout: number
-			hookTimeout: number
-		}
-		vite: {
-			config: {
-				test?: {
-					name?: UserConfig['name'] | undefined
+			config: BrowserCommandContext['project']['config']
+			runner: {
+				config: {
+					name: string
 				}
 			}
 		}
-	}
-	provider: {
-		name: string
-		browserName?: string | undefined
-		options?: {
-			headless?: boolean | undefined
-			screenshotFailures?: boolean | undefined
-			screenshotDirectory?: string | undefined
-		}
-	}
-	testPath: string
+	>
 }

package/src/shared/types.ts

@@ -3,6 +3,8 @@ import type { Options as SsimDiffOptions } from 'ssim.js'
 import type { SnapshotMeta } from '../client/snapshot_meta.ts'
 import type { NAME } from './constants.ts'
 
+export type Awaitable<T> = T | PromiseLike<T>
+
 export interface ImageSnapshotTimeoutOptions {
 	/**
 	 * Timeout for taking the snapshot.