vitest-plugin-vis 2.4.4 → 3.0.0

package/src/config/types.ts

@@ -1,31 +1,40 @@
 import type {
-	AutoSnapshotOptions,
 	ComparisonMethod,
-	ImageSnapshotCompareOptions,
-	ImageSnapshotIdOptions,
+	FailureThresholdOptions,
+	ImageSnapshotKeyOptions,
+	ImageSnapshotSubjectOptions,
 	ImageSnapshotTimeoutOptions,
+	PixelComparisonOptions,
+	PixelDiffOptions,
+	SsimComparisonOptions,
+	SsimDiffOptions,
 } from '../shared/types.ts'
 
-export type { ComparisonMethod }
+export type { ComparisonMethod, PixelComparisonOptions, PixelDiffOptions, SsimComparisonOptions, SsimDiffOptions }
 
-export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTimeoutOptions &
-	ImageSnapshotIdOptions &
-	ImageSnapshotCompareOptions<M> &
-	AutoSnapshotOptions & {
+export type VisOptions<M extends ComparisonMethod = 'pixel'> = (M extends 'ssim'
+	? {
+			comparisonMethod: M
+			/**
+			 * Custom options passed to 'ssim'
+			 */
+			diffOptions?: Partial<SsimDiffOptions> | undefined
+		}
+	: {
+			comparisonMethod?: M | undefined
+			/**
+			 * Custom options passed to 'pixelmatch'
+			 */
+			diffOptions?: PixelDiffOptions | undefined
+		}) &
+	FailureThresholdOptions &
+	ImageSnapshotTimeoutOptions &
+	ImageSnapshotKeyOptions &
+	ImageSnapshotSubjectOptions & {
 		/**
 		 * Loads the `test.setupFiles` of the specified preset.
 		 */
 		preset?: 'enable' | 'manual' | 'auto' | 'none' | undefined
-		/**
-		 * The name of the subdirectory that the baseline snapshots get saved in.
-		 *
-		 * <snapshotRootDir>/<platform>/<snapshotSubpath>/<snapshotId>.png
-		 *
-		 * Default: undefined
-		 *
-		 * @deprecated Use `snapshotRootDir` instead.
-		 */
-		platform?: string | undefined
 		/**
 		 * The snapshot folder relative to the root of the project.
 		 *
@@ -45,12 +54,6 @@ export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTime
 		/**
 		 * Customize the snapshot subpath.
 		 *
-		 * The snapshot subpath is used along with `snapshotRootDir` to determine the folder of the snapshots:
-		 *
-		 * - baseline: `<snapshotRootDir>/baselines/<snapshotSubpath>/<snapshotId>.png`
-		 * - result: `<snapshotRootDir>/results/<snapshotSubpath>/<snapshotId>.png`
-		 * - diff: `<snapshotRootDir>/diffs/<snapshotSubpath>/<snapshotId>.png`
-		 *
 		 * Typically, you place your test files either in a dedicated `tests` folder or in the `src` folder along with your source code.
 		 * By default, the snapshot subpath is the test file path with that folder removed to reduces nesting of the snapshot folders.
 		 *
@@ -59,8 +62,10 @@ export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTime
 		 * and they might have files with the same name and create conflicting snapshots,
 		 * you can set this to customize the snapshot subpath.
 		 *
-		 * @param subPath - The path of the test file to be used as the snapshot sub path.
-		 * If you want to keep the full path, you can simply return it.
+		 * @param options - Options for customizing the snapshot subpath.
+		 * @property subPath - The path of the test file to be used as the snapshot subpath.
+		 *                     To retain the full path, simply return it.
+		 * @returns The customized snapshot subpath.
 		 */
-		customizeSnapshotSubpath?: (subPath: string) => string
+		snapshotSubpath?: ((options: { subpath: string }) => string) | undefined
 	}

package/src/config/vis.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite'
-import { commands } from '../server/commands/extend.ts'
-import { visContext } from '../server/vis_context.ts'
+import { commands } from '../server/commands/commands.ts'
+import { setVisOption } from '../server/vis_options.ts'
 import { NAME } from '../shared/constants.ts'
 import type { ComparisonMethod } from '../shared/types.ts'
 import type { VisOptions } from './types.ts'
@@ -15,9 +15,7 @@ export function vis<M extends ComparisonMethod = 'pixel'>(options: VisOptions<M>
 	return {
 		name: NAME,
 		config(userConfig) {
-			const projectName = userConfig?.test?.name
-
-			visContext.setOptions(projectName, options)
+			setVisOption(userConfig, options)
 			const preset = options?.preset
 			return {
 				test: {

package/src/index.ts

@@ -2,5 +2,5 @@
 import './client/expect/augment.ts'
 import './client/page/augment.ts'
 
-export { setAutoSnapshotOptions, type MetaTask } from './client/snapshot_options.ts'
+export { setAutoSnapshotOptions, type MetaTask } from './client/auto_snapshot_options.ts'
 export type * from './shared/types.ts'

package/src/presets/auto.ts

@@ -1,5 +1,9 @@
-import { vis } from '../setup/vis.ts'
-import '../client/expect/extend.ts'
-import '../client/page/extend.ts'
+import { afterEach, beforeAll } from 'vitest'
+import { setAutoSnapshotOptions } from '../index.ts'
+import { vis } from '../setup.ts'
 
-vis.presets.auto()
+beforeAll(async () => {
+	await vis.beforeAll.setup()
+	setAutoSnapshotOptions(true)
+})
+afterEach(() => vis.afterEach.matchImageSnapshot())

package/src/presets/enable.ts

@@ -1,5 +1,5 @@
-import { vis } from '../setup/vis.ts'
-import '../client/expect/extend.ts'
-import '../client/page/extend.ts'
+import { afterEach, beforeAll } from 'vitest'
+import { vis } from '../setup.ts'
 
-vis.presets.enable()
+beforeAll(() => vis.beforeAll.setup())
+afterEach(() => vis.afterEach.matchImageSnapshot())

package/src/presets/manual.ts

@@ -1,5 +1,4 @@
-import { vis } from '../setup/vis.ts'
-import '../client/expect/extend.ts'
-import '../client/page/extend.ts'
+import { beforeAll } from 'vitest'
+import { vis } from '../setup.ts'
 
-vis.presets.manual()
+beforeAll(() => vis.beforeAll.setup())

package/src/server/browser_provider/playwright.ts

@@ -1,13 +1,19 @@
+import { resolve } from 'pathe'
 import type { BrowserCommandContext } from 'vitest/node'
 import type { BrowserApi } from './types.ts'
 
 export function playwright(context: BrowserCommandContext): BrowserApi {
 	return {
-		async takeScreenshot(filePath, selector, options) {
-			// The `Locator` type from `vitest` has less props than the `Locator` in `playwright`
+		async takeScreenshot(projectRoot, relativeFilePath, selector, options) {
 			const subject = context.iframe.locator(selector)
 			return subject.screenshot({
-				path: filePath,
+				path: resolve(projectRoot, relativeFilePath),
+				...options,
+			})
+		},
+		async takePageScreenshot(projectRoot, relativeFilePath, options) {
+			return context.page.screenshot({
+				path: resolve(projectRoot, relativeFilePath),
 				...options,
 			})
 		},

package/src/server/browser_provider/types.ts

@@ -1,6 +1,7 @@
 export interface BrowserApi {
 	takeScreenshot(
-		filePath: string,
+		projectRoot: string,
+		relativeFilePath: string,
 		selector: string,
 		options:
 			| {
@@ -8,4 +9,14 @@ export interface BrowserApi {
 			  }
 			| undefined,
 	): Promise<Buffer>
+	takePageScreenshot(
+		projectRoot: string,
+		relativeFilePath: string,
+		options:
+			| {
+					fullPage?: boolean | undefined
+					timeout?: number | undefined
+			  }
+			| undefined,
+	): Promise<Buffer>
 }

package/src/server/browser_provider/webdriverio.ts

@@ -2,11 +2,14 @@ import type { BrowserCommandContext } from 'vitest/node'
 import type { BrowserApi } from './types.ts'
 
 export function webdriverio(context: BrowserCommandContext): BrowserApi {
-	const page = (context.provider as any).browser!
+	const browser = context.browser
 	return {
-		async takeScreenshot(filePath, selector) {
-			const element = await page.$(`${selector}`)
-			return element.saveScreenshot(filePath)
+		async takeScreenshot(_projectRoot, relativeFilePath, selector) {
+			const element = await browser.$(`${selector}`)
+			return element.saveScreenshot(relativeFilePath)
+		},
+		async takePageScreenshot(_projectRoot, relativeFilePath, options) {
+			return browser.saveScreenshot(relativeFilePath, options)
 		},
 	}
 }

package/src/server/commands/augment.ts

@@ -0,0 +1,16 @@
+import type { HasImageSnapshotCommand } from './has_image_snapshot.ts'
+import type { ImageSnapshotNextIndexCommand } from './image_snapshot_next_index.ts'
+import type { LoadImageSnapshotResultsCommand } from './load_image_snapshot_results.ts'
+import type { PrepareImageSnapshotComparisonCommand } from './prepare_image_snapshot_comparison.ts'
+import type { PreparePageImageSnapshotComparisonCommand } from './prepare_page_image_snapshot_comparison.ts'
+import type { SetupVisSuiteCommand } from './setup_vis_suite.ts'
+
+declare module '@vitest/browser/context' {
+	interface BrowserCommands
+		extends SetupVisSuiteCommand,
+			ImageSnapshotNextIndexCommand,
+			HasImageSnapshotCommand,
+			PreparePageImageSnapshotComparisonCommand,
+			PrepareImageSnapshotComparisonCommand,
+			LoadImageSnapshotResultsCommand {}
+}

package/src/server/commands/commands.ts

@@ -0,0 +1,15 @@
+import { hasImageSnapshot } from './has_image_snapshot.ts'
+import { imageSnapshotNextIndex } from './image_snapshot_next_index.ts'
+import { loadImageSnapshotResults } from './load_image_snapshot_results.ts'
+import { prepareImageSnapshotComparison } from './prepare_image_snapshot_comparison.ts'
+import { preparePageImageSnapshotComparison } from './prepare_page_image_snapshot_comparison.ts'
+import { setupVisSuite } from './setup_vis_suite.ts'
+
+export const commands = {
+	setupVisSuite,
+	imageSnapshotNextIndex,
+	hasImageSnapshot,
+	preparePageImageSnapshotComparison,
+	prepareImageSnapshotComparison,
+	loadImageSnapshotResults,
+}

package/src/server/commands/has_image_snapshot.ts

@@ -1,15 +1,17 @@
 import type { BrowserCommand } from 'vitest/node'
-import { visContext } from '../vis_context.ts'
+import { visServerContext } from '../vis_server_context.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
 export interface HasImageSnapshotCommand {
-	hasImageSnapshot(taskId: string, snapshotId: string | undefined, isAutoSnapshot: boolean): Promise<boolean>
+	hasImageSnapshot(taskId: string, snapshotKey: string | undefined): Promise<boolean>
 }
 
-export const hasImageSnapshot: BrowserCommand<
-	[taskId: string, snapshotId: string | undefined, isAutoSnapshot: boolean]
-> = async (context, taskId, snapshotId, isAutoSnapshot) => {
+export const hasImageSnapshot: BrowserCommand<Parameters<HasImageSnapshotCommand['hasImageSnapshot']>> = async (
+	context,
+	taskId,
+	snapshotKey,
+) => {
 	assertTestPathDefined(context, 'hasImageSnapshot')
 
-	return visContext.hasImageSnapshot(context as any, taskId, snapshotId, isAutoSnapshot)
+	return visServerContext.hasImageSnapshot(context as any, taskId, snapshotKey)
 }

package/src/server/commands/image_snapshot_next_index.ts

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

package/src/server/commands/load_image_snapshot_results.ts

@@ -0,0 +1,32 @@
+import type { BrowserCommand } from 'vitest/node'
+import { visServerContext } from '../vis_server_context.ts'
+import { assertTestPathDefined } from './_assertions.ts'
+
+export interface ImageSnapshotResult {
+	filename: string
+	/**
+	 * The base64 encoded image of the baseline snapshot.
+	 */
+	baseline?: string | undefined
+	/**
+	 * The base64 encoded image of the result snapshot.
+	 */
+	result?: string | undefined
+	/**
+	 * The base64 encoded image of the diff snapshot.
+	 */
+	diff?: string | undefined
+}
+
+export interface LoadImageSnapshotResultsCommand {
+	loadImageSnapshotResults(taskId: string): Promise<ImageSnapshotResult[]>
+}
+
+export const loadImageSnapshotResults: BrowserCommand<[taskId: string]> = async (
+	context,
+	taskId,
+): Promise<ImageSnapshotResult[]> => {
+	assertTestPathDefined(context, 'loadImageSnapshotResults')
+
+	return visServerContext.getSnapshotResults(context, taskId)
+}

package/src/server/commands/prepare_image_snapshot_comparison.ts

@@ -7,13 +7,15 @@ import type {
 	PixelComparisonOptions,
 	SsimComparisonOptions,
 } from '../../shared/types.ts'
-import { file } from '../file.ts'
-import { takeSnapshot, takeSnapshotByBrowser, writeSnapshot } from '../snapshot.ts'
-import { visContext } from '../vis_context.ts'
+import { file } from '../externals/file.ts'
+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 { assertTestPathDefined } from './_assertions.ts'
-import type { MatchImageSnapshotOptions } from './match_image_snapshot.ts'
+import type { MatchImageSnapshotOptions } from './types.ts'
 
-type ImageSnapshotComparisonInfo = {
+export type ImageSnapshotComparisonInfo = {
 	/**
 	 * Path to the project root.
 	 */
@@ -38,40 +40,44 @@ type ImageSnapshotComparisonInfo = {
 	 * Base64 encoded result image.
 	 */
 	result: string
+	/**
+	 * Base64 encoded diff image.
+	 */
+	diff?: string | undefined
 } & ImageSnapshotTimeoutOptions &
 	FailureThresholdOptions &
 	(SsimComparisonOptions | PixelComparisonOptions)
 
 export interface PrepareImageSnapshotComparisonCommand {
 	prepareImageSnapshotComparison: (
-		taskId: string | undefined,
+		taskId: string,
 		subject: string,
-		isAutoSnapshot: boolean,
 		options?: MatchImageSnapshotOptions | undefined,
 	) => Promise<ImageSnapshotComparisonInfo | undefined>
 }
 
 export const prepareImageSnapshotComparison: BrowserCommand<
-	[taskId: string, snapshotId: string, isAutoSnapshot: boolean, options?: MatchImageSnapshotOptions | undefined]
-> = async (context, taskId, subject, isAutoSnapshot, options) => {
+	Parameters<PrepareImageSnapshotComparisonCommand['prepareImageSnapshotComparison']>
+> = async (context, taskId, subject, options): Promise<ImageSnapshotComparisonInfo | undefined> => {
 	assertTestPathDefined(context, 'prepareImageSnapshotComparison')
 	// vitest:browser passes in `null` when not defined
 	if (!options) options = {}
 	options.timeout = options.timeout ?? 30000
 
-	const projectRoot = context.project.config.root
-	const info = await visContext.getSnapshotInfo(context as any, taskId, isAutoSnapshot, options)
+	const projectRoot = getProjectRoot(context)
+	const info = await visServerContext.getSnapshotInfo(context, taskId, options)
+
 	const baselineBuffer = await file.tryReadFile(resolve(projectRoot, info.baselinePath))
 	if (!baselineBuffer) {
 		if (isBase64String(subject)) {
-			await writeSnapshot(resolve(projectRoot, info.baselinePath), subject)
+			await snapshotWriter.writeBase64(resolve(projectRoot, info.baselinePath), subject)
 		} else {
-			await takeSnapshotByBrowser(context, resolve(projectRoot, info.baselinePath), subject, options)
+			await takeSnapshotByBrowser(context, projectRoot, info.baselinePath, subject, options)
 		}
 		return
 	}
 
-	const resultBuffer = await takeSnapshot(context, resolve(projectRoot, info.resultPath), subject, options)
+	const resultBuffer = await takeSnapshot(context, projectRoot, info.resultPath, subject, options)
 	return {
 		...info,
 		projectRoot,

package/src/server/commands/prepare_page_image_snapshot_comparison.ts

@@ -0,0 +1,75 @@
+import { resolve } from 'pathe'
+import type { BrowserCommand } from 'vitest/node'
+import type {
+	FailureThresholdOptions,
+	ImageSnapshotTimeoutOptions,
+	PixelComparisonOptions,
+	SsimComparisonOptions,
+} from '../../shared/types.ts'
+import { file } from '../externals/file.ts'
+import { getProjectRoot } from '../project.ts'
+import { takePageSnapshot } from '../snapshot.ts'
+import { visServerContext } from '../vis_server_context.ts'
+import { assertTestPathDefined } from './_assertions.ts'
+import type { MatchImageSnapshotOptions } from './types.ts'
+
+type ImageSnapshotComparisonInfo = {
+	/**
+	 * Path to the project root.
+	 */
+	projectRoot: string
+	/**
+	 * Path to the baseline image relative to the project root.
+	 */
+	baselinePath: string
+	/**
+	 * Path to the result image relative to the project root.
+	 */
+	resultPath: string
+	/**
+	 * Path to the diff image relative to the project root.
+	 */
+	diffPath: string
+	/**
+	 * Base64 encoded baseline image.
+	 */
+	baseline: string
+	/**
+	 * Base64 encoded result image.
+	 */
+	result: string
+} & ImageSnapshotTimeoutOptions &
+	FailureThresholdOptions &
+	(SsimComparisonOptions | PixelComparisonOptions)
+
+export interface PreparePageImageSnapshotComparisonCommand {
+	preparePageImageSnapshotComparison: (
+		taskId: string,
+		options?: MatchImageSnapshotOptions | undefined,
+	) => Promise<ImageSnapshotComparisonInfo | undefined>
+}
+
+export const preparePageImageSnapshotComparison: BrowserCommand<
+	Parameters<PreparePageImageSnapshotComparisonCommand['preparePageImageSnapshotComparison']>
+> = async (context, taskId, options) => {
+	assertTestPathDefined(context, 'preparePageImageSnapshotComparison')
+	// vitest:browser passes in `null` when not defined
+	if (!options) options = {}
+	options.timeout = options.timeout ?? 30000
+
+	const projectRoot = getProjectRoot(context)
+	const info = await visServerContext.getSnapshotInfo(context, taskId, options)
+	const baselineBuffer = await file.tryReadFile(resolve(projectRoot, info.baselinePath))
+	if (!baselineBuffer) {
+		await takePageSnapshot(context, projectRoot, info.baselinePath, options)
+		return
+	}
+
+	const resultBuffer = await takePageSnapshot(context, projectRoot, info.resultPath, options)
+	return {
+		...info,
+		projectRoot,
+		baseline: baselineBuffer.toString('base64'),
+		result: resultBuffer.toString('base64'),
+	}
+}

package/src/server/commands/setup_vis_suite.ts

@@ -1,5 +1,7 @@
+import type { Pick } from 'type-plus'
 import type { BrowserCommand } from 'vitest/node'
-import { visContext } from '../vis_context.ts'
+import type { VisOptions } from '../../config/types.ts'
+import { setupSuite } from '../suite.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
 export interface SetupVisSuiteCommand {
@@ -10,13 +12,21 @@ export interface SetupVisSuiteCommand {
 	 *
 	 * In subsequent runs, it will only remove the results and diffs directory of the current suite.
 	 */
-	setupVisSuite: () => Promise<{ subjectDataTestId: string | undefined }>
+	setupVisSuite: () => Promise<
+		Pick<
+			VisOptions,
+			| 'comparisonMethod'
+			| 'diffOptions'
+			| 'failureThreshold'
+			| 'failureThresholdType'
+			| 'snapshotKey'
+			| 'subject'
+			| 'timeout'
+		>
+	>
 }
 
-export const setupVisSuite: BrowserCommand<[]> = async (
-	context,
-): Promise<{ subjectDataTestId: string | undefined }> => {
+export const setupVisSuite: BrowserCommand<[]> = async (context): Promise<{ subject: string | undefined }> => {
 	assertTestPathDefined(context, 'setupVisSuite')
-	// using props not currently listed in the types
-	return visContext.setupSuite(context as any)
+	return setupSuite(context)
 }

package/src/server/commands/types.ts

@@ -0,0 +1,9 @@
+import type {
+	ImageSnapshotCompareOptions,
+	ImageSnapshotKeyOptions,
+	ImageSnapshotTimeoutOptions,
+} from '../../shared/types.ts'
+
+export type MatchImageSnapshotOptions = ImageSnapshotTimeoutOptions &
+	ImageSnapshotCompareOptions<any> &
+	ImageSnapshotKeyOptions

package/src/server/externals/file.ts

@@ -0,0 +1,21 @@
+import { glob, type GlobOptionsWithFileTypesUnset } from 'glob'
+import { mkdirp } from 'mkdirp'
+import { readFile, stat, writeFile } from 'node:fs/promises'
+
+export const file = {
+	existFile(filePath: string) {
+		return stat(filePath)
+			.then((s) => s.isFile())
+			.catch(() => false)
+	},
+	glob(pattern: string | string[], options?: GlobOptionsWithFileTypesUnset | undefined) {
+		return glob(pattern, options)
+	},
+	mkdirp: mkdirp as (path: string) => Promise<string | undefined>,
+	async tryReadFile(filePath: string | undefined): Promise<Buffer | undefined> {
+		if (!filePath) return undefined
+
+		return readFile(filePath).catch(() => undefined)
+	},
+	writeFile,
+}

package/src/server/{commands/browser_command_context.ts → project.ts}

@@ -1,9 +1,7 @@
-import type { BrowserCommandContext } from 'vitest/node'
-
 export function getProjectName(context: { project: { vite: { config: { test?: { name?: string | undefined } } } } }) {
 	return context.project.vite.config.test?.name
 }
 
-export function getBrowserInstanceProjectName(context: BrowserCommandContext) {
-	return context.project.config
+export function getProjectRoot(context: { project: { config: { root: string } } }) {
+	return context.project.config.root
 }

package/src/server/snapshot.ts

@@ -1,42 +1,51 @@
 import { mkdirp } from 'mkdirp'
-import { dirname } from 'pathe'
+import { dirname, resolve } from 'pathe'
 import type { BrowserCommandContext } from 'vitest/node'
-import type { ImageSnapshotTimeoutOptions } from '../client.ts'
 import { isBase64String } from '../shared/base64.ts'
+import type { ImageSnapshotTimeoutOptions, PageImageSnapshotOptions } from '../shared/types.ts'
 import { browserApi } from './browser_provider/browser_api.ts'
-import { file } from './file.js'
+import { snapshotWriter } from './snapshot_writer.ts'
 
 export async function takeSnapshot(
 	context: BrowserCommandContext,
-	filePath: string,
+	projectRoot: string,
+	relativeFilePath: string,
 	subject: string,
 	options: ImageSnapshotTimeoutOptions | undefined,
 ) {
 	if (isBase64String(subject)) {
-		await writeSnapshot(filePath, subject)
+		await snapshotWriter.writeBase64(resolve(projectRoot, relativeFilePath), subject)
 		return Buffer.from(subject, 'base64')
 	}
-	return takeSnapshotByBrowser(context, filePath, subject, options)
+	return takeSnapshotByBrowser(context, projectRoot, relativeFilePath, subject, options)
 }
 
 export async function takeSnapshotByBrowser(
 	context: BrowserCommandContext,
-	filePath: string,
+	projectRoot: string,
+	relativeFilePath: string,
 	subject: string,
 	options: ImageSnapshotTimeoutOptions | undefined,
 ) {
+	const filePath = resolve(projectRoot, relativeFilePath)
 	await mkdirp(dirname(filePath))
 	const browser = browserApi(context)
-	return browser.takeScreenshot(filePath, subject ?? 'body', {
+	return browser.takeScreenshot(projectRoot, relativeFilePath, subject ?? 'body', {
 		timeout: options?.timeout,
 	})
 }
 
-export async function writeSnapshot(filePath: string, subject: string) {
-	await mkdirp(dirname(filePath))
-	await file.writeFile(filePath, subject, { encoding: 'base64' })
-}
-export async function writeSnapshotBuffer(filePath: string, subject: Buffer) {
+export async function takePageSnapshot(
+	context: BrowserCommandContext,
+	projectRoot: string,
+	relativeFilePath: string,
+	options: (PageImageSnapshotOptions & ImageSnapshotTimeoutOptions) | undefined,
+) {
+	const filePath = resolve(projectRoot, relativeFilePath)
 	await mkdirp(dirname(filePath))
-	await file.writeFile(filePath, subject)
+	const browser = browserApi(context)
+	return browser.takePageScreenshot(projectRoot, relativeFilePath, {
+		timeout: options?.timeout,
+		fullPage: options?.fullPage,
+	})
 }