@sit-onyx/playwright-utils 1.2.2-dev-20260422105150 → 1.3.0-dev-20260429130251

package/dist/index.js

@@ -11,45 +11,66 @@ var o = Symbol("EMIT_SPY_SYMBOL"), s = () => {
 	await e(() => e(n[o], "Should have emitted at least n times.").toHaveLength(r)).toPass();
 	let t = n[o][r - 1];
 	return i && e(t, "Should match expected emit details.").toMatchObject(i), t;
-}, { box: !0 }), l = (e) => e.replace(/\W/g, (e) => e.codePointAt(0)?.toString() || "-"), u = (e) => /* @__PURE__ */ a("div", {
-	style: {
-		width: "max-content",
-		fontFamily: "Arial, sans-serif"
-	},
-	children: [/* @__PURE__ */ a("div", {
-		style: { marginBottom: "2rem" },
-		children: [/* @__PURE__ */ a("h1", {
-			style: {
-				fontSize: "1.25rem",
-				lineHeight: "1.75rem",
-				margin: "0"
-			},
-			children: ["Screenshot test: ", e.name]
-		}), /* @__PURE__ */ a("div", { children: ["Browser: ", e.browserName] })]
-	}), /* @__PURE__ */ a("div", {
+}, { box: !0 }), l = (e) => e.replace(/\W/g, (e) => e.codePointAt(0)?.toString() || "-"), u = (e) => {
+	let t = e.rows.map((e) => d({
+		name: e,
+		type: "row"
+	})), n = e.columns.map((e) => d({
+		name: e,
+		type: "column"
+	}));
+	return /* @__PURE__ */ a("div", {
 		style: {
-			display: "grid",
-			gap: "2rem",
-			gridTemplateRows: "auto",
 			width: "max-content",
-			alignItems: "center",
-			justifyContent: "center",
-			gridTemplateColumns: `auto repeat(${e.columns.length}, 1fr)`,
-			gridTemplateAreas: (() => {
-				let t = [`"blank ${e.columns.map((e) => `column-${l(e)}`).join(" ")}"`];
-				return e.rows.forEach((n) => {
-					t.push(`"row-${l(n)} ${e.columns.map((e) => `${l(n)}-${l(e)}`).join(" ")}"`);
-				}), t.join("\n");
-			})()
+			fontFamily: "Arial, sans-serif"
 		},
-		children: [/* @__PURE__ */ i("div", { style: { gridArea: "blank" } }), e.children]
-	})]
-}), d = (e = {}) => {
-	let t = e.test ?? r;
-	return { executeMatrixScreenshotTest: (r) => {
+		children: [/* @__PURE__ */ a("div", {
+			style: { marginBottom: "2rem" },
+			children: [/* @__PURE__ */ a("h1", {
+				style: {
+					fontSize: "1.25rem",
+					lineHeight: "1.75rem",
+					margin: "0"
+				},
+				children: ["Screenshot test: ", e.name]
+			}), /* @__PURE__ */ a("div", { children: ["Browser: ", e.browserName] })]
+		}), /* @__PURE__ */ a("div", {
+			style: {
+				display: "grid",
+				gap: "2rem",
+				gridTemplateRows: "auto",
+				width: "max-content",
+				alignItems: "center",
+				justifyContent: "center",
+				gridTemplateColumns: `auto repeat(${e.columns.length}, 1fr)`,
+				gridTemplateAreas: (() => {
+					let t = [`"blank ${e.columns.map((e) => `column-${l(e)}`).join(" ")}"`];
+					return e.rows.forEach((n) => {
+						t.push(`"row-${l(n)} ${e.columns.map((e) => `${l(n)}-${l(e)}`).join(" ")}"`);
+					}), t.join("\n");
+				})()
+			},
+			children: [
+				/* @__PURE__ */ i("div", { style: { gridArea: "blank" } }),
+				e.children,
+				...t,
+				...n
+			]
+		})]
+	});
+}, d = (e) => /* @__PURE__ */ i("div", {
+	style: {
+		textAlign: "center",
+		gridArea: `${e.type}-${l(e.name)}`
+	},
+	children: e.name
+}), f = (e, t) => `${l(e)}-${l(t)}`, p = (e = {}) => {
+	let t = e.test ?? r, a = (e) => {
+		e.fastNoIsolation ? s(e) : o(e);
+	}, o = (r) => {
 		t(`${r.name}`, async ({ mount: a, page: o, browserName: s, context: c }) => {
 			t.setTimeout(r.columns.length * r.rows.length * (25 * 1e3));
-			let d = async (t, n, i) => {
+			let l = async (t, n, i) => {
 				await o.getByRole("document").focus(), await o.getByRole("document").hover({
 					position: {
 						x: 0,
@@ -63,15 +84,15 @@ var o = Symbol("EMIT_SPY_SYMBOL"), s = () => {
 					animations: "disabled",
 					...e.defaults?.screenshotOptions,
 					...r.screenshotOptions
-				}), u = await s.boundingBox(), d = `${l(i)}-${l(n)}`;
-				return await e.defaults?.hooks?.afterEach?.(s, o, n, i, r.context), await r.hooks?.afterEach?.(s, o, n, i, r.context), {
-					box: u,
-					id: d,
+				}), l = await s.boundingBox(), u = f(i, n);
+				return await e.defaults?.hooks?.afterEach?.(s, o, n, i, r.context), await r.hooks?.afterEach?.(s, o, n, i, r.context), await s.unmount(), {
+					box: l,
+					id: u,
 					screenshot: c
 				};
-			}, f = /* @__PURE__ */ new Map();
+			}, d = /* @__PURE__ */ new Map();
 			for (let t of r.rows) for (let n of r.columns) {
-				let a = r.component(n, t), o = await d(/* @__PURE__ */ i("div", {
+				let a = r.component(n, t), o = await l(/* @__PURE__ */ i("div", {
 					style: {
 						display: "grid",
 						width: "max-content",
@@ -79,58 +100,69 @@ var o = Symbol("EMIT_SPY_SYMBOL"), s = () => {
 					},
 					children: a
 				}), n, t);
-				f.set(o.id, o);
+				d.set(o.id, o);
 			}
-			let m = "/_playwright-matrix-screenshot", h = (e) => `${m}?id=${e}`;
-			await c.route(`${m}*`, (e, t) => {
+			let p = "/_playwright-matrix-screenshot", m = (e) => `${p}?id=${e}`;
+			await c.route(`${p}*`, (e, t) => {
 				let n = new URL(t.url()).searchParams.get("id") ?? "";
 				return e.fulfill({
 					status: 200,
 					contentType: "image/png",
-					body: f.get(n)?.screenshot
+					body: d.get(n)?.screenshot
 				});
 			});
-			let g = Array.from(f.values()).map(({ box: e, id: t }) => {
+			let h = Array.from(d.values()).map(({ box: e, id: t }) => {
 				let n = () => {};
 				return [new Promise((e) => n = e), /* @__PURE__ */ i("img", {
 					width: e?.width,
 					height: e?.height,
 					style: { gridArea: t },
-					src: h(t),
+					src: m(t),
 					alt: t,
 					onLoad: n
 				})];
-			}), _ = g.map(([, e]) => e), v = g.map(([e]) => e), y = r.rows.map((e) => p({
-				name: e,
-				type: "row"
-			})), b = r.columns.map((e) => p({
-				name: e,
-				type: "column"
-			})), x = await a(u({
+			}), g = h.map(([, e]) => e), _ = h.map(([e]) => e), v = await a(u({
 				columns: r.columns,
 				rows: r.rows,
 				name: r.name,
 				browserName: s,
-				children: [
-					..._,
-					...y,
-					...b
-				]
+				children: g
+			}));
+			await Promise.all(_), await n(() => n(v).toHaveScreenshot(`${r.name}.png`)).toPass();
+			let y = o.unroute(`${p}*`), b = v.unmount();
+			await Promise.all([b, y]);
+		});
+	}, s = (r) => {
+		t(`${r.name}`, async ({ mount: t, browserName: a }) => {
+			let o = [];
+			for (let t of r.rows) for (let n of r.columns) {
+				let a = r.component(n, t), s = r.removePadding ?? e.defaults?.removePadding;
+				o.push(/* @__PURE__ */ i("div", {
+					style: {
+						display: "grid",
+						gridArea: f(t, n),
+						width: "max-content",
+						padding: s ? void 0 : "1rem"
+					},
+					children: a
+				}));
+			}
+			let s = await t(u({
+				columns: r.columns,
+				rows: r.rows,
+				name: r.name,
+				browserName: a,
+				children: o
 			}));
-			await Promise.all(v), await n(() => n(x).toHaveScreenshot(`${r.name}.png`)).toPass(), await o.unroute(`${m}*`);
+			await n(() => n(s).toHaveScreenshot(`${r.name}.png`)).toPass();
 		});
-	} };
-}, f = async (e) => {
+	};
+	return { executeMatrixScreenshotTest: a };
+}, m = async (e) => {
 	await n(e).toBeVisible(), await e.evaluate((e) => {
 		e.style.height = `${e.scrollHeight}px`, e.style.width = `${e.scrollWidth}px`;
 	});
-}, p = (e) => /* @__PURE__ */ i("div", {
-	style: {
-		textAlign: "center",
-		gridArea: `${e.type}-${l(e.name)}`
-	},
-	children: e.name
-}), m = async ({ component: e, page: t, state: n }) => {
+}, h = async ({ component: e, page: t, state: n }) => {
 	if (n === "hover" && await e.hover(), n === "focus-visible" && await t.keyboard.press("Tab"), n === "active") {
 		let n = await e.boundingBox(), r = {
 			x: n.x + n.width / 2,
@@ -140,4 +172,4 @@ var o = Symbol("EMIT_SPY_SYMBOL"), s = () => {
 	}
 };
 //#endregion
-export { o as EMIT_SPY_SYMBOL, f as adjustSizeToAbsolutePosition, s as createEmitSpy, c as expectEmit, m as useFocusStateHooks, d as useMatrixScreenshotTest };
+export { o as EMIT_SPY_SYMBOL, m as adjustSizeToAbsolutePosition, s as createEmitSpy, c as expectEmit, h as useFocusStateHooks, p as useMatrixScreenshotTest };

package/dist/screenshots/ScreenshotMatrix.d.ts

@@ -21,3 +21,8 @@ export type ScreenshotMatrixProps = {
     children: unknown[];
 };
 export declare const ScreenshotMatrix: (props: ScreenshotMatrixProps) => import("vue/jsx-runtime").JSX.Element;
+export declare const GridLabel: (props: {
+    type: "column" | "row";
+    name: string;
+}) => import("vue/jsx-runtime").JSX.Element;
+export declare const getCellId: (row: string, column: string) => string;

package/dist/screenshots/index.d.ts

@@ -6,7 +6,9 @@ import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestO
  */
 export declare const useMatrixScreenshotTest: <TContext extends HookContext = HookContext>(globalOptions?: UseMatrixScreenshotTestOptions<TContext>) => {
     /**
-     * Creates a single matrix screenshot that includes the screenshots for every column-row combination.
+     * Creates a combined matrix screenshot that includes the screenshots for every column-row combination.
+     * Every combination is mounted individually, which allows to perform pointer or keyboard interactions before taking a screenshot.
+     * If the isolation is not necessary, consider enabling `fastNoIsolation` which is way faster.
      */
     executeMatrixScreenshotTest: <TColumn extends string, TRow extends string>(options: MatrixScreenshotTestOptions<TColumn, TRow, TContext>) => void;
 };

package/dist/screenshots/types.d.ts

@@ -6,13 +6,13 @@ export type UseMatrixScreenshotTestOptions<TContext extends HookContext = HookCo
      * Global default options for the matrix screenshot tests.
      * Will be merged with the options passed to a single screenshot test.
      */
-    defaults?: Partial<Pick<MatrixScreenshotTestOptions<string, string, TContext>, "removePadding" | "hooks" | "screenshotOptions">>;
+    defaults?: Partial<Pick<MatrixScreenshotTestOptions<string, string, TContext, boolean>, "removePadding" | "hooks" | "screenshotOptions">>;
     /**
      * Optional custom `test` function to use. Useful when using [fixtures](https://playwright.dev/docs/test-fixtures#creating-a-fixture).
      */
     test?: typeof test;
 };
-export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow extends string = string, TContext extends HookContext = HookContext> = {
+export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow extends string = string, TContext extends HookContext = HookContext, TIsolation extends boolean = boolean> = {
     /**
      * Test name. Will be displayed above the matrix screenshot and be used as filename.
      */
@@ -29,6 +29,14 @@ export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow ex
      * Function that returns the component for the given column and row.
      */
     component: (column: TColumn, row: TRow) => JSX.Element;
+    /**
+     * By default a combined matrix screenshot is created that includes the screenshots for every column-row combination.
+     * Every combination is mounted individually, which allows to perform pointer or keyboard interactions before taking a screenshot.
+     *
+     * If the isolation is not necessary, consider enabling this option which is way faster, as it mounts all combinations together.
+     * On the downside the hooks will not be executed.
+     */
+    fastNoIsolation?: boolean;
     /**
      * Custom hooks/callbacks that can be executed at specific points in time during the matrix screenshot.
      */
@@ -48,7 +56,12 @@ export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow ex
      * Per default `animations` are `disabled`.
      */
     screenshotOptions?: LocatorScreenshotOptions;
-};
+} & (TIsolation extends true ? {
+    fastNoIsolation: true;
+    hooks?: never;
+} : {
+    fastNoIsolation?: false;
+});
 export type ScreenshotTestHooks<TColumn extends string, TRow extends string, TContext extends HookContext = HookContext> = Partial<{
     /**
      * Optional callback to be executed before capturing each individual screenshot (column + row combination).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "1.2.2-dev-20260422105150",
+  "version": "1.3.0-dev-20260429130251",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",