@public-ui/visual-tests 2.2.11-rc.1 → 3.0.0-023e727fba43bcd74fd9f7ce52558eee4a3aa906.0

package/README.md

@@ -48,8 +48,12 @@ Add the following npm scripts to the theme's `package.json`:
 }
 ```
 
-- `THEME_MODULE` defines the relative path to the TypeScript module containing the the theme definitions. Without file extension.
-- `THEME_EXPERT` defines the name of the export within the the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
+### Environment variables
+
+- `THEME_MODULE`: Define the relative path to the TypeScript module containing the theme definitions. Without file extension.
+- `THEME_EXPERT`: Define the name of the export within the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
+- `KOLIBRI_VISUAL_TESTS_TIMEOUT`: Define the Playwright [test timeout](https://playwright.dev/docs/test-timeouts).
+- `KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT`: Define the Playwright [expect timeout](https://playwright.dev/docs/test-timeouts).
 
 Run the tests with `npm test`. The first time, this will create a new folder `snapshots` which is supposed to be committed to the repository.
 In the following runs, new screenshots will be compared to this reference.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "2.2.11-rc.1",
+  "version": "3.0.0-023e727fba43bcd74fd9f7ce52558eee4a3aa906.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -29,7 +29,7 @@
     "axe-playwright": "2.1.0",
     "portfinder": "1.0.35",
     "serve": "14.2.4",
-    "@public-ui/sample-react": "2.2.11-rc.1"
+    "@public-ui/sample-react": "3.0.0-023e727fba43bcd74fd9f7ce52558eee4a3aa906.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.26.10",

package/tests/{axe-snapshots.spec.js → axe-snapshots.spec.js.bak}

@@ -36,31 +36,21 @@ test.use({
 	},
 });
 
+const blocklist = [];
+
 ROUTES.forEach((options, route) => {
-	// Skip unnecessary axe tests
-	if (options?.axe?.skip === true) {
+	if (blocklist.includes(route)) {
 		return;
 	}
 	test(`snapshot for ${route}`, async ({ page }, testInfo) => {
 		const outputPath = rename(testInfo.outputDir);
-		const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
-		await page.goto(`/#${route}${hideMenusParam}`);
-		await page.waitForLoadState('networkidle');
-		await page.addStyleTag({
-			content: `
-				* {
-					transition: none !important;
-					animation: none !important;
-				}
-			`,
-		});
-		if (options?.snapshot?.viewportSize) {
-			await page.setViewportSize(options?.snapshot?.viewportSize);
+		await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
+		if (options?.viewportSize) {
+			await page.setViewportSize(options.viewportSize);
 		}
-		if (options?.snapshot?.waitForTimeout) {
-			await page.waitForTimeout(options?.snapshot?.waitForTimeout);
+		if (options?.waitForTimeout) {
+			await page.waitForTimeout(options.waitForTimeout);
 		}
-
 		await injectAxe(page);
 		await checkA11y(
 			page,
@@ -77,7 +67,7 @@ ROUTES.forEach((options, route) => {
 					html: true,
 				},
 			},
-			options?.axe?.skipFailures ?? false,
+			options?.axe?.skipFailures ?? true,
 			'html',
 			{
 				outputDirPath: outputPath.replace(/\/[^/]+$/, ''),

package/tests/sample-app.routes.js

@@ -3,279 +3,491 @@ export const ROUTES = new Map();
 /**
  * Actually we support the following options:
  *
- * Axe options:
- * - axe:
- *   - skip: boolean (Default: false)
- *   - skipFailures: boolean (Default: false)
+ * Details: https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1
+ * - fullPage: boolean (Default: true)
+ * - maxDiffPixelRatio: number (Default: undefined)
+ * - maxDiffPixels: number (Default: undefined)
+ * - threshold: number (Default: undefined)
+ * - timeout: number (Default: 0)
+ *
+ * To set the viewport size, use the following options:
+ * - viewportSize: { width, height } (Default: 800x600)
  *
- * Snapshot options:
- * - snapshot:
- *   - options:
- *     - maxDiffPixelRatio: number (Default: 0)
- *   - skip: boolean (Default: false)
- *   - viewportSize:
- *     - width (Default: 800)
- *     - height (Default: 600)
- *   - waitForTimeout: number (Default: 15000)
- *   - zoom:
- *     - options:
- *       - maxDiffPixelRatio: number (Default: 0)
- *     - skip: boolean (Default: false)
  */
 
-ROUTES.set('abbr/basic');
-ROUTES.set('accordion/basic');
-ROUTES.set('accordion/headlines');
-ROUTES.set('alert/basic');
-ROUTES.set('alert/card-msg');
-ROUTES.set('alert/html');
-ROUTES.set('avatar/basic');
-ROUTES.set('badge/basic');
-ROUTES.set('badge/button');
-ROUTES.set('breadcrumb/basic');
-ROUTES.set('button-group/basic');
-ROUTES.set('button-link/basic');
-ROUTES.set('button-link/icons');
-ROUTES.set('button-link/image');
-ROUTES.set('button/basic');
-ROUTES.set('button/icons');
-ROUTES.set('button/width');
-ROUTES.set('button/access-key');
-ROUTES.set('button/baselined');
-ROUTES.set('button/short-key');
-ROUTES.set('card/basic');
-ROUTES.set('combobox/basic');
-ROUTES.set('details/basic');
+ROUTES.set('abbr/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('accordion/basic', null);
+ROUTES.set('accordion/headlines', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('alert/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('alert/card-msg', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('alert/html', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('avatar/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('badge/basic', null);
+ROUTES.set('badge/button', null);
+ROUTES.set('breadcrumb/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-link/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-link/icons', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-link/image', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/icons', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/width', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/access-key', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/baselined', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/short-key', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('card/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('combobox/basic?noColumns', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('details/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('drawer/basic?align=left', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('drawer/basic?align=top', {
-	snapshot: {
-		viewportSize: {
-			width: 800,
-			height: 600,
-		},
+	viewportSize: {
+		width: 800,
+		height: 600,
 	},
 });
 ROUTES.set('drawer/basic?align=right', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('drawer/basic?align=bottom', {
-	snapshot: {
-		viewportSize: {
-			width: 800,
-			height: 600,
-		},
-	},
-});
-ROUTES.set('form/basic');
-ROUTES.set('form/error-list');
-ROUTES.set('heading/badge');
-ROUTES.set('heading/basic');
-ROUTES.set('heading/paragraph');
-ROUTES.set('icon/basic');
-ROUTES.set('image/basic');
-ROUTES.set('indented-text/basic');
-ROUTES.set('input-checkbox/basic');
-ROUTES.set('input-checkbox/button');
-ROUTES.set('input-checkbox/switch');
-ROUTES.set('input-color/basic');
-ROUTES.set('input-date/basic');
-ROUTES.set('input-email/basic');
-ROUTES.set('input-file/basic');
-ROUTES.set('input-number/basic');
-ROUTES.set('input-password/basic');
-ROUTES.set('input-password/show-password');
-ROUTES.set('input-radio/basic');
-ROUTES.set('input-radio/horizontal');
-ROUTES.set('input-radio/object');
-ROUTES.set('input-range/basic');
-ROUTES.set('input-text/basic', {
-	axe: {
-		skipFailures: true,
-	},
-});
-ROUTES.set('input-text/focus');
-ROUTES.set('kolibri/basic');
-ROUTES.set('link-button/basic');
-ROUTES.set('link-group/basic');
-ROUTES.set('link-group/horizontal');
-ROUTES.set('link/basic');
-ROUTES.set('link/icons');
-ROUTES.set('link/image');
-ROUTES.set('link/target');
-ROUTES.set('modal/basic');
+	viewportSize: {
+		width: 800,
+		height: 600,
+	},
+});
+ROUTES.set('form/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('form/error-list', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('heading/badge', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('heading/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('heading/paragraph', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('icon/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('image/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('input-checkbox/basic?noColumns', null);
+ROUTES.set('input-checkbox/button?noColumns', null);
+ROUTES.set('input-checkbox/switch?noColumns', null);
+ROUTES.set('input-color/basic?noColumns', null);
+ROUTES.set('input-date/basic?noColumns', null);
+ROUTES.set('input-email/basic?noColumns', null);
+ROUTES.set('input-file/basic?noColumns', null);
+ROUTES.set('input-number/basic?noColumns', null);
+ROUTES.set('input-password/basic?noColumns', null);
+ROUTES.set('input-password/show-password?noColumns', null);
+ROUTES.set('input-radio/basic?noColumns', null);
+ROUTES.set('input-radio/horizontal?noColumns', null);
+ROUTES.set('input-radio/object?noColumns', null);
+ROUTES.set('input-range/basic?noColumns', null);
+ROUTES.set('input-text/basic?noColumns', null);
+ROUTES.set('kolibri/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link-button/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/icons', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/image', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/target', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('modal/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('modal/basic?show-modal=true', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
+	},
+});
+ROUTES.set('modal/basic?show-modal=true&variant=card', {
+	viewportSize: {
+		width: 1920,
+		height: 600,
+	},
+});
+ROUTES.set('nav/aria-current', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('nav/basic', null);
+ROUTES.set('nav/horizontal', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('pagination/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('progress/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('quote/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('quote/block', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('select/basic?noColumns', null);
+ROUTES.set('skip-nav/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('spin/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('single-select/basic?noColumns', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('spin/custom', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('spin/cycle', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('split-button/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/column-alignment', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/sort-data', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/with-footer', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/with-pagination', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/pagination-position', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/complex-headers', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateful-with-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateful-with-single-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateless-with-single-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateless-with-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateless', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('tabs/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('tabs/icons-only', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/adjust-height', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/basic?noColumns', null);
+ROUTES.set('textarea/resize', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/rows', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/with-counter', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('toast/basic', {
+	axe: {
+		skipFailures: false,
 	},
 });
-
-ROUTES.set('nav/aria-current');
-ROUTES.set('nav/basic');
-ROUTES.set('nav/horizontal');
-ROUTES.set('pagination/basic');
-ROUTES.set('progress/basic');
-ROUTES.set('quote/basic');
-ROUTES.set('quote/block');
-ROUTES.set('select/basic');
-ROUTES.set('skip-nav/basic');
-ROUTES.set('spin/basic');
-ROUTES.set('single-select/basic', {
-	axe: {
-		skipFailures: true,
-	},
-});
-ROUTES.set('spin/custom');
-ROUTES.set('spin/cycle');
-ROUTES.set('split-button/basic');
-ROUTES.set('table/column-alignment');
-ROUTES.set('table/sort-data');
-ROUTES.set('table/with-footer');
-ROUTES.set('table/with-pagination');
-ROUTES.set('table/pagination-position');
-ROUTES.set('table/complex-headers');
-ROUTES.set('table/stateful-with-selection');
-ROUTES.set('table/stateful-with-single-selection');
-ROUTES.set('table/stateless-with-single-selection');
-ROUTES.set('table/stateless-with-selection');
-ROUTES.set('table/stateless');
-ROUTES.set('tabs/basic');
-ROUTES.set('tabs/icons-only');
-ROUTES.set('textarea/adjust-height');
-ROUTES.set('textarea/basic');
-ROUTES.set('textarea/resize');
-ROUTES.set('textarea/rows');
-ROUTES.set('textarea/with-counter');
-ROUTES.set('toast/basic');
 ROUTES.set('toast/basic?type=info', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=success', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=warning', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=error', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?variant=msg', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?variant=card', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 
 ROUTES.set('toast/basic?type=default&variant=msg', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=info&variant=msg', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=success&variant=msg', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=warning&variant=msg', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 ROUTES.set('toast/basic?type=error&variant=msg', {
-	snapshot: {
-		viewportSize: {
-			width: 1920,
-			height: 600,
-		},
+	viewportSize: {
+		width: 1920,
+		height: 600,
 	},
 });
 
-ROUTES.set('toolbar/basic');
-ROUTES.set('toolbar/disabled');
+ROUTES.set('toolbar/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('toolbar/disabled', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('tree/basic/home', {
 	axe: {
-		skipFailures: true,
+		skipFailures: false,
 	},
 });
-ROUTES.set('version/basic');
-ROUTES.set('version/context');
-ROUTES.set('scenarios/appointment-form');
-ROUTES.set('scenarios/static-form', {
+ROUTES.set('version/basic', {
 	axe: {
-		skipFailures: true,
+		skipFailures: false,
 	},
 });
-ROUTES.set('scenarios/disabled-interactive-scenario');
-ROUTES.set('scenarios/same-height-of-all-interactive-elements', {
+ROUTES.set('version/context', {
 	axe: {
-		skipFailures: true,
+		skipFailures: false,
 	},
-	snapshot: {
-		viewportSize: {
-			width: 4000,
-			height: 0,
-		},
+});
+ROUTES.set('scenarios/static-form', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('scenarios/disabled-interactive-scenario', {
+	axe: {
+		skipFailures: false,
 	},
 });
 
@@ -300,9 +512,5 @@ ROUTES.set('scenarios/focus-elements?component=link');
 ROUTES.set('scenarios/focus-elements?component=linkButton');
 ROUTES.set('scenarios/focus-elements?component=select');
 ROUTES.set('scenarios/focus-elements?component=selectMultiple');
-ROUTES.set('scenarios/focus-elements?component=singleSelect', {
-	axe: {
-		skipFailures: true,
-	},
-});
+ROUTES.set('scenarios/focus-elements?component=singleSelect');
 ROUTES.set('scenarios/focus-elements?component=textarea');

package/tests/theme-snapshots.spec.js

@@ -18,13 +18,10 @@ const DEFAULT_SNAPSHOT_OPTIONS = {
 	fullPage: true,
 	maxDiffPixelRatio: 0,
 	scale: 'css', // 'css' or 'device'
+	timeout: 10000,
 };
 
 ROUTES.forEach((options, route) => {
-	// Skip unnecessary snapshot tests
-	if (options?.snapshot?.skip === true && options?.snapshot?.zoom?.skip === true) {
-		return;
-	}
 	test(`snapshot for ${route}`, async ({ page }) => {
 		const hideMenusParam = `${route.includes('?') ? '&' : '?'}hideMenus`;
 		await page.goto(`/#${route}${hideMenusParam}`);
@@ -37,11 +34,11 @@ ROUTES.forEach((options, route) => {
 				}
 			`,
 		});
-		if (options?.snapshot?.viewportSize) {
-			await page.setViewportSize(options?.snapshot?.viewportSize);
+		if (options?.viewportSize) {
+			await page.setViewportSize(options.viewportSize);
 		}
-		if (options?.snapshot?.waitForTimeout) {
-			await page.waitForTimeout(options?.snapshot?.waitForTimeout);
+		if (options?.waitForTimeout) {
+			await page.waitForTimeout(options.waitForTimeout);
 		}
 
 		/**
@@ -49,29 +46,20 @@ ROUTES.forEach((options, route) => {
 		 */
 		const snapshotName = `snapshot-for-${route.replace(/(\/|\?|&|=)/g, '-')}`;
 
-		const SNAPSHOT_OPTIONS = {
+		await expect(page).toHaveScreenshot(`${snapshotName}.png`, {
 			...DEFAULT_SNAPSHOT_OPTIONS,
-			...options?.snapshot?.options,
-		};
-
-		// Skip unnecessary normal tests
-		if (options?.snapshot?.skip !== true) {
-			await expect(page).toHaveScreenshot(`${snapshotName}.png`, SNAPSHOT_OPTIONS);
-		}
-
-		// Skip unnecessary zoom tests
-		if (options?.snapshot?.zoom?.skip !== true) {
-			await page.evaluate(() => {
-				// eslint-disable-next-line no-undef
-				document.body.style.zoom = '400%';
-				// document.body.style.transform = 'scale(4)';
-				// document.body.style.transformOrigin = 'top left';
-				// document.body.style.width = '25vw';
-			});
-			await expect(page).toHaveScreenshot(`${snapshotName}-zoom.png`, {
-				...SNAPSHOT_OPTIONS,
-				...options?.snapshot?.zoom?.options,
-			});
-		}
+			...options,
+		});
+		await page.evaluate(() => {
+			// eslint-disable-next-line no-undef
+			document.body.style.zoom = '400%';
+			// document.body.style.transform = 'scale(4)';
+			// document.body.style.transformOrigin = 'top left';
+			// document.body.style.width = '25vw';
+		});
+		await expect(page).toHaveScreenshot(`${snapshotName}-zoom.png`, {
+			...DEFAULT_SNAPSHOT_OPTIONS,
+			...options,
+		});
 	});
 });