@krizaka/page-audit 0.3.1 → 0.5.0

package/README.md

@@ -24,7 +24,8 @@ before anything is measured (yomizaka#354). `prepare(page, route)` signs in or s
 Opt-in through `checks` (nothing changes for a repo that does not ask): `status` (HTTP 4xx/5xx or no response), `emptyMain`, `frame`
 (the signed-in frame, `[data-app-frame-slot]`, forces a scroll), `minAction` (a button-styled action under N px), `boxes` (a landmark
 wider than its box), `landmarks` (`"public"` one footer naming Krizaka and a nav, `"app"`, `"auth"`), `pictures`, `emptyControls`,
-`hardColors`. Console noise the app tolerates: `ignoreConsole: [/…/]` (`[]` counts every error); `attempts` retries a route.
+`hardColors`, `maps` (an empty map, akinaza#488: a GL / Leaflet / `[data-kz-map]` box under 120 px on a side, a GL map with no canvas,
+a Leaflet map with no loaded tile; `maps: { required: true }` also fails a page that should draw one but has none). Console noise the app tolerates: `ignoreConsole: [/…/]` (`[]` counts every error); `attempts` retries a route.
 
 ```js
 const routes = await routesFromSitemap(base, { first: ["/", "/docs"], limit: 14 }); // a crawl as the route source (null: nothing answers)
@@ -39,3 +40,26 @@ await auditRoutes({
 
 `a11y` runs axe through `@krizaka/a11y-audit` (an optional peer) and ratchets with the repo's own baseline file; `--a11y-update` and
 `--a11y-init` work as there. The CLI takes `--sitemap`, `--status`, `--empty-main`, `--min-action`, `--a11y app:baseline.json`.
+
+## Visual regression of the journeys (0.4)
+
+`@krizaka/page-audit/visual` (krizaka/.github#375) compares screenshots of an app's main journeys against Linux baselines, with `@playwright/test`
+as the runner. It freezes what moves (clock, motion, caret, View Transition, locale, time zone, fonts) and leaves the app its routes, its persona and its masks.
+
+```js
+import { test, expect } from "@playwright/test";
+import { defineJourneyTests } from "@krizaka/page-audit/visual";
+defineJourneyTests({
+  test, expect,
+  signIn: async (page) => { /* the seeded persona signs in through the form */ },
+  journeys: [
+    { name: "landing", path: "/fr" },
+    { name: "home", path: "/fr/app", session: true, mask: ["[data-live]"] },
+    { name: "home", path: "/fr/app", session: true, firstPaint: true, viewports: ["phone"] },          // the HTML the server sent
+    { name: "home", path: "/fr/app", session: true, firstPaint: { hold: ["**/api/me"] } },             // hydrated, account query pending
+  ],
+});
+```
+
+Baselines are taken in the official Playwright container by the shared workflows of krizaka/.github (`visual-regression.yml` to compare,
+`update-visual-baselines.yml` to commit them on a branch); never on a Mac.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/page-audit",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "The page audit of every Krizaka app, in one place: HTTP status, empty main, horizontal overflow, a card out of its panel, sections covering each other, a column cut off, top chrome overlaps, unnamed buttons, empty headings. Runs in a real browser (Playwright) over a route list, viewports and themes, with View Transitions neutralised and a self-test on its own fixtures.",
   "keywords": [
     "krizaka",
@@ -34,7 +34,11 @@
       "import": "./src/settle.mjs"
     },
     "./fixtures": "./src/fixtures.mjs",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./visual": {
+      "types": "./src/visual.d.ts",
+      "import": "./src/visual.mjs"
+    }
   },
   "files": [
     "src",

package/src/fixtures.mjs

@@ -48,3 +48,12 @@ export const CHROME_BAD = `<!doctype html><html><body><main><p>Hello</p></main><
 export const TOKEN_IN_STRETCHED_ROW = page(`<table style="width:600px"><tbody><tr><td>orazaka-media-pack</td><td>${"A long description. ".repeat(30)}</td></tr></tbody></table>`);
 /** An identifier in a narrow cell that breaks every few characters. */
 export const TOKEN_WRAPPED = page(`<table style="width:100px;table-layout:fixed"><tbody><tr><td style="word-break:break-all;font-size:20px">abcdefghijklmnopqrstuvwxyz0123456789</td></tr></tbody></table>`);
+
+/** A map that laid out at 0 px: `absolute inset-0` in a frame with no height of its own (akinaza#488). */
+export const MAP_COLLAPSED = page(`<section><div style="position:relative"><div class="maplibregl-map" style="position:absolute;inset:0"><canvas width="0" height="0"></canvas></div></div></section>`);
+/** A map box with a size and a canvas, and a Leaflet one with a loaded tile. */
+export const MAP_FINE = page(`<section><div class="maplibregl-map" style="height:300px;width:600px"><canvas style="width:600px;height:300px" width="600" height="300"></canvas></div><div class="leaflet-container" style="height:300px;width:600px"><img class="leaflet-tile-loaded" alt="" width="256" height="256"></div></section>`);
+/** A GL map box of a good size where nothing was drawn (no canvas). */
+export const MAP_NO_CANVAS = page(`<section><div class="maplibregl-map" style="height:300px;width:600px"></div></section>`);
+/** A map that is not drawn (display none: a closed tab, a small screen): nothing to measure. */
+export const MAP_HIDDEN = page(`<section><div class="maplibregl-map" style="display:none"></div></section>`);

package/src/index.d.ts

@@ -9,6 +9,8 @@ export interface ProblemChecks {
   /** HTTP status of the load (`null`: no response); a 4xx/5xx is a problem. */
   status?: number | null;
   emptyMain?: boolean; frame?: boolean; minAction?: number; boxes?: boolean; landmarks?: Chrome; pictures?: boolean; emptyControls?: boolean; hardColors?: boolean;
+  /** Empty maps (a GL / Leaflet / `[data-kz-map]` box under 120 px, no canvas, no loaded tile); `{ min, required }` to tune, `required` fails a page with no map. */
+  maps?: boolean | { min?: number; required?: boolean };
 }
 export function problemsOf(where: string, result: Record<string, unknown>, checks?: ProblemChecks): string[];
 export function auditOptions<T extends object>(options?: T): T & { reducedMotion: "reduce" };

package/src/page-audit.mjs

@@ -261,6 +261,21 @@ function hardColorsOf() {
   return [...document.querySelectorAll("[style]")].filter((e) => /#[0-9a-f]{3,8}\b|rgba?\(/i.test(e.getAttribute("style") || "") && !/var\(/.test(e.getAttribute("style") || "")).length;
 }
 
+/**
+ * The live maps of the page (maplibre / mapbox GL, Leaflet, or anything marked `[data-kz-map]`): a map is a box with a size and something drawn in it.
+ * One that lays out at 0 px (an `absolute inset-0` map in a frame with no height of its own) overflows nothing, so no other probe sees it.
+ * GL maps are told by their canvas; Leaflet by its loaded tiles. A map with no client rect (`display: none`, a closed tab) is not drawn, so not measured.
+ */
+function mapsOf() {
+  return [...document.querySelectorAll(".maplibregl-map, .mapboxgl-map, .leaflet-container, [data-kz-map]")]
+    .filter((el) => el.getClientRects().length > 0 && !el.closest(ARIA_HIDDEN) && !folded(el) && !el.parentElement?.closest(".maplibregl-map, .mapboxgl-map, .leaflet-container, [data-kz-map]"))
+    .map((el) => {
+      const box = el.getBoundingClientRect();
+      const canvas = el.querySelector("canvas")?.getBoundingClientRect();
+      return { name: nameOf(el), width: Math.round(box.width), height: Math.round(box.height), canvas: !!canvas && canvas.width > 0 && canvas.height > 0, leaflet: el.classList.contains("leaflet-container"), tiles: el.querySelectorAll(".leaflet-tile-loaded").length };
+    });
+}
+
 function measurePage() {
   const doc = document.documentElement;
   const panels = [...document.querySelectorAll("[data-panel], main section, main [role=region]")].filter((el) => !el.closest(ARIA_HIDDEN) && !folded(el));
@@ -290,11 +305,12 @@ function measurePage() {
     brokenPictures: brokenPicturesOf(),
     emptyControls: emptyControlsOf(),
     hardColors: hardColorsOf(),
+    maps: mapsOf(),
     segmentError: !!document.querySelector('[data-testid="segment-error"]'),
   };
 }
 
-const PROBES = [tooTall, wrappedOf, className, nameOf, scrolls, meets, apart, clipped, wideOf, named, unnamedOf, headerActionOf, folded, keptBetween, notDrawn, runsOut, spillOf, overlapsOf, cutBy, cutColumnsOf, topBoxOf, isTopBar, chromeOverlapsOf, clipsOf, emptyHeadingsOf, unlabelledFilesOf, emptyMainOf, actionsOf, frameOf, boxesOf, landmarksOf, brokenPicturesOf, emptyControlsOf, hardColorsOf, measurePage];
+const PROBES = [tooTall, wrappedOf, className, nameOf, scrolls, meets, apart, clipped, wideOf, named, unnamedOf, headerActionOf, folded, keptBetween, notDrawn, runsOut, spillOf, overlapsOf, cutBy, cutColumnsOf, topBoxOf, isTopBar, chromeOverlapsOf, clipsOf, emptyHeadingsOf, unlabelledFilesOf, emptyMainOf, actionsOf, frameOf, boxesOf, landmarksOf, brokenPicturesOf, emptyControlsOf, hardColorsOf, mapsOf, measurePage];
 
 /** The expression Playwright runs in the page (`page.evaluate(auditPage)`): the probes, serialised together, then the measure. */
 export const auditPage = `(() => {\nconst ARIA_HIDDEN = ${JSON.stringify(ARIA_HIDDEN)};\n${PROBES.map((f) => `const ${f.name} = ${f.toString()};`).join("\n")}\nreturn measurePage();\n})()`;
@@ -311,7 +327,7 @@ function accessibilityProblems(where, result, fileLabels) {
   return problems;
 }
 
-export function problemsOf(where, result, { errors = [], h1 = false, headerAction = false, fileLabels = false, status, emptyMain = false, frame = false, minAction, boxes = false, landmarks, pictures = false, emptyControls = false, hardColors = false } = {}) {
+export function problemsOf(where, result, { errors = [], h1 = false, headerAction = false, fileLabels = false, status, emptyMain = false, frame = false, minAction, boxes = false, landmarks, pictures = false, emptyControls = false, hardColors = false, maps = false } = {}) {
   return [
     ...statusProblems(where, status),
     ...(emptyMain && result.emptyMain ? [`${where}: empty <main>`] : []),
@@ -322,6 +338,7 @@ export function problemsOf(where, result, { errors = [], h1 = false, headerActio
     ...(pictures && result.brokenPictures?.length ? [`${where}: broken picture ${result.brokenPictures.join(", ")}`] : []),
     ...(emptyControls ? (result.emptyControls ?? []).map((c) => `${where}: ${c}`) : []),
     ...(hardColors && result.hardColors ? [`${where}: ${result.hardColors} element(s) with a hard-coded colour in an inline style`] : []),
+    ...(maps ? mapProblems(where, result.maps ?? [], maps) : []),
     ...errorsOf(where, errors),
     ...layoutProblems(where, result),
     ...(h1 ? namingProblems(where, result) : []),
@@ -331,6 +348,24 @@ export function problemsOf(where, result, { errors = [], h1 = false, headerActio
   ];
 }
 
+/** The smallest side (px) of a map worth the name. */
+export const MIN_MAP_SIDE = 120;
+
+/**
+ * An empty map (akinaza#488): a box under `min` px on a side, a GL map with no canvas, a Leaflet map with no loaded tile.
+ * `maps` is `true` (the default minimum) or `{ min, required }`; with `required`, a page that was expected to draw a map and has none is a problem too.
+ */
+function mapProblems(where, found, option) {
+  const { min = MIN_MAP_SIDE, required = false } = option === true ? {} : option;
+  if (!found.length) return required ? [`${where}: no map on the page`] : [];
+  const out = [];
+  for (const m of found) {
+    if (m.width < min || m.height < min) out.push(`${where}: the map ${m.name} is ${m.width}x${m.height} px (empty)`);
+    else if (m.leaflet ? m.tiles === 0 : !m.canvas) out.push(`${where}: the map ${m.name} ${m.leaflet ? "has no loaded tile" : "has no canvas"}`);
+  }
+  return out;
+}
+
 function errorsOf(where, errors) {
   return errors.length ? [`${where}: console error — ${errors[0]}`] : [];
 }

package/src/self-test.mjs

@@ -1,6 +1,6 @@
 // The audit proven on its own fixtures, in a real browser: each broken fixture must be reported, the fine ones must not.
 // A guard that stopped seeing is itself a red build.
-import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, SECTIONS_OVERLAP, SMALL_ACTION, TOKEN_IN_STRETCHED_ROW, TOKEN_WRAPPED } from "./fixtures.mjs";
+import { BOX_TOO_WIDE, BROKEN_PARTS, CARD_OVER_NEXT, CHROME_BAD, CHROME_FINE, COLUMN_CUT, EMPTY_MAIN, FINE, FOLDED_SECTION, FRAME_FITS, FRAME_FORCES_SCROLL, HIDDEN_CONTENT, MAP_COLLAPSED, MAP_FINE, MAP_HIDDEN, MAP_NO_CANVAS, SECTIONS_OVERLAP, SMALL_ACTION, TOKEN_IN_STRETCHED_ROW, TOKEN_WRAPPED } from "./fixtures.mjs";
 import { auditPage, problemsOf } from "./page-audit.mjs";
 import { auditContext } from "./settle.mjs";
 
@@ -17,6 +17,9 @@ const EXPECT = [
   ["a broken picture", BROKEN_PARTS, /broken picture/, { pictures: true }],
   ["a tile that draws nothing", BROKEN_PARTS, /empty tile/, { emptyControls: true }],
   ["a hard-coded inline colour", BROKEN_PARTS, /hard-coded colour/, { hardColors: true }],
+  ["a map that laid out at 0 px", MAP_COLLAPSED, /the map .* is \d+x0 px \(empty\)/, { maps: true }],
+  ["a map with no canvas", MAP_NO_CANVAS, /has no canvas/, { maps: true }],
+  ["no map where one is required", FINE, /no map on the page/, { maps: { required: true } }],
   ["two page footers and no nav", CHROME_BAD, /2 page footers/, { landmarks: "public" }],
   ["no nav landmark", CHROME_BAD, /no <nav> landmark/, { landmarks: "app" }],
 ];
@@ -27,10 +30,12 @@ const FINES = [
   ["a short token in a row a taller neighbour stretches", TOKEN_IN_STRETCHED_ROW],
 ];
 /** Fixtures that must stay clean even with every opt-in check on. */
-const ALL = { emptyMain: true, frame: true, minAction: 36, boxes: true, pictures: true, emptyControls: true, hardColors: true, landmarks: "public" };
+const ALL = { emptyMain: true, frame: true, minAction: 36, boxes: true, pictures: true, emptyControls: true, hardColors: true, landmarks: "public", maps: true };
 const FINES_STRICT = [
   ["a frame that fits its screen", FRAME_FITS, { frame: true, emptyMain: false }],
   ["the family chrome", CHROME_FINE, ALL],
+  ["maps with a size and something drawn", MAP_FINE, { maps: true }],
+  ["a map that is not drawn (display none)", MAP_HIDDEN, { maps: true }],
 ];
 
 async function problemsOn(page, html, checks) {

package/src/visual.d.ts

@@ -0,0 +1,26 @@
+import type { Browser,Page } from "playwright-core";
+
+export interface Size { width: number; height: number }
+export const VIEWPORTS: Readonly<{ desktop: Size; phone: Size }>;
+export const VISUAL_THEMES: readonly ["light", "dark"];
+export const FROZEN_TIME: string;
+export const VISUAL_LOCALE: string;
+export const VISUAL_TIME_ZONE: string;
+export const FREEZE_CSS: string;
+export interface Journey {
+  name: string; path: string | ((page: Page, o: { origin: string }) => Promise<string>); session?: boolean; mask?: string[]; viewports?: string[];
+  ready?: string | ((page: Page) => Promise<unknown>);
+  firstPaint?: true | { hold: string[] };
+}
+export interface Cell { viewport: string; size: Size; theme: string; snapshot: string }
+export function visualMatrix(journey: Journey, options?: { viewports?: Record<string, Size>; themes?: readonly string[] }): Cell[];
+export function visualContextOptions(o: { size: Size; theme: string; javaScript?: boolean; storageState?: unknown }): Record<string, unknown>;
+export function initVisualPage(o: { theme: string; themeKey: string }): void;
+export function prepareVisualPage(page: Page, o?: { theme?: string; themeKey?: string; now?: string }): Promise<void>;
+export function settleForShot(page: Page, o?: { javaScript?: boolean }): Promise<void>;
+export function shotOptions(o?: { mask?: string[]; page?: Page }): Record<string, unknown>;
+export function defineJourneyTests(o: {
+  test: unknown; expect: unknown; journeys: Journey[]; signIn: (page: Page, o: { base?: string }) => Promise<void>;
+  base?: string; viewports?: Record<string, Size>; themes?: readonly string[]; themeKey?: string; now?: string;
+}): void;
+export type { Browser };

package/src/visual.mjs

@@ -0,0 +1,143 @@
+// Visual regression of the main journeys, one source for every app (krizaka/.github#375).
+//
+// What it fixes so that two runs of the same build give the same pixels: a frozen clock, reduced motion, no caret, no
+// View Transition, the fonts loaded, a fixed locale and time zone, the app's theme key set before the page runs, and the
+// live values masked. What it leaves to the app: its routes, how its persona signs in, what is live on its pages.
+// The baselines are Linux ones, taken in the official Playwright container (the `visual-regression` workflow of
+// krizaka/.github); the helper never compares against a baseline taken on a Mac.
+//
+//   import { test, expect } from "@playwright/test";
+//   import { defineJourneyTests } from "@krizaka/page-audit/visual";
+//   defineJourneyTests({ test, expect, journeys: [{ name: "landing", path: "/fr" }, …], signIn });
+
+import { settled, withoutViewTransitions } from "./settle.mjs";
+
+/** The two sizes of every journey: a laptop and a phone. */
+export const VIEWPORTS = Object.freeze({
+  desktop: { width: 1280, height: 800 },
+  phone: { width: 390, height: 844 },
+});
+export const VISUAL_THEMES = Object.freeze(["light", "dark"]);
+/** The clock of every capture (a Thursday, in winter: no daylight-saving edge). */
+export const FROZEN_TIME = "2026-01-15T15:00:00.000Z";
+export const VISUAL_LOCALE = "fr-CA";
+export const VISUAL_TIME_ZONE = "America/Toronto";
+
+/** The viewport × theme cells of a journey, with the snapshot name of each (`<journey>-<viewport>-<theme>.png`). */
+export function visualMatrix(journey, { viewports = VIEWPORTS, themes = VISUAL_THEMES } = {}) {
+  const only = journey.viewports ?? Object.keys(viewports);
+  const cells = [];
+  for (const viewport of only) {
+    if (!viewports[viewport]) throw new Error(`unknown viewport « ${viewport} » in journey « ${journey.name} »`);
+    for (const theme of themes) {
+      const suffix = journey.firstPaint ? "-first-paint" : "";
+      cells.push({ viewport, size: viewports[viewport], theme, snapshot: `${journey.name}${suffix}-${viewport}-${theme}.png` });
+    }
+  }
+  return cells;
+}
+
+/** The options of a browser context for a capture. `javaScript: false` shows the page as the server sent it. */
+export function visualContextOptions({ size, theme, javaScript = true, storageState }) {
+  return {
+    viewport: size,
+    colorScheme: theme,
+    reducedMotion: "reduce",
+    locale: VISUAL_LOCALE,
+    timezoneId: VISUAL_TIME_ZONE,
+    deviceScaleFactor: 1,
+    javaScriptEnabled: javaScript,
+    serviceWorkers: "block",
+    ...(storageState ? { storageState } : {}),
+  };
+}
+
+/** The style every capture carries: nothing moves, nothing blinks. */
+export const FREEZE_CSS = "*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important;scroll-behavior:auto!important}";
+
+/** Runs before the page's own scripts: the theme the app reads, no View Transition. */
+export const initVisualPage = ({ theme, themeKey }) => {
+  try {
+    localStorage.setItem(themeKey, theme);
+  } catch {
+    /* storage can be blocked: the colour scheme of the context still applies */
+  }
+};
+
+/** Prepares a page: fixed time, the theme key, no View Transition. Call before the first `goto`. */
+export async function prepareVisualPage(page, { theme, themeKey = "kz-theme", now = FROZEN_TIME } = {}) {
+  // Date is fixed, timers still run: the app finishes loading.
+  await page.context().clock.setFixedTime(new Date(now));
+  await page.addInitScript(initVisualPage, { theme, themeKey });
+  await page.addInitScript(withoutViewTransitions);
+}
+
+/** Waits until what is on screen is final: the faces, the images, the transitions. */
+export async function settleForShot(page, { javaScript = true } = {}) {
+  await page.addStyleTag({ content: FREEZE_CSS });
+  if (!javaScript) return;
+  await page.evaluate(() => document.fonts.ready);
+  await settled(page);
+  await page.evaluate(() =>
+    Promise.all([...document.images].filter((img) => !img.complete).map((img) => img.decode().catch(() => undefined))),
+  );
+}
+
+/** The options of `toHaveScreenshot`: a small tolerance for anti-aliasing, never for a missing element. */
+export function shotOptions({ mask = [], page } = {}) {
+  return {
+    animations: "disabled",
+    caret: "hide",
+    scale: "css",
+    maxDiffPixelRatio: 0.002,
+    ...(page && mask.length ? { mask: mask.map((selector) => page.locator(selector)) } : {}),
+  };
+}
+
+/**
+ * Registers one test per journey × viewport × theme.
+ *
+ * journey: { name, path (a string, or `(page, { origin }) => Promise<string>` that finds it, e.g. the first document), session?: boolean, mask?: string[] (selectors of live values), ready?: selector | (page) => Promise,
+ *            viewports?: string[], firstPaint?: true | { hold: string[] } }
+ *   firstPaint: the page before it is alive. `true` turns JavaScript off (the HTML the server sent); `{ hold }` keeps JavaScript
+ *   but never answers the listed URL patterns (the account query, say), so the account mark is captured while its query is pending.
+ * now: the instant of the browser clock (default FROZEN_TIME); an app whose seed stamps rows with the day of the run passes that moment.
+ * signIn(page, { base }): signs the persona in; its cookies are kept and reused by every signed-in capture of the worker.
+ */
+export function defineJourneyTests({ test, expect, journeys, signIn, base, viewports = VIEWPORTS, themes = VISUAL_THEMES, themeKey = "kz-theme", now = FROZEN_TIME }) {
+  let session;
+  const sessionState = (browser) => {
+    session ??= (async () => {
+      const context = await browser.newContext(visualContextOptions({ size: viewports.desktop ?? Object.values(viewports)[0], theme: "light" }));
+      const page = await context.newPage();
+      await signIn(page, { base });
+      const state = await context.storageState();
+      await context.close();
+      return state;
+    })();
+    return session;
+  };
+  for (const journey of journeys) {
+    for (const cell of visualMatrix(journey, { viewports, themes })) {
+      test(`${journey.name} · ${cell.viewport} · ${cell.theme}${journey.firstPaint ? " · first paint" : ""}`, async ({ browser, baseURL }) => {
+        const origin = base ?? baseURL;
+        const javaScript = !(journey.firstPaint === true);
+        const storageState = journey.session ? await sessionState(browser) : undefined;
+        const context = await browser.newContext(visualContextOptions({ size: cell.size, theme: cell.theme, javaScript, storageState }));
+        try {
+          const page = await context.newPage();
+          await prepareVisualPage(page, { theme: cell.theme, themeKey, now });
+          for (const pattern of journey.firstPaint?.hold ?? []) await page.route(pattern, () => undefined);
+          const path = typeof journey.path === "function" ? await journey.path(page, { origin }) : journey.path;
+          await page.goto(new URL(path, origin).toString(), { waitUntil: journey.firstPaint ? "domcontentloaded" : "load" });
+          if (typeof journey.ready === "string") await page.locator(journey.ready).first().waitFor();
+          else if (journey.ready) await journey.ready(page);
+          await settleForShot(page, { javaScript });
+          await expect(page).toHaveScreenshot(cell.snapshot, shotOptions({ mask: journey.mask, page }));
+        } finally {
+          await context.close();
+        }
+      });
+    }
+  }
+}