@public-ui/visual-tests 4.0.0-alpha.0 → 4.0.0-alpha.1

package/tests/sample-app.routes.js

@@ -3,537 +3,1256 @@ export const ROUTES = new Map();
 /**
  * Actually we support the following options:
  *
- * 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)
+ * Axe options:
+ * - axe:
+ *   - skip: boolean (Default: false)
+ *   - skipFailures: boolean (Default: false)
  *
+ * 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('handout/basic', {
-	viewportSize: {
-		width: 1920,
-		height: 1280,
+ROUTES.set('abbr/basic', {
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
-	waitForTimeout: 500,
 });
-ROUTES.set('abbr/basic', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('accordion/basic', {
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('accordion/basic', null);
 ROUTES.set('accordion/headlines', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('alert/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('alert/card-msg', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('alert/html', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('avatar/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('badge/basic', null);
-ROUTES.set('badge/button', null);
-ROUTES.set('breadcrumb/basic', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('badge/basic', {
+	snapshot: {
+		skip: true,
 	},
 });
-ROUTES.set('button-group/basic', {
+ROUTES.set('badge/button', {
+	snapshot: {
+		skip: true,
+	},
+});
+ROUTES.set('breadcrumb/basic', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
+	},
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
+		viewportSize: {
+			width: 600,
+			height: 400,
+		},
 	},
 });
 ROUTES.set('button-link/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('button-link/icons', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
 	},
 });
 ROUTES.set('button-link/image', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('button/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('button/icons', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('button/width', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('button/access-key', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('button/baselined', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('button/short-key', {
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 434,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('card/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('combobox/basic', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('combobox/basic?noColumns', {
+	snapshot: {
+		skip: true,
 	},
 });
 ROUTES.set('details/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('drawer/basic?align=left', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+	snapshot: {
+		viewportSize: {
+			width: 600,
+			height: 400,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('drawer/basic?align=top', {
-	viewportSize: {
-		width: 800,
-		height: 600,
+	snapshot: {
+		viewportSize: {
+			width: 600,
+			height: 400,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('drawer/basic?align=right', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('drawer/basic?align=bottom', {
-	viewportSize: {
-		width: 800,
-		height: 600,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('drawer/basic?align=left&closer=true', {
+	snapshot: {
+		viewportSize: {
+			width: 600,
+			height: 400,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('form/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('form/error-list', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 600,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('heading/badge', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
+	},
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('heading/basic', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
+	},
+	snapshot: {
+		viewportSize: {
+			width: 250,
+			height: 300,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
+ROUTES.set('heading/secondary');
 ROUTES.set('heading/paragraph', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
+	},
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('icon/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 60,
+			height: 80,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('image/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-checkbox/basic?noColumns', {
+	axe: {
+		skipFailures: true,
+	},
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-checkbox/button?noColumns', {
+	axe: {
+		skipFailures: true,
+	},
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-checkbox/switch?noColumns', {
+	axe: {
+		skipFailures: true,
+	},
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-color/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-date/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-email/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-file/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-number/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-password/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-password/show-password?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-radio/basic?noColumns', {
+	axe: {
+		skipFailures: true,
+	},
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-radio/horizontal?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-radio/object?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-range/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('input-text/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('indented-text/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
-ROUTES.set('input-checkbox/basic', null);
-ROUTES.set('input-checkbox/button', null);
-ROUTES.set('input-checkbox/switch', null);
-ROUTES.set('input-color/basic', null);
-ROUTES.set('input-date/basic', null);
-ROUTES.set('input-email/basic', null);
-ROUTES.set('input-file/basic', null);
-ROUTES.set('input-number/basic', null);
-ROUTES.set('input-password/basic', null);
-ROUTES.set('input-password/show-password', null);
-ROUTES.set('input-radio/basic', null);
-ROUTES.set('input-radio/horizontal', null);
-ROUTES.set('input-radio/object', null);
-ROUTES.set('input-range/basic', null);
-ROUTES.set('input-text/basic', null);
-ROUTES.set('input-text/focus', null);
 ROUTES.set('kolibri/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('link-button/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
-ROUTES.set('link-group/basic', {
-	axe: {
-		skipFailures: false,
-	},
-});
-ROUTES.set('link-group/horizontal', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
 	},
 });
 ROUTES.set('link/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('link/icons', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
 	},
 });
 ROUTES.set('link/image', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('link/target', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
 	},
 });
 ROUTES.set('modal/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('modal/basic?show-modal=true', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+	snapshot: {
+		viewportSize: {
+			width: 1920,
+			height: 600,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-
 ROUTES.set('nav/aria-current', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('nav/basic', null);
-ROUTES.set('nav/horizontal', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('nav/basic', {
+	snapshot: {
+		viewportSize: {
+			width: 400,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('pagination/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('progress/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('quote/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
 	},
 });
 ROUTES.set('quote/block', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('select/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('select/basic', null);
 ROUTES.set('skip-nav/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('spin/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 100,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('single-select/basic', {
+ROUTES.set('single-select/basic?noColumns', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
+	},
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('spin/custom', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 100,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('spin/cycle', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 100,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('split-button/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('table/horizontal-scrollbar', {
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 800,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/column-alignment', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 400,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/sort-data', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 400,
+		},
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/with-footer', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 360,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/with-pagination', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 740,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/pagination-position', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 400,
+		},
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/complex-headers', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 400,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('table/non-hidable-columns', {
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 235,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/stateful-with-selection', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 509,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/stateful-with-single-selection', {
-	axe: {
-		skipFailures: false,
-	},
-});
-ROUTES.set('table/stateless-with-single-selection', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 370,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
 ROUTES.set('table/stateless-with-selection', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 495,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('table/stateless', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('table/stateless-with-single-selection', {
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 370,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('tabs/basic', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('table/stateless', {
+	snapshot: {
+		viewportSize: {
+			width: 800,
+			height: 400,
+		},
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('tabs/icons-only', {
+ROUTES.set('table/sticky-header', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
 	},
-});
-ROUTES.set('textarea/adjust-height', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		viewportSize: {
+			width: 1300,
+			height: 1000,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('textarea/basic', null);
-ROUTES.set('textarea/resize', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('tabs/basic', {
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('textarea/rows', {
+ROUTES.set('tabs/create-button', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
 	},
-});
-ROUTES.set('textarea/with-counter', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic', {
-	axe: {
-		skipFailures: false,
+ROUTES.set('tabs/icons-only', {
+	snapshot: {
+		viewportSize: {
+			width: 200,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=info', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('textarea/adjust-height', {
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=success', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('textarea/basic?noColumns', {
+	snapshot: {
+		viewportSize: {
+			width: 500,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=warning', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('textarea/resize', {
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=error', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('textarea/rows', {
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?variant=msg', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('textarea/with-counter', {
+	snapshot: {
+		viewportSize: {
+			width: 200,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('toast/configurator', {
+	snapshot: {
+		viewportSize: {
+			width: 600,
+			height: 750,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?variant=card', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('toolbar/basic', {
+	snapshot: {
+		viewportSize: {
+			width: 600,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-
-ROUTES.set('toast/basic?type=default&variant=msg', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('toolbar/disabled', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=info&variant=msg', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('tree/basic/home', {
+	axe: {
+		skipFailures: true,
 	},
-});
-ROUTES.set('toast/basic?type=success&variant=msg', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=warning&variant=msg', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('version/basic', {
+	snapshot: {
+		viewportSize: {
+			width: 150,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('toast/basic?type=error&variant=msg', {
-	viewportSize: {
-		width: 1920,
-		height: 600,
+ROUTES.set('version/context', {
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-
-ROUTES.set('toolbar/basic', {
+ROUTES.set('scenarios/static-form', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
 	},
-});
-ROUTES.set('toolbar/disabled', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('tree/basic/home', {
+ROUTES.set('scenarios/sample-form-with-validation', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
 	},
-});
-ROUTES.set('version/basic', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('version/context', {
+ROUTES.set('scenarios/disabled-interactive-scenario', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
 	},
-});
-ROUTES.set('scenarios/appointment-form', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
-ROUTES.set('scenarios/static-form', {
+ROUTES.set('scenarios/same-height-of-all-interactive-elements', {
 	axe: {
-		skipFailures: false,
+		skipFailures: true,
 	},
-});
-ROUTES.set('scenarios/disabled-interactive-scenario', {
-	axe: {
-		skipFailures: false,
+	snapshot: {
+		skip: true,
+		zoom: {
+			skip: true,
+		},
 	},
 });
 
 /* Focus tests */
-ROUTES.set('scenarios/focus-elements?component=accordion');
-ROUTES.set('scenarios/focus-elements?component=button');
-ROUTES.set('scenarios/focus-elements?component=buttonLink');
-ROUTES.set('scenarios/focus-elements?component=combobox');
-ROUTES.set('scenarios/focus-elements?component=details');
-ROUTES.set('scenarios/focus-elements?component=inputCheckbox');
-ROUTES.set('scenarios/focus-elements?component=inputColor');
-ROUTES.set('scenarios/focus-elements?component=inputDate');
-ROUTES.set('scenarios/focus-elements?component=inputEmail');
-ROUTES.set('scenarios/focus-elements?component=inputFile');
-ROUTES.set('scenarios/focus-elements?component=inputFileMultiple');
-ROUTES.set('scenarios/focus-elements?component=inputNumber');
-ROUTES.set('scenarios/focus-elements?component=inputPassword');
-ROUTES.set('scenarios/focus-elements?component=inputRadio');
-ROUTES.set('scenarios/focus-elements?component=inputRange');
-ROUTES.set('scenarios/focus-elements?component=inputText');
-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');
-ROUTES.set('scenarios/focus-elements?component=textarea');
+ROUTES.set('scenarios/focus-elements?component=accordion', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=button', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=buttonLink', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=combobox', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=details', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputCheckbox', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputColor', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputDate', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputEmail', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputFile', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputFileMultiple', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputNumber', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputPassword', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputRadio', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputRange', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=inputText', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=link', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=linkButton', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=select', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=selectMultiple', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=singleSelect', {
+	axe: {
+		skipFailures: true,
+	},
+	viewportSize: {
+		width: 300,
+		height: 100,
+	},
+	zoom: {
+		skip: true,
+	},
+});
+ROUTES.set('scenarios/focus-elements?component=textarea', {
+	snapshot: {
+		viewportSize: {
+			width: 300,
+			height: 100,
+		},
+		zoom: {
+			skip: true,
+		},
+	},
+});