@vitest/browser 4.0.16 → 4.1.0-beta.1

package/dist/index.js

@@ -18,7 +18,7 @@ import { PNG } from 'pngjs';
 import pm from 'pixelmatch';
 import { WebSocketServer } from 'ws';
 
-var version = "4.0.16";
+var version = "4.1.0-beta.1";
 
 const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
 function normalizeWindowsPath(input = "") {
@@ -695,6 +695,7 @@ async function resolveOrchestrator(globalServer, url, res) {
 		__VITEST_TYPE__: "\"orchestrator\"",
 		__VITEST_SESSION_ID__: JSON.stringify(sessionId),
 		__VITEST_TESTER_ID__: "\"none\"",
+		__VITEST_OTEL_CARRIER__: url.searchParams.get("otelCarrier") ?? "null",
 		__VITEST_PROVIDED_CONTEXT__: JSON.stringify(stringify(browserProject.project.getProvidedContext())),
 		__VITEST_API_TOKEN__: JSON.stringify(globalServer.vitest.config.api.token)
 	});
@@ -790,6 +791,7 @@ async function resolveTester(globalServer, url, res, next) {
 		__VITEST_TYPE__: "\"tester\"",
 		__VITEST_METHOD__: JSON.stringify("none"),
 		__VITEST_SESSION_ID__: JSON.stringify(sessionId),
+		__VITEST_OTEL_CARRIER__: JSON.stringify(null),
 		__VITEST_TESTER_ID__: JSON.stringify(crypto.randomUUID()),
 		__VITEST_PROVIDED_CONTEXT__: "{}",
 		__VITEST_API_TOKEN__: JSON.stringify(globalServer.vitest.config.api.token)
@@ -1073,7 +1075,6 @@ var BrowserPlugin = (parentServer, base = "/") => {
 					"vitest",
 					"vitest/browser",
 					"vitest/internal/browser",
-					"vitest/runners",
 					"vite/module-runner",
 					"@vitest/browser/utils",
 					"@vitest/browser/context",
@@ -1139,6 +1140,11 @@ var BrowserPlugin = (parentServer, base = "/") => {
 				if (vueTestUtils) {
 					include.push("@vue/test-utils");
 				}
+				const otelConfig = project.config.experimental.openTelemetry;
+				if (otelConfig?.enabled && otelConfig.browserSdkPath) {
+					entries.push(otelConfig.browserSdkPath);
+					include.push("@opentelemetry/api");
+				}
 				return {
 					define,
 					resolve: { dedupe: ["vitest"] },
@@ -2224,9 +2230,20 @@ function asyncTimeout(timeout) {
 	});
 }
 
+/**
+* Browser command that compares a screenshot against a stored reference.
+*
+* The comparison workflow is organized as follows:
+*
+* 1. Load existing reference (if any)
+* 2. Capture a stable screenshot (retrying until the page stops changing)
+* 3. Determine the outcome based on capture results and update settings
+* 4. Write any necessary files (new references, diffs)
+* 5. Return result for the test runner
+*/
 const screenshotMatcher = async (context, name, testName, options) => {
 	if (!context.testPath) {
-		throw new Error(`Cannot compare screenshots without a test path`);
+		throw new Error("Cannot compare screenshots without a test path");
 	}
 	const { element } = options;
 	const { codec, comparator, paths, resolvedOptions: { comparatorOptions, screenshotOptions, timeout } } = resolveOptions({
@@ -2236,9 +2253,8 @@ const screenshotMatcher = async (context, name, testName, options) => {
 		options
 	});
 	const referenceFile = await readFile$1(paths.reference).catch(() => null);
-	const reference = referenceFile && await codec.decode(await readFile$1(paths.reference), {});
-	const abortController = new AbortController();
-	const stableScreenshot = getStableScreenshots({
+	const reference = referenceFile && await codec.decode(referenceFile, {});
+	const screenshotResult = await waitForStableScreenshot({
 		codec,
 		comparator,
 		comparatorOptions,
@@ -2246,115 +2262,198 @@ const screenshotMatcher = async (context, name, testName, options) => {
 		element,
 		name: `${Date.now()}-${basename(paths.reference)}`,
 		reference,
-		screenshotOptions,
-		signal: abortController.signal
+		screenshotOptions
+	}, timeout);
+	const outcome = await determineOutcome({
+		reference,
+		screenshot: screenshotResult && screenshotResult.actual,
+		retries: screenshotResult?.retries ?? 0,
+		updateSnapshot: context.project.serializedConfig.snapshotOptions.updateSnapshot,
+		paths,
+		comparator,
+		comparatorOptions
 	});
-	const value = await (timeout === 0 ? stableScreenshot : Promise.race([stableScreenshot, asyncTimeout(timeout).finally(() => {
-		abortController.abort();
-	})]));
-	// case #01
-	//  - impossible to get a stable screenshot to compare against
-	//  - fail
-	if (value === null || value.actual === null) {
+	await performSideEffects(outcome, codec);
+	return buildOutput(outcome, timeout);
+};
+/**
+* Core comparison logic that produces a {@linkcode MatchOutcome}.
+*
+* All branching logic lives here. This is the single source of truth for "what happened".
+*
+* The outcome carries all data needed by {@linkcode performSideEffects} and {@linkcode buildOutput}.
+*/
+async function determineOutcome({ comparator, comparatorOptions, paths, reference, retries, screenshot, updateSnapshot }) {
+	if (screenshot === null) {
 		return {
-			pass: false,
-			reference: referenceFile && {
-				path: paths.reference,
-				width: reference.metadata.width,
-				height: reference.metadata.height
-			},
-			actual: null,
-			diff: null,
-			message: `Could not capture a stable screenshot within ${timeout}ms.`
+			type: "unstable-screenshot",
+			reference: reference && {
+				image: reference,
+				path: paths.reference
+			}
 		};
 	}
-	const { updateSnapshot } = context.project.serializedConfig.snapshotOptions;
-	// if there's no reference or if we want to update snapshots, we have to finish the comparison early
-	if (reference === null || updateSnapshot === "all") {
-		const shouldCreateReference = updateSnapshot !== "none";
-		const referencePath = shouldCreateReference ? paths.reference : paths.diffs.reference;
-		await writeScreenshot(referencePath, await codec.encode(value.actual, {}));
-		// case #02
-		//  - got a stable screenshot, but there is no reference and we don't want to update screenshots
-		//  - fail
-		if (updateSnapshot !== "all") {
+	// no reference to compare against - create one based on update settings
+	if (reference === null) {
+		if (updateSnapshot === "all") {
 			return {
-				pass: false,
+				type: "update-reference",
 				reference: {
-					path: referencePath,
-					width: value.actual.metadata.width,
-					height: value.actual.metadata.height
-				},
-				actual: null,
-				diff: null,
-				message: `No existing reference screenshot found${shouldCreateReference ? "; a new one was created. Review it before running tests again." : "."}`
+					image: screenshot,
+					path: paths.reference
+				}
 			};
 		}
-		// case #03
-		//  - got a stable screenshot, there is no reference, but we want to update screenshots
-		//  - pass
-		return { pass: true };
-	}
-	// case #04
-	//  - got a stable screenshot with no retries and there's a reference
-	//  - pass
-	if (referenceFile && value.retries === 0) {
-		return { pass: true };
-	}
-	const finalResult = await comparator(reference, value.actual, {
+		const location = updateSnapshot === "none" ? "diffs" : "reference";
+		return {
+			type: "missing-reference",
+			location,
+			reference: {
+				image: screenshot,
+				path: location === "reference" ? paths.reference : paths.diffs.reference
+			}
+		};
+	}
+	// first capture matched reference (used as baseline) - no further comparison needed
+	if (retries === 0) {
+		return { type: "matched-immediately" };
+	}
+	const comparisonResult = await comparator(reference, screenshot, {
 		createDiff: true,
 		...comparatorOptions
 	});
-	if (finalResult.pass === false && finalResult.diff !== null) {
-		const diff = await codec.encode({
-			data: finalResult.diff,
-			metadata: {
-				height: reference.metadata.height,
-				width: reference.metadata.width
+	if (comparisonResult.pass) {
+		return { type: "matched-after-comparison" };
+	}
+	if (updateSnapshot === "all") {
+		return {
+			type: "update-reference",
+			reference: {
+				image: screenshot,
+				path: paths.reference
 			}
-		}, {});
-		await writeScreenshot(paths.diffs.diff, diff);
-	}
-	// case #05
-	//  - reference matches stable screenshot
-	//  - pass
-	if (finalResult.pass === true) {
-		return { pass: true };
-	}
-	const actual = await codec.encode(value.actual, {});
-	await writeScreenshot(paths.diffs.actual, actual);
-	// case #06
-	//  - fallback, reference does NOT match stable screenshot
-	//  - fail
+		};
+	}
 	return {
-		pass: false,
+		type: "mismatch",
 		reference: {
-			path: paths.reference,
-			width: reference.metadata.width,
-			height: reference.metadata.height
+			image: reference,
+			path: paths.reference
 		},
 		actual: {
-			path: paths.diffs.actual,
-			width: value.actual.metadata.width,
-			height: value.actual.metadata.height
+			image: screenshot,
+			path: paths.diffs.actual
+		},
+		diff: comparisonResult.diff && {
+			image: {
+				data: comparisonResult.diff,
+				metadata: reference.metadata
+			},
+			path: paths.diffs.diff
 		},
-		diff: finalResult.diff && paths.diffs.diff,
-		message: `Screenshot does not match the stored reference.${finalResult.message === null ? "" : `\n${finalResult.message}`}`
+		message: comparisonResult.message
 	};
-};
-async function writeScreenshot(path, image) {
-	try {
-		await mkdir(dirname(path), { recursive: true });
-		await writeFile$1(path, image);
-	} catch {
-		throw new Error("Couldn't write file to fs");
+}
+/**
+* Writes files to disk based on the outcome.
+*
+* Only `missing-reference`, `update-reference`, and `mismatch` write files. Successful matches produce no side effects.
+*/
+async function performSideEffects(outcome, codec) {
+	switch (outcome.type) {
+		case "missing-reference":
+		case "update-reference": {
+			await writeScreenshot(outcome.reference.path, await codec.encode(outcome.reference.image, {}));
+			break;
+		}
+		case "mismatch": {
+			await writeScreenshot(outcome.actual.path, await codec.encode(outcome.actual.image, {}));
+			if (outcome.diff) {
+				await writeScreenshot(outcome.diff.path, await codec.encode(outcome.diff.image, {}));
+			}
+			break;
+		}
+	}
+}
+/**
+* Transforms a {@linkcode MatchOutcome} into the output format expected by the test runner.
+*
+* Maps each outcome to a pass/fail result with metadata and error messages.
+*/
+function buildOutput(outcome, timeout) {
+	switch (outcome.type) {
+		case "unstable-screenshot": return {
+			pass: false,
+			reference: outcome.reference && {
+				path: outcome.reference.path,
+				width: outcome.reference.image.metadata.width,
+				height: outcome.reference.image.metadata.height
+			},
+			actual: null,
+			diff: null,
+			message: `Could not capture a stable screenshot within ${timeout}ms.`
+		};
+		case "missing-reference": {
+			return {
+				pass: false,
+				reference: {
+					path: outcome.reference.path,
+					width: outcome.reference.image.metadata.width,
+					height: outcome.reference.image.metadata.height
+				},
+				actual: null,
+				diff: null,
+				message: outcome.location === "reference" ? "No existing reference screenshot found; a new one was created. Review it before running tests again." : "No existing reference screenshot found."
+			};
+		}
+		case "update-reference":
+		case "matched-immediately":
+		case "matched-after-comparison": return { pass: true };
+		case "mismatch": return {
+			pass: false,
+			reference: {
+				path: outcome.reference.path,
+				width: outcome.reference.image.metadata.width,
+				height: outcome.reference.image.metadata.height
+			},
+			actual: {
+				path: outcome.actual.path,
+				width: outcome.actual.image.metadata.width,
+				height: outcome.actual.image.metadata.height
+			},
+			diff: outcome.diff && {
+				path: outcome.diff.path,
+				width: outcome.diff.image.metadata.width,
+				height: outcome.diff.image.metadata.height
+			},
+			message: `Screenshot does not match the stored reference.${outcome.message ? `\n${outcome.message}` : ""}`
+		};
+		default: {
+			return {
+				pass: false,
+				actual: null,
+				reference: null,
+				diff: null,
+				message: `Outcome (${outcome.type}) not handled. This is a bug in Vitest. Please, open an issue with reproduction.`
+			};
+		}
 	}
 }
 /**
+* Captures a stable screenshot with timeout handling.
+*
+* Wraps {@linkcode getStableScreenshot} with an abort controller that triggers when the timeout expires. Returns `null` if the page never stabilizes.
+*/
+async function waitForStableScreenshot(options, timeout) {
+	const abortController = new AbortController();
+	const stableScreenshot = getStableScreenshot(options, abortController.signal);
+	const result = await (timeout === 0 ? stableScreenshot : Promise.race([stableScreenshot, asyncTimeout(timeout).finally(() => abortController.abort())]));
+	return result;
+}
+/**
 * Takes screenshots repeatedly until the page reaches a visually stable state.
 *
-* This function compares consecutive screenshots and continues taking new ones
-* until two consecutive screenshots match according to the provided comparator.
+* This function compares consecutive screenshots and continues taking new ones until two consecutive screenshots match according to the provided comparator.
 *
 * The process works as follows:
 *
@@ -2364,10 +2463,9 @@ async function writeScreenshot(path, image) {
 * 4. If they don't match, it continues with the newer screenshot as the baseline
 * 5. Repeats until stability is achieved or the operation is aborted
 *
-* @returns `Promise` resolving to an object containing the retry count and
-* final screenshot
+* @returns `Promise` resolving to an object containing the retry count and final screenshot
 */
-async function getStableScreenshots({ codec, context, comparator, comparatorOptions, element, name, reference, screenshotOptions, signal }) {
+async function getStableScreenshot({ codec, context, comparator, comparatorOptions, element, name, reference, screenshotOptions }, signal) {
 	const screenshotArgument = {
 		codec,
 		context,
@@ -2382,12 +2480,12 @@ async function getStableScreenshots({ codec, context, comparator, comparatorOpti
 			decodedBaseline = takeDecodedScreenshot(screenshotArgument);
 		}
 		const [image1, image2] = await Promise.all([decodedBaseline, takeDecodedScreenshot(screenshotArgument)]);
-		const comparatorResult = (await comparator(image1, image2, {
+		const isStable = (await comparator(image1, image2, {
 			...comparatorOptions,
 			createDiff: false
 		})).pass;
 		decodedBaseline = image2;
-		if (comparatorResult) {
+		if (isStable) {
 			break;
 		}
 		retries += 1;
@@ -2397,6 +2495,15 @@ async function getStableScreenshots({ codec, context, comparator, comparatorOpti
 		actual: await decodedBaseline
 	};
 }
+/** Writes encoded images to disk, creating parent directories as needed. */
+async function writeScreenshot(path, image) {
+	try {
+		await mkdir(dirname(path), { recursive: true });
+		await writeFile$1(path, image);
+	} catch (cause) {
+		throw new Error("Couldn't write file to fs", { cause });
+	}
+}
 
 var builtinCommands = {
 	readFile,
@@ -2417,26 +2524,24 @@ class ProjectBrowser {
 	testerFilepath;
 	provider;
 	vitest;
+	vite;
 	config;
-	children = new Set();
-	parent;
 	state = new BrowserServerState();
-	constructor(project, base) {
+	constructor(parent, project, base) {
+		this.parent = parent;
 		this.project = project;
 		this.base = base;
 		this.vitest = project.vitest;
 		this.config = project.config;
-		const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
-		const distRoot = resolve(pkgRoot, "dist");
+		this.vite = parent.vite;
+		// instances can override testerHtmlPath
 		const testerHtmlPath = project.config.browser.testerHtmlPath ? resolve(project.config.root, project.config.browser.testerHtmlPath) : resolve(distRoot, "client/tester/tester.html");
+		// TODO: when config resolution is rewritten, project and parentProject should be created before the vite server is started
 		if (!existsSync(testerHtmlPath)) {
 			throw new Error(`Tester HTML file "${testerHtmlPath}" doesn't exist.`);
 		}
 		this.testerFilepath = testerHtmlPath;
-		this.testerHtml = readFile$1(testerHtmlPath, "utf8").then((html) => this.testerHtml = html);
-	}
-	get vite() {
-		return this.parent.vite;
+		this.testerHtml = readFile$1(this.testerFilepath, "utf8").then((html) => this.testerHtml = html);
 	}
 	commands = {};
 	registerCommand(name, cb) {
@@ -2483,7 +2588,7 @@ class ProjectBrowser {
 		return this.parent.parseStacktrace(trace, options);
 	}
 	async close() {
-		await this.parent.vite.close();
+		await this.vite.close();
 	}
 }
 function wrapConfig(config) {
@@ -2589,8 +2694,7 @@ class ParentBrowserProject {
 		if (!this.vite) {
 			throw new Error(`Cannot spawn child server without a parent dev server.`);
 		}
-		const clone = new ProjectBrowser(project, "/");
-		clone.parent = this;
+		const clone = new ProjectBrowser(this, project, "/");
 		this.children.add(clone);
 		return clone;
 	}
@@ -3242,6 +3346,7 @@ const createBrowserServer = async (options) => {
 	let cacheDir;
 	const vite = await createViteServer({
 		...project.options,
+		define: project.config.viteDefine,
 		base: "/",
 		root: project.config.root,
 		logLevel,

package/dist/locators.d.ts

@@ -1,4 +1,4 @@
-import { UserEventClickOptions, UserEventClearOptions, UserEventHoverOptions, UserEventFillOptions, UserEventUploadOptions, UserEventDragAndDropOptions, UserEventSelectOptions, LocatorScreenshotOptions, LocatorByRoleOptions, LocatorOptions } from 'vitest/browser';
+import { UserEventClickOptions, UserEventWheelOptions, UserEventClearOptions, UserEventHoverOptions, UserEventFillOptions, UserEventUploadOptions, UserEventDragAndDropOptions, UserEventSelectOptions, LocatorScreenshotOptions, LocatorByRoleOptions, LocatorOptions } from 'vitest/browser';
 
 type ClauseCombinator = '' | '>' | '+' | '~' | '>=';
 type CSSFunctionArgument = CSSComplexSelector | number | string;
@@ -312,6 +312,7 @@ declare abstract class Locator {
 	click(options?: UserEventClickOptions): Promise<void>;
 	dblClick(options?: UserEventClickOptions): Promise<void>;
 	tripleClick(options?: UserEventClickOptions): Promise<void>;
+	wheel(options: UserEventWheelOptions): Promise<void>;
 	clear(options?: UserEventClearOptions): Promise<void>;
 	hover(options?: UserEventHoverOptions): Promise<void>;
 	unhover(options?: UserEventHoverOptions): Promise<void>;

package/dist/locators.js

@@ -1 +1 @@
-export{L as Locator,n as convertElementToCssSelector,q as getByAltTextSelector,r as getByLabelSelector,t as getByPlaceholderSelector,u as getByRoleSelector,v as getByTestIdSelector,w as getByTextSelector,x as getByTitleSelector,o as getIframeScale,p as processTimeoutOptions,s as selectorEngine}from"./index-CEutxZap.js";import"vitest/browser";import"vitest/internal/browser";
+export{L as Locator,n as convertElementToCssSelector,q as getByAltTextSelector,r as getByLabelSelector,t as getByPlaceholderSelector,u as getByRoleSelector,v as getByTestIdSelector,w as getByTextSelector,x as getByTitleSelector,o as getIframeScale,p as processTimeoutOptions,s as selectorEngine}from"./index-5ZLDAkrH.js";import"vitest/browser";import"vitest/internal/browser";

package/dist/shared/screenshotMatcher/types.d.ts

@@ -14,7 +14,7 @@ export type ScreenshotMatcherOutput = Promise<{
 	pass: false;
 	reference: ScreenshotData | null;
 	actual: ScreenshotData | null;
-	diff: string | null;
+	diff: ScreenshotData | null;
 	message: string;
 } | {
 	pass: true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser",
   "type": "module",
-  "version": "4.0.16",
+  "version": "4.1.0-beta.1",
   "description": "Browser running for Vitest",
   "license": "MIT",
   "funding": "https://opencollective.com/vitest",
@@ -51,7 +51,7 @@
     "providers"
   ],
   "peerDependencies": {
-    "vitest": "4.0.16"
+    "vitest": "4.1.0-beta.1"
   },
   "dependencies": {
     "magic-string": "^0.30.21",
@@ -59,21 +59,22 @@
     "pngjs": "^7.0.0",
     "sirv": "^3.0.2",
     "tinyrainbow": "^3.0.3",
-    "ws": "^8.18.3",
-    "@vitest/mocker": "4.0.16",
-    "@vitest/utils": "4.0.16"
+    "ws": "^8.19.0",
+    "@vitest/mocker": "4.1.0-beta.1",
+    "@vitest/utils": "4.1.0-beta.1"
   },
   "devDependencies": {
+    "@opentelemetry/api": "^1.9.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/pngjs": "^6.0.5",
     "@types/ws": "^8.18.1",
     "birpc": "^4.0.0",
-    "flatted": "^3.3.3",
+    "flatted": "3.3.3",
     "ivya": "^1.7.0",
     "mime": "^4.1.0",
     "pathe": "^2.0.3",
-    "@vitest/runner": "4.0.16",
-    "vitest": "4.0.16"
+    "@vitest/runner": "4.1.0-beta.1",
+    "vitest": "4.1.0-beta.1"
   },
   "scripts": {
     "typecheck": "tsc -p ./src/client/tsconfig.json --noEmit",
@@ -81,7 +82,7 @@
     "build": "premove dist && pnpm build:node && pnpm build:client",
     "build:client": "vite build src/client",
     "build:node": "rollup -c",
-    "dev:client": "vite build src/client --watch",
+    "dev:client": "node --watch-preserve-output --watch-path src/client scripts/build-client.js",
     "dev:node": "rollup -c --watch --watch.include 'src/**'",
     "dev": "premove dist && pnpm run --stream '/^dev:/'"
   }