@argos-ci/vitest 0.4.7 → 0.6.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import "@argos-ci/core";
 import { ScreenshotMetadata } from "@argos-ci/util";
+import "@argos-ci/core";
 import { ArgosAttachment } from "@argos-ci/playwright";
 import { StabilizationPluginOptions, ViewportOption } from "@argos-ci/browser";
 //#region src/metadata.d.ts
@@ -142,8 +142,8 @@ type SerializableSnapshotOptions = Omit<VitestSnapshotOptions, "serialize" | "na
 //#region src/index.d.ts
 declare module "vitest/browser" {
   interface BrowserCommands {
-    argosScreenshot: (name: string, options?: VitestScreenshotOptions, test?: TestMetadata) => Promise<ArgosAttachment[]>;
-    argosSnapshot: (name: string, content: string, options?: SerializableSnapshotOptions, test?: TestMetadata) => Promise<ArgosAttachment[]>;
+    argosScreenshot: (name: string, options?: VitestScreenshotOptions, test?: TestMetadata, captureIndex?: number | null) => Promise<ArgosAttachment[]>;
+    argosSnapshot: (name: string, content: string, options?: SerializableSnapshotOptions, test?: TestMetadata, captureIndex?: number | null) => Promise<ArgosAttachment[]>;
   }
 }
 /**

package/dist/index.mjs

@@ -1,17 +1,32 @@
+import { getTestRunKey, nextCaptureIndex } from "@argos-ci/util";
 //#region src/test-context.ts
 /**
+* Entry point exposing `getCurrentTest` before Vitest 4.1, and removed
+* altogether in Vitest 5.
+*
+* Held in a variable rather than written inline at the import: Vite's
+* dependency pre-bundler resolves a literal specifier eagerly, and on Vitest 5
+* that fails the whole optimize step over an export that no longer exists —
+* even though the branch importing it cannot run there.
+*/
+const LEGACY_SUITE_ENTRY = "vitest/suite";
+/**
 * Get the current Vitest test task, or `undefined` when not inside a test.
 *
 * Vitest >= 4.1 exposes `TestRunner.getCurrentTest()` from the `vitest` entry
-* point; the `vitest/suite` export is deprecated. We prefer the new API and
-* fall back to `vitest/suite` for older 4.x. Both are imported dynamically so
-* importing `@argos-ci/vitest` in a non-Vitest environment does not pull Vitest
-* in — only call this once you know Vitest is available.
+* point; the `vitest/suite` export is deprecated there and gone in Vitest 5. We
+* prefer the new API and fall back to `vitest/suite` for older 4.x. Both are
+* imported dynamically so importing `@argos-ci/vitest` in a non-Vitest
+* environment does not pull Vitest in — only call this once you know Vitest is
+* available.
 */
 async function getCurrentTest() {
 	const runner = (await import("vitest")).TestRunner;
 	if (runner?.getCurrentTest) return runner.getCurrentTest();
-	return (await import("vitest/suite")).getCurrentTest();
+	return (await import(
+		/* @vite-ignore */
+		LEGACY_SUITE_ENTRY
+)).getCurrentTest();
 }
 //#endregion
 //#region src/auto-name.ts
@@ -137,6 +152,23 @@ async function getTestMetadata() {
 	if (!task) return null;
 	return buildTestMetadata(task);
 }
+/**
+* Take the next capture index for the current Vitest test, or `null` outside a
+* test. Screenshots and snapshots share the counter, so a test that mixes both
+* still numbers them in the order it produced them.
+*
+* Runs on the test side, where the test context is available; the number then
+* crosses the RPC boundary to the Node command.
+*/
+async function takeCaptureIndex() {
+	const task = await getCurrentTest();
+	if (!task) return null;
+	return nextCaptureIndex(getTestRunKey({
+		id: task.id,
+		retry: task.result?.retryCount ?? void 0,
+		repeat: task.result?.repeatCount ?? void 0
+	}));
+}
 //#endregion
 //#region ../../node_modules/.pnpm/tinyrainbow@3.1.1/node_modules/tinyrainbow/dist/index.js
 var b = {
@@ -221,7 +253,7 @@ function C({ force: e } = {}) {
 }
 var y = C();
 //#endregion
-//#region ../../node_modules/.pnpm/@vitest+pretty-format@4.1.10/node_modules/@vitest/pretty-format/dist/index.js
+//#region ../../node_modules/.pnpm/@vitest+pretty-format@5.0.0/node_modules/@vitest/pretty-format/dist/index.js
 function _mergeNamespaces(n, m) {
 	m.forEach(function(e) {
 		e && typeof e !== "string" && !Array.isArray(e) && Object.keys(e).forEach(function(k) {
@@ -251,7 +283,7 @@ function getKeysOfEnumerableProperties(object, compareKeys) {
 * with spacing, indentation, and comma
 * without surrounding punctuation (for example, braces)
 */
-function printIteratorEntries(iterator, config, indentation, depth, refs, printer, separator = ": ") {
+function printIteratorEntries(iterator, config, indentation, depth, refs, printer, separator = ": ", length) {
 	let result = "";
 	let width = 0;
 	let current = iterator.next();
@@ -261,7 +293,7 @@ function printIteratorEntries(iterator, config, indentation, depth, refs, printe
 		while (!current.done) {
 			result += indentationNext;
 			if (width++ === config.maxWidth) {
-				result += "…";
+				result += typeof length === "number" ? `…(${length - width + 1})` : "…";
 				break;
 			}
 			const name = printer(current.value[0], config, indentationNext, depth, refs);
@@ -280,7 +312,7 @@ function printIteratorEntries(iterator, config, indentation, depth, refs, printe
 * with spacing, indentation, and comma
 * without surrounding punctuation (braces or brackets)
 */
-function printIteratorValues(iterator, config, indentation, depth, refs, printer) {
+function printIteratorValues(iterator, config, indentation, depth, refs, printer, length) {
 	let result = "";
 	let width = 0;
 	let current = iterator.next();
@@ -290,7 +322,7 @@ function printIteratorValues(iterator, config, indentation, depth, refs, printer
 		while (!current.done) {
 			result += indentationNext;
 			if (width++ === config.maxWidth) {
-				result += "…";
+				result += typeof length === "number" ? `…(${length - width + 1})` : "…";
 				break;
 			}
 			result += printer(current.value, config, indentationNext, depth, refs);
@@ -318,7 +350,7 @@ function printListItems(list, config, indentation, depth, refs, printer) {
 		for (let i = 0; i < length; i++) {
 			result += indentationNext;
 			if (i === config.maxWidth) {
-				result += "…";
+				result += `…(${length - i})`;
 				break;
 			}
 			if (isDataView(list) || i in list) result += printer(isDataView(list) ? list.getInt8(i) : list[i], config, indentationNext, depth, refs);
@@ -334,17 +366,22 @@ function printListItems(list, config, indentation, depth, refs, printer) {
 * with spacing, indentation, and comma
 * without surrounding punctuation (for example, braces)
 */
-function printObjectProperties(val, config, indentation, depth, refs, printer) {
+function printObjectProperties(val, config, indentation, depth, refs, printer, compareKeysOverride = config.compareKeys) {
 	let result = "";
-	const keys = getKeysOfEnumerableProperties(val, config.compareKeys);
+	const keys = getKeysOfEnumerableProperties(val, compareKeysOverride);
 	if (keys.length > 0) {
 		result += config.spacingOuter;
 		const indentationNext = indentation + config.indent;
 		for (let i = 0; i < keys.length; i++) {
+			result += indentationNext;
+			if (i === config.maxWidth) {
+				result += `…(${keys.length - i})`;
+				break;
+			}
 			const key = keys[i];
-			const name = printer(key, config, indentationNext, depth, refs);
+			const name = !config.quoteKeys && isUnquotableKey(key) ? key : printer(key, config, indentationNext, depth, refs);
 			const value = printer(val[key], config, indentationNext, depth, refs);
-			result += `${indentationNext + name}: ${value}`;
+			result += `${name}: ${value}`;
 			if (i < keys.length - 1) result += `,${config.spacingInner}`;
 			else if (!config.min) result += ",";
 		}
@@ -352,6 +389,10 @@ function printObjectProperties(val, config, indentation, depth, refs, printer) {
 	}
 	return result;
 }
+const keyStrRegExp = /^[a-z_]\w*$/i;
+function isUnquotableKey(key) {
+	return typeof key === "string" && key !== "__proto__" && keyStrRegExp.test(key);
+}
 const asymmetricMatcher = typeof Symbol === "function" && Symbol.for ? Symbol.for("jest.asymmetricMatcher") : 1267621;
 const SPACE$2 = " ";
 const serialize$5 = (val, config, indentation, depth, refs, printer) => {
@@ -410,7 +451,7 @@ function printProps(keys, props, config, indentation, depth, refs, printer) {
 	const colors = config.colors;
 	return keys.map((key) => {
 		const value = props[key];
-		if (typeof value === "string" && value[0] === "_" && value.startsWith("__vitest_") && value.match(/__vitest_\d+__/)) return "";
+		if (typeof value === "string" && value[0] === "_" && value.startsWith("__vitest_") && /__vitest_\d+__/.test(value)) return "";
 		let printed = printer(value, config, indentationNext, depth, refs);
 		if (typeof value !== "string") {
 			if (printed.includes("\n")) printed = config.spacingOuter + indentationNext + printed + config.spacingOuter + indentation;
@@ -887,7 +928,7 @@ function printError(val) {
 * The first port of call for printing an object, handles most of the
 * data-types in JS.
 */
-function printBasicValue(val, printFunctionName, escapeRegex, escapeString) {
+function printBasicValue(val, printFunctionName, escapeRegex, escapeString, singleQuote) {
 	if (val === true || val === false) return `${val}`;
 	if (val === void 0) return "undefined";
 	if (val === null) return "null";
@@ -895,8 +936,12 @@ function printBasicValue(val, printFunctionName, escapeRegex, escapeString) {
 	if (typeOf === "number") return printNumber(val);
 	if (typeOf === "bigint") return printBigInt(val);
 	if (typeOf === "string") {
-		if (escapeString) return `"${val.replaceAll(/"|\\/g, "\\$&")}"`;
-		return `"${val}"`;
+		const q = singleQuote ? "'" : "\"";
+		if (escapeString) {
+			const escapePattern = singleQuote ? /['\\]/g : /["\\]/g;
+			return `${q}${val.replaceAll(escapePattern, "\\$&")}${q}`;
+		}
+		return `${q}${val}${q}`;
 	}
 	if (typeOf === "function") return printFunction(val, printFunctionName);
 	if (typeOf === "symbol") return printSymbol(val);
@@ -927,10 +972,10 @@ function printComplexValue(val, config, indentation, depth, refs, hasCalledToJSO
 	if (config.callToJSON && !hitMaxDepth && val.toJSON && typeof val.toJSON === "function" && !hasCalledToJSON) return printer(val.toJSON(), config, indentation, depth, refs, true);
 	const toStringed = toString.call(val);
 	if (toStringed === "[object Arguments]") return hitMaxDepth ? "[Arguments]" : `${min ? "" : "Arguments "}[${printListItems(val, config, indentation, depth, refs, printer)}]`;
-	if (isToStringedArrayType(toStringed)) return hitMaxDepth ? `[${val.constructor.name}]` : `${min ? "" : !config.printBasicPrototype && val.constructor.name === "Array" ? "" : `${val.constructor.name} `}[${printListItems(val, config, indentation, depth, refs, printer)}]`;
-	if (toStringed === "[object Map]") return hitMaxDepth ? "[Map]" : `Map {${printIteratorEntries(val.entries(), config, indentation, depth, refs, printer, " => ")}}`;
-	if (toStringed === "[object Set]") return hitMaxDepth ? "[Set]" : `Set {${printIteratorValues(val.values(), config, indentation, depth, refs, printer)}}`;
-	return hitMaxDepth || isWindow(val) ? `[${getConstructorName(val)}]` : `${min ? "" : !config.printBasicPrototype && getConstructorName(val) === "Object" ? "" : `${getConstructorName(val)} `}{${printObjectProperties(val, config, indentation, depth, refs, printer)}}`;
+	if (isToStringedArrayType(toStringed)) return hitMaxDepth ? `[${val.constructor.name}]` : `${!config.printBasicPrototype && val.constructor.name === "Array" ? "" : `${val.constructor.name} `}[${printListItems(val, config, indentation, depth, refs, printer)}]`;
+	if (toStringed === "[object Map]") return hitMaxDepth ? "[Map]" : `Map {${printIteratorEntries(val.entries(), config, indentation, depth, refs, printer, " => ", val.size)}}`;
+	if (toStringed === "[object Set]") return hitMaxDepth ? "[Set]" : `Set {${printIteratorValues(val.values(), config, indentation, depth, refs, printer, val.size)}}`;
+	return hitMaxDepth || isWindow(val) ? `[${getConstructorName(val)}]` : `${!config.printBasicPrototype && getConstructorName(val) === "Object" ? "" : `${getConstructorName(val)} `}{${printObjectProperties(val, config, indentation, depth, refs, printer)}}`;
 }
 const ErrorPlugin = {
 	test: (val) => val && val instanceof Error,
@@ -946,7 +991,7 @@ const ErrorPlugin = {
 			...rest
 		};
 		const name = val.name !== "Error" ? val.name : getConstructorName(val);
-		return hitMaxDepth ? `[${name}]` : `${name} {${printIteratorEntries(Object.entries(entries).values(), config, indentation, depth, refs, printer)}}`;
+		return hitMaxDepth ? `[${name}]` : `${name} {${printObjectProperties(entries, config, indentation, depth, refs, printer, null)}}`;
 	}
 };
 function isNewPlugin(plugin) {
@@ -982,7 +1027,7 @@ function printer(val, config, indentation, depth, refs, hasCalledToJSON) {
 	const plugin = findPlugin(config.plugins, val);
 	if (plugin !== null) result = printPlugin(plugin, val, config, indentation, depth, refs);
 	else {
-		const basicResult = printBasicValue(val, config.printFunctionName, config.escapeRegex, config.escapeString);
+		const basicResult = printBasicValue(val, config.printFunctionName, config.escapeRegex, config.escapeString, config.singleQuote);
 		if (basicResult !== null) result = basicResult;
 		else result = printComplexValue(val, config, indentation, depth, refs, hasCalledToJSON);
 	}
@@ -1014,7 +1059,11 @@ const DEFAULT_OPTIONS = {
 	printBasicPrototype: true,
 	printFunctionName: true,
 	printShadowRoot: true,
-	theme: DEFAULT_THEME
+	theme: DEFAULT_THEME,
+	singleQuote: false,
+	quoteKeys: true,
+	spacingInner: "\n",
+	spacingOuter: "\n"
 };
 function validateOptions(options) {
 	for (const key of Object.keys(options)) if (!Object.hasOwn(DEFAULT_OPTIONS, key)) throw new Error(`pretty-format: Unknown option "${key}".`);
@@ -1059,11 +1108,13 @@ function getConfig(options) {
 		maxWidth: options?.maxWidth ?? DEFAULT_OPTIONS.maxWidth,
 		min: options?.min ?? DEFAULT_OPTIONS.min,
 		plugins: options?.plugins ?? DEFAULT_OPTIONS.plugins,
-		printBasicPrototype: options?.printBasicPrototype ?? true,
+		printBasicPrototype: options?.printBasicPrototype ?? !options?.min,
 		printFunctionName: getPrintFunctionName(options),
 		printShadowRoot: options?.printShadowRoot ?? true,
-		spacingInner: options?.min ? " " : "\n",
-		spacingOuter: options?.min ? "" : "\n",
+		spacingInner: options?.spacingInner ?? (options?.min ? " " : "\n"),
+		spacingOuter: options?.spacingOuter ?? (options?.min ? "" : "\n"),
+		singleQuote: options?.singleQuote ?? DEFAULT_OPTIONS.singleQuote,
+		quoteKeys: options?.quoteKeys ?? DEFAULT_OPTIONS.quoteKeys,
 		maxOutputLength: options?.maxOutputLength ?? DEFAULT_OPTIONS.maxOutputLength,
 		_outputLengthPerDepth: []
 	};
@@ -1077,16 +1128,13 @@ function createIndent(indent) {
 * @param options Custom settings
 */
 function format(val, options) {
-	if (options) {
-		validateOptions(options);
-		if (options.plugins) {
-			const plugin = findPlugin(options.plugins, val);
-			if (plugin !== null) return printPlugin(plugin, val, getConfig(options), "", 0, []);
-		}
-	}
-	const basicResult = printBasicValue(val, getPrintFunctionName(options), getEscapeRegex(options), getEscapeString(options));
+	if (options) validateOptions(options);
+	const config = getConfig(options);
+	const plugin = findPlugin(config.plugins, val);
+	if (plugin !== null) return printPlugin(plugin, val, config, "", 0, []);
+	const basicResult = printBasicValue(val, config.printFunctionName, config.escapeRegex, config.escapeString, config.singleQuote);
 	if (basicResult !== null) return basicResult;
-	return printComplexValue(val, getConfig(options), "", 0, []);
+	return printComplexValue(val, config, "", 0, []);
 }
 const plugins = {
 	AsymmetricMatcher: plugin$5,
@@ -1142,9 +1190,13 @@ async function argosScreenshot(nameOrOptions, maybeOptions) {
 	const name = typeof nameOrOptions === "string" ? nameOrOptions : void 0;
 	const options = typeof nameOrOptions === "string" ? maybeOptions : nameOrOptions;
 	if (!await checkIsVitestEnv()) return [];
-	const [resolvedName, test] = await Promise.all([resolveAutoName(name, { reservedLength: SCREENSHOT_NAME_RESERVED }), getTestMetadata()]);
+	const [resolvedName, test, captureIndex] = await Promise.all([
+		resolveAutoName(name, { reservedLength: SCREENSHOT_NAME_RESERVED }),
+		getTestMetadata(),
+		takeCaptureIndex()
+	]);
 	const { server } = await import("vitest/browser");
-	return server.commands.argosScreenshot(resolvedName, options ?? {}, test);
+	return server.commands.argosScreenshot(resolvedName, options ?? {}, test, captureIndex);
 }
 /**
 * Take an Argos snapshot of any serializable value, mimicking
@@ -1181,15 +1233,19 @@ async function argosSnapshot(content, options = {}) {
 	if (!await checkIsVitestEnv()) return [];
 	const rawExtension = options.extension ?? ".txt";
 	const extension = rawExtension.startsWith(".") ? rawExtension : `.${rawExtension}`;
-	const [resolvedName, test] = await Promise.all([resolveAutoName(options.name, { reservedLength: 9 + extension.length + 11 }), getTestMetadata()]);
+	const [resolvedName, test, captureIndex] = await Promise.all([
+		resolveAutoName(options.name, { reservedLength: 9 + extension.length + 11 }),
+		getTestMetadata(),
+		takeCaptureIndex()
+	]);
 	const serialized = serializeSnapshot(content, options);
 	const { serialize: _serialize, name: _name, ...serializableOptions } = options;
 	if (checkIsBrowserEnv()) {
 		const { server } = await import("vitest/browser");
-		return server.commands.argosSnapshot(resolvedName, serialized, serializableOptions, test);
+		return server.commands.argosSnapshot(resolvedName, serialized, serializableOptions, test, captureIndex);
 	}
-	const { writeSnapshotFile } = await import("./snapshot-file-D8dL3z_T.mjs");
-	return writeSnapshotFile(resolvedName, serialized, serializableOptions, test);
+	const { writeSnapshotFile } = await import("./snapshot-file-CZE4r9Wl.mjs");
+	return writeSnapshotFile(resolvedName, serialized, serializableOptions, test, captureIndex);
 }
 /**
 * Check if we are running in a Vitest environment.

package/dist/internal.d.mts

@@ -7,14 +7,25 @@ import { ViewportSize } from "@argos-ci/browser";
  */
 declare const VITEST_IFRAME_SELECTOR = "iframe[data-vitest=\"true\"]";
 /**
- * ID of the Vitest "tester" element that wraps the iframe with a `scale(...)`
- * transform.
+ * ID of the Vitest "tester" element wrapping the iframe.
  */
 declare const VITEST_TESTER_ID = "vitest-tester";
 /**
- * Remove the scale from the Vitest `#vitest-tester` element before taking a
- * screenshot to avoid ending up with small screenshots.
- * @returns A function to restore the scale after the screenshot.
+ * Undo the scale Vitest applies to the `#vitest-tester` element, so the
+ * screenshot is captured at full size instead of shrunk.
+ *
+ * Only some Vitest versions scale the tester. Up to Vitest 4 a viewport larger
+ * than the browser window is emulated by sizing the tester to the requested
+ * viewport and shrinking it with a CSS `transform: scale(...)`. From Vitest 5
+ * the real browser viewport is resized instead, so the tester carries no
+ * transform and there is nothing to undo — which is why an unscaled tester is
+ * a no-op rather than an error.
+ *
+ * Detection reads the *computed* transform, so a scale set from a stylesheet
+ * counts too, while the override goes on the inline style, which is the only
+ * layer guaranteed to win.
+ *
+ * @returns A function restoring the transform after the screenshot.
  */
 declare function resetTesterScale(ctx: BrowserCommandContext): Promise<() => Promise<void>>;
 /**

package/dist/internal.mjs

@@ -7,11 +7,30 @@ import { readVersionFromPackage } from "@argos-ci/util";
 */
 const VITEST_IFRAME_SELECTOR = "iframe[data-vitest=\"true\"]";
 /**
-* ID of the Vitest "tester" element that wraps the iframe with a `scale(...)`
-* transform.
+* ID of the Vitest "tester" element wrapping the iframe.
 */
 const VITEST_TESTER_ID = "vitest-tester";
 /**
+* Dataset key holding the tester's inline `transform` from before Argos reset
+* it.
+*
+* The presence of the key — not the value it holds — is what marks the
+* transform as backed up: the original inline `transform` is usually an empty
+* string, which is indistinguishable from "nothing was saved yet".
+*/
+const TRANSFORM_BACKUP_KEY = "argosBckTransform";
+/**
+* Dataset key counting the screenshots currently holding the tester unscaled.
+*
+* Captures nest: a story calling `argosScreenshot` from its play function runs
+* one inside the automatic screenshot taken after the test. Both share this one
+* element, so without a count the inner restore would hand the scale back while
+* the outer capture is still to come — and the outer screenshot would come out
+* shrunk. Only the first reset saves and overrides the transform, and only the
+* last restore puts it back.
+*/
+const SCALE_HOLD_KEY = "argosScaleHold";
+/**
 * Attribute holding the iframe's inline size from before Argos resized it, as
 * JSON.
 *
@@ -21,27 +40,79 @@ const VITEST_TESTER_ID = "vitest-tester";
 */
 const SIZE_BACKUP_ATTRIBUTE = "data-argos-size-backup";
 /**
-* Remove the scale from the Vitest `#vitest-tester` element before taking a
-* screenshot to avoid ending up with small screenshots.
-* @returns A function to restore the scale after the screenshot.
+* Undo the scale Vitest applies to the `#vitest-tester` element, so the
+* screenshot is captured at full size instead of shrunk.
+*
+* Only some Vitest versions scale the tester. Up to Vitest 4 a viewport larger
+* than the browser window is emulated by sizing the tester to the requested
+* viewport and shrinking it with a CSS `transform: scale(...)`. From Vitest 5
+* the real browser viewport is resized instead, so the tester carries no
+* transform and there is nothing to undo — which is why an unscaled tester is
+* a no-op rather than an error.
+*
+* Detection reads the *computed* transform, so a scale set from a stylesheet
+* counts too, while the override goes on the inline style, which is the only
+* layer guaranteed to win.
+*
+* @returns A function restoring the transform after the screenshot.
 */
 async function resetTesterScale(ctx) {
-	await ctx.page.evaluate((testerId) => {
-		const tester = document.getElementById(testerId);
-		if (!(tester instanceof HTMLElement)) return;
-		if (!tester.getAttribute("data-scale")) throw new Error("Vitest iframe data-scale attribute not found");
-		tester.dataset.bckTransform = tester.style.transform;
-		tester.style.transform = `scale(1)`;
-	}, VITEST_TESTER_ID);
+	await ctx.page.evaluate(resetTesterScaleInPage, {
+		testerId: VITEST_TESTER_ID,
+		backupKey: TRANSFORM_BACKUP_KEY,
+		holdKey: SCALE_HOLD_KEY
+	});
 	return async () => {
-		await ctx.page.evaluate((testerId) => {
-			const tester = document.getElementById(testerId);
-			if (!(tester instanceof HTMLElement)) return;
-			tester.style.transform = tester.dataset.bckTransform ?? "";
-		}, VITEST_TESTER_ID);
+		await ctx.page.evaluate(restoreTesterScaleInPage, {
+			testerId: VITEST_TESTER_ID,
+			backupKey: TRANSFORM_BACKUP_KEY,
+			holdKey: SCALE_HOLD_KEY
+		});
 	};
 }
 /**
+* Body of {@link resetTesterScale}, running in the page.
+*
+* Exported for tests only, and self-contained on purpose: it is serialized to
+* the browser by `page.evaluate`, so it can reference nothing but its argument
+* and page globals.
+*/
+function resetTesterScaleInPage(args) {
+	const { testerId, backupKey, holdKey } = args;
+	const tester = document.getElementById(testerId);
+	if (!(tester instanceof HTMLElement)) return;
+	const held = Number(tester.dataset[holdKey] ?? "0");
+	tester.dataset[holdKey] = String(held + 1);
+	if (held > 0) return;
+	const { transform } = getComputedStyle(tester);
+	if (!transform || transform === "none") return;
+	const matrix = new DOMMatrixReadOnly(transform);
+	if (matrix.a === 1 && matrix.d === 1) return;
+	tester.dataset[backupKey] = tester.style.transform;
+	tester.style.transform = "scale(1)";
+}
+/**
+* Body of the function {@link resetTesterScale} returns, running in the page.
+*
+* Exported for tests only, and self-contained for the same reason as
+* {@link resetTesterScaleInPage}.
+*/
+function restoreTesterScaleInPage(args) {
+	const { testerId, backupKey, holdKey } = args;
+	const tester = document.getElementById(testerId);
+	if (!(tester instanceof HTMLElement)) return;
+	const held = Math.max(0, Number(tester.dataset[holdKey] ?? "0") - 1);
+	if (held > 0) {
+		tester.dataset[holdKey] = String(held);
+		return;
+	}
+	delete tester.dataset[holdKey];
+	const backup = tester.dataset[backupKey];
+	if (backup === void 0) return;
+	tester.style.transform = backup;
+	delete tester.dataset[backupKey];
+}
+/**
 * Resize the Vitest iframe.
 *
 * The story/test renders inside an `<iframe data-vitest="true">` on the host

package/dist/plugin.d.mts

@@ -3,8 +3,7 @@ import { StabilizationPluginOptions, ViewportOption } from "@argos-ci/browser";
 import { ScreenshotMetadata } from "@argos-ci/util";
 import { UploadParameters } from "@argos-ci/core";
 import { Plugin } from "vitest/config";
-import { BrowserCommand, Vitest } from "vitest/node";
-import { Reporter } from "vitest/reporters";
+import { BrowserCommand, Reporter, Vitest } from "vitest/node";
 //#region src/options.d.ts
 /**
  * Configuration for the Argos Vitest reporter.
@@ -174,7 +173,7 @@ type TestMetadata = ScreenshotMetadata["test"];
  * Arguments of the `argosScreenshot` browser command.
  * Only serializable values cross the browser/node RPC boundary.
  */
-type ArgosScreenshotCommandArgs = [name: string, options?: VitestScreenshotOptions, test?: TestMetadata];
+type ArgosScreenshotCommandArgs = [name: string, options?: VitestScreenshotOptions, test?: TestMetadata, captureIndex?: number | null];
 /**
  * Create the `argosScreenshot` browser command used to capture Argos
  * screenshots from Vitest browser tests.
@@ -191,7 +190,7 @@ declare const createArgosScreenshotCommand: (pluginOptions?: ArgosVitestPluginOp
  * Only serializable values cross the browser/node RPC boundary — the value is
  * already serialized to a string on the browser side.
  */
-type ArgosSnapshotCommandArgs = [name: string, content: string, options?: SerializableSnapshotOptions, test?: TestMetadata];
+type ArgosSnapshotCommandArgs = [name: string, content: string, options?: SerializableSnapshotOptions, test?: TestMetadata, captureIndex?: number | null];
 /**
  * Create the `argosSnapshot` browser command used to write serialized snapshots
  * from Vitest browser tests. The serialized string is produced on the browser

package/dist/plugin.mjs

@@ -11,11 +11,30 @@ import { getSnapshotMimeType, readConfig, upload } from "@argos-ci/core";
 */
 const VITEST_IFRAME_SELECTOR = "iframe[data-vitest=\"true\"]";
 /**
-* ID of the Vitest "tester" element that wraps the iframe with a `scale(...)`
-* transform.
+* ID of the Vitest "tester" element wrapping the iframe.
 */
 const VITEST_TESTER_ID = "vitest-tester";
 /**
+* Dataset key holding the tester's inline `transform` from before Argos reset
+* it.
+*
+* The presence of the key — not the value it holds — is what marks the
+* transform as backed up: the original inline `transform` is usually an empty
+* string, which is indistinguishable from "nothing was saved yet".
+*/
+const TRANSFORM_BACKUP_KEY = "argosBckTransform";
+/**
+* Dataset key counting the screenshots currently holding the tester unscaled.
+*
+* Captures nest: a story calling `argosScreenshot` from its play function runs
+* one inside the automatic screenshot taken after the test. Both share this one
+* element, so without a count the inner restore would hand the scale back while
+* the outer capture is still to come — and the outer screenshot would come out
+* shrunk. Only the first reset saves and overrides the transform, and only the
+* last restore puts it back.
+*/
+const SCALE_HOLD_KEY = "argosScaleHold";
+/**
 * Attribute holding the iframe's inline size from before Argos resized it, as
 * JSON.
 *
@@ -25,27 +44,79 @@ const VITEST_TESTER_ID = "vitest-tester";
 */
 const SIZE_BACKUP_ATTRIBUTE = "data-argos-size-backup";
 /**
-* Remove the scale from the Vitest `#vitest-tester` element before taking a
-* screenshot to avoid ending up with small screenshots.
-* @returns A function to restore the scale after the screenshot.
+* Undo the scale Vitest applies to the `#vitest-tester` element, so the
+* screenshot is captured at full size instead of shrunk.
+*
+* Only some Vitest versions scale the tester. Up to Vitest 4 a viewport larger
+* than the browser window is emulated by sizing the tester to the requested
+* viewport and shrinking it with a CSS `transform: scale(...)`. From Vitest 5
+* the real browser viewport is resized instead, so the tester carries no
+* transform and there is nothing to undo — which is why an unscaled tester is
+* a no-op rather than an error.
+*
+* Detection reads the *computed* transform, so a scale set from a stylesheet
+* counts too, while the override goes on the inline style, which is the only
+* layer guaranteed to win.
+*
+* @returns A function restoring the transform after the screenshot.
 */
 async function resetTesterScale(ctx) {
-	await ctx.page.evaluate((testerId) => {
-		const tester = document.getElementById(testerId);
-		if (!(tester instanceof HTMLElement)) return;
-		if (!tester.getAttribute("data-scale")) throw new Error("Vitest iframe data-scale attribute not found");
-		tester.dataset.bckTransform = tester.style.transform;
-		tester.style.transform = `scale(1)`;
-	}, VITEST_TESTER_ID);
+	await ctx.page.evaluate(resetTesterScaleInPage, {
+		testerId: VITEST_TESTER_ID,
+		backupKey: TRANSFORM_BACKUP_KEY,
+		holdKey: SCALE_HOLD_KEY
+	});
 	return async () => {
-		await ctx.page.evaluate((testerId) => {
-			const tester = document.getElementById(testerId);
-			if (!(tester instanceof HTMLElement)) return;
-			tester.style.transform = tester.dataset.bckTransform ?? "";
-		}, VITEST_TESTER_ID);
+		await ctx.page.evaluate(restoreTesterScaleInPage, {
+			testerId: VITEST_TESTER_ID,
+			backupKey: TRANSFORM_BACKUP_KEY,
+			holdKey: SCALE_HOLD_KEY
+		});
 	};
 }
 /**
+* Body of {@link resetTesterScale}, running in the page.
+*
+* Exported for tests only, and self-contained on purpose: it is serialized to
+* the browser by `page.evaluate`, so it can reference nothing but its argument
+* and page globals.
+*/
+function resetTesterScaleInPage(args) {
+	const { testerId, backupKey, holdKey } = args;
+	const tester = document.getElementById(testerId);
+	if (!(tester instanceof HTMLElement)) return;
+	const held = Number(tester.dataset[holdKey] ?? "0");
+	tester.dataset[holdKey] = String(held + 1);
+	if (held > 0) return;
+	const { transform } = getComputedStyle(tester);
+	if (!transform || transform === "none") return;
+	const matrix = new DOMMatrixReadOnly(transform);
+	if (matrix.a === 1 && matrix.d === 1) return;
+	tester.dataset[backupKey] = tester.style.transform;
+	tester.style.transform = "scale(1)";
+}
+/**
+* Body of the function {@link resetTesterScale} returns, running in the page.
+*
+* Exported for tests only, and self-contained for the same reason as
+* {@link resetTesterScaleInPage}.
+*/
+function restoreTesterScaleInPage(args) {
+	const { testerId, backupKey, holdKey } = args;
+	const tester = document.getElementById(testerId);
+	if (!(tester instanceof HTMLElement)) return;
+	const held = Math.max(0, Number(tester.dataset[holdKey] ?? "0") - 1);
+	if (held > 0) {
+		tester.dataset[holdKey] = String(held);
+		return;
+	}
+	delete tester.dataset[holdKey];
+	const backup = tester.dataset[backupKey];
+	if (backup === void 0) return;
+	tester.style.transform = backup;
+	delete tester.dataset[backupKey];
+}
+/**
 * Resize the Vitest iframe.
 *
 * The story/test renders inside an `<iframe data-vitest="true">` on the host
@@ -188,7 +259,7 @@ async function getVitestVersion() {
 * and are merged with the serializable per-call options (per-call wins).
 */
 const createArgosScreenshotCommand = (pluginOptions = {}) => {
-	return async (ctx, name, options, test) => {
+	return async (ctx, name, options, test, captureIndex) => {
 		if (!name) throw new Error("The `name` argument is required.");
 		const merged = {
 			...pluginOptions,
@@ -208,7 +279,8 @@ const createArgosScreenshotCommand = (pluginOptions = {}) => {
 					},
 					playwrightLibraries: ["vitest"],
 					viewport,
-					test
+					test,
+					captureIndex
 				});
 			};
 			const attachments = [];
@@ -276,7 +348,7 @@ function normalizeExtension(extension) {
 * This is the shared Node-side primitive used by both the browser command (which
 * receives the already-serialized string over RPC) and the Node code path.
 */
-async function writeSnapshotFile(name, content, options = {}, test) {
+async function writeSnapshotFile(name, content, options = {}, test, captureIndex) {
 	if (!name) throw new Error("The `name` argument is required.");
 	const root = options.root ?? "./snapshots";
 	const extension = normalizeExtension(options.extension ?? DEFAULT_EXTENSION);
@@ -298,7 +370,8 @@ async function writeSnapshotFile(name, content, options = {}, test) {
 			version: sdkVersion
 		},
 		...tags ? { tags } : {},
-		...resolvedTest ? { test: resolvedTest } : {}
+		...resolvedTest ? { test: resolvedTest } : {},
+		...captureIndex != null ? { capture: { index: captureIndex } } : {}
 	};
 	await createDirectory(dirname(snapshotPath));
 	await Promise.all([writeFile(snapshotPath, content, "utf-8"), writeMetadata(snapshotPath, metadata)]);
@@ -320,12 +393,12 @@ async function writeSnapshotFile(name, content, options = {}, test) {
 * side and this command writes it (and its metadata) to disk on the Node side.
 */
 const createArgosSnapshotCommand = (pluginOptions = {}) => {
-	return async (_ctx, name, content, options, test) => {
+	return async (_ctx, name, content, options, test, captureIndex) => {
 		if (!name) throw new Error("The `name` argument is required.");
 		return writeSnapshotFile(name, content, {
 			root: pluginOptions.root,
 			...options
-		}, test);
+		}, test, captureIndex);
 	};
 };
 //#endregion

package/dist/{snapshot-file-D8dL3z_T.mjs → snapshot-file-CZE4r9Wl.mjs}

@@ -1,8 +1,8 @@
 import { createRequire } from "node:module";
+import { createDirectory, getGitRepositoryPath, getMetadataPath, getScreenshotName, readVersionFromPackage, writeMetadata } from "@argos-ci/util";
 import { writeFile } from "node:fs/promises";
 import { dirname, relative, resolve } from "node:path";
 import { getSnapshotMimeType } from "@argos-ci/core";
-import { createDirectory, getGitRepositoryPath, getMetadataPath, getScreenshotName, readVersionFromPackage, writeMetadata } from "@argos-ci/util";
 //#region src/version.ts
 const require = createRequire(import.meta.url);
 /**
@@ -60,7 +60,7 @@ function normalizeExtension(extension) {
 * This is the shared Node-side primitive used by both the browser command (which
 * receives the already-serialized string over RPC) and the Node code path.
 */
-async function writeSnapshotFile(name, content, options = {}, test) {
+async function writeSnapshotFile(name, content, options = {}, test, captureIndex) {
 	if (!name) throw new Error("The `name` argument is required.");
 	const root = options.root ?? "./snapshots";
 	const extension = normalizeExtension(options.extension ?? DEFAULT_EXTENSION);
@@ -82,7 +82,8 @@ async function writeSnapshotFile(name, content, options = {}, test) {
 			version: sdkVersion
 		},
 		...tags ? { tags } : {},
-		...resolvedTest ? { test: resolvedTest } : {}
+		...resolvedTest ? { test: resolvedTest } : {},
+		...captureIndex != null ? { capture: { index: captureIndex } } : {}
 	};
 	await createDirectory(dirname(snapshotPath));
 	await Promise.all([writeFile(snapshotPath, content, "utf-8"), writeMetadata(snapshotPath, metadata)]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/vitest",
   "description": "Vitest SDK for visual testing with Argos.",
-  "version": "0.4.7",
+  "version": "0.6.0",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": {
@@ -52,9 +52,9 @@
   },
   "dependencies": {
     "@argos-ci/browser": "6.4.5",
-    "@argos-ci/core": "6.8.2",
-    "@argos-ci/playwright": "7.4.7",
-    "@argos-ci/util": "4.1.0"
+    "@argos-ci/core": "6.8.3",
+    "@argos-ci/playwright": "7.5.0",
+    "@argos-ci/util": "4.2.0"
   },
   "peerDependencies": {
     "@vitest/browser": ">=4",
@@ -64,9 +64,9 @@
   },
   "devDependencies": {
     "@types/node": "catalog:",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/pretty-format": "^4.1.10",
+    "@vitest/browser": "^5.0.0",
+    "@vitest/browser-playwright": "^5.0.0",
+    "@vitest/pretty-format": "^5.0.0",
     "playwright": "^1.62.1",
     "vitest": "catalog:"
   },
@@ -77,9 +77,10 @@
     "install-playwright": "playwright install chromium --with-deps",
     "build-e2e": "pnpm run install-playwright",
     "e2e": "cross-env BUILD_NAME=\"argos-vitest-e2e-node-$NODE_VERSION-$OS\" UPLOAD_TO_ARGOS=true pnpm run test-e2e",
+    "e2e-compat": "cross-env BUILD_NAME=\"argos-vitest4-e2e-node-$NODE_VERSION-$OS\" UPLOAD_TO_ARGOS=true pnpm run test-e2e",
     "check-types": "tsc",
     "check-format": "prettier --check --ignore-unknown --ignore-path=./.gitignore --ignore-path=../../.gitignore --ignore-path=../../.prettierignore .",
     "lint": "eslint ."
   },
-  "gitHead": "30a374b2c0f2b67b7a90fd4d22e395b70c191e0c"
+  "gitHead": "4a87379645664a85d91dfbb3571bb57b682ec69e"
 }