inspectra-engine 0.0.0-stage → 1.0.2

package/compare.js

@@ -0,0 +1,439 @@
+import imageTools from "./scanner/legacy-image-tools.cjs";
+const { getPNG, getPixelmatch } = imageTools;
+import { chromium } from "playwright";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const OUTPUT_DIR = process.env.INSPECTRA_REPORT_DIR || path.join(__dirname, "visual-reports");
+
+/**
+ * Detects vertical clusters of differing pixels to help users locate diffs on tall pages.
+ */
+export function detectDiffRegions(diff, width, height) {
+  const data = diff.data;
+  const rowCounts = new Uint32Array(height);
+  for (let y = 0; y < height; y++) {
+    const rowStart = y * width * 4;
+    for (let x = 0; x < width; x++) {
+      const idx = rowStart + x * 4;
+      // pixelmatch writes diff pixels in red/yellow: red=255, blue=0, alpha=255
+      if (data[idx] === 255 && data[idx + 2] === 0 && data[idx + 3] === 255) {
+        rowCounts[y]++;
+      }
+    }
+  }
+
+  const regions = [];
+  let inRegion = false;
+  let startY = 0;
+  let endY = 0;
+  let clusterPixels = 0;
+  let gap = 0;
+
+  for (let y = 0; y < height; y++) {
+    if (rowCounts[y] > 0) {
+      if (!inRegion) {
+        inRegion = true;
+        startY = y;
+        clusterPixels = 0;
+      }
+      endY = y;
+      clusterPixels += rowCounts[y];
+      gap = 0;
+    } else if (inRegion) {
+      gap++;
+      if (gap > 60 || y === height - 1) {
+        if (clusterPixels >= 30) {
+          regions.push({
+            startY,
+            endY,
+            height: endY - startY + 1,
+            diffPixels: clusterPixels,
+            pctY: Number(((startY / height) * 100).toFixed(1)),
+          });
+        }
+        inRegion = false;
+      }
+    }
+  }
+  if (inRegion && clusterPixels >= 30) {
+    regions.push({
+      startY,
+      endY,
+      height: endY - startY + 1,
+      diffPixels: clusterPixels,
+      pctY: Number(((startY / height) * 100).toFixed(1)),
+    });
+  }
+
+  return regions;
+}
+
+/**
+ * Normalizes an image to the target dimensions by padding with transparent pixels.
+ */
+export function normalizeImageSize(src, targetWidth, targetHeight) {
+  if (src.width === targetWidth && src.height === targetHeight) return src;
+  const target = new (getPNG())({ width: targetWidth, height: targetHeight });
+  target.data.fill(0);
+  for (let y = 0; y < src.height; y++) {
+    for (let x = 0; x < src.width; x++) {
+      const srcIdx = (y * src.width + x) * 4;
+      const tgtIdx = (y * targetWidth + x) * 4;
+      target.data[tgtIdx] = src.data[srcIdx];
+      target.data[tgtIdx + 1] = src.data[srcIdx + 1];
+      target.data[tgtIdx + 2] = src.data[srcIdx + 2];
+      target.data[tgtIdx + 3] = src.data[srcIdx + 3];
+    }
+  }
+  return target;
+}
+
+/**
+ * Parses a Figma design URL into { fileKey, nodeId }.
+ */
+export function parseFigmaUrl(url) {
+  let u;
+  try {
+    u = new URL(url);
+  } catch {
+    throw new Error("Invalid Figma URL");
+  }
+  if (!/(^|\.)figma\.com$/.test(u.hostname)) throw new Error("Not a figma.com URL");
+  const m = u.pathname.match(/\/(?:file|design|proto)\/([A-Za-z0-9]+)/);
+  if (!m) throw new Error("Could not find a file key in the Figma URL");
+  const rawNode = u.searchParams.get("node-id");
+  if (!rawNode) {
+    throw new Error("Figma URL must include a node-id (right-click a frame > Copy link to selection)");
+  }
+  return { fileKey: m[1], nodeId: rawNode.replace(/-/g, ":") };
+}
+
+/**
+ * Renders a Figma frame to PNG via the Figma REST API and returns it as a data URL.
+ */
+export async function fetchFigmaImage(source) {
+  const token = source.token || process.env.FIGMA_TOKEN;
+  if (!token) {
+    throw new Error("Figma access token required (enter it in the form or set FIGMA_TOKEN)");
+  }
+  const { fileKey, nodeId } = parseFigmaUrl(source.value || source.url);
+  const apiUrl = `https://api.figma.com/v1/images/${fileKey}?ids=${encodeURIComponent(nodeId)}&format=png&scale=1`;
+  const res = await fetch(apiUrl, { headers: { "X-Figma-Token": token } });
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok || json.err) {
+    throw new Error(`Figma API error: ${json.err || json.message || res.status}`);
+  }
+  const imageUrl = json.images?.[nodeId];
+  if (!imageUrl) throw new Error("Figma did not return an image for that node-id");
+  const imgRes = await fetch(imageUrl);
+  if (!imgRes.ok) throw new Error(`Failed to download Figma image (${imgRes.status})`);
+  const buf = Buffer.from(await imgRes.arrayBuffer());
+  return `data:image/png;base64,${buf.toString("base64")}`;
+}
+
+/**
+ * Loads an image from a URL (via Playwright screenshot) or from an uploaded file / data URL.
+ */
+export async function loadOrCaptureImage(browser, source, filename, options = {}) {
+  const {
+    viewport = { width: 1441, height: 900 },
+    fullPage = false,
+    disableAnimations = true,
+    hideSelectors = [],
+  } = options;
+
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  const outputPath = path.join(OUTPUT_DIR, filename);
+
+  if (typeof source === "object" && source?.type === "figma") {
+    source = { type: "image", value: await fetchFigmaImage(source), name: source.name };
+  }
+
+  const isImageUpload =
+    (typeof source === "object" && source?.type === "image") ||
+    (typeof source === "string" && source.startsWith("data:image/"));
+
+  if (isImageUpload) {
+    const rawVal = typeof source === "object" ? source.value : source;
+    let buffer = null;
+
+    if (typeof rawVal === "string" && rawVal.startsWith("data:")) {
+      const base64Data = rawVal.replace(/^data:image\/[^;]+;base64,/, "");
+      buffer = Buffer.from(base64Data, "base64");
+    } else if (Buffer.isBuffer(rawVal)) {
+      buffer = rawVal;
+    } else if (typeof rawVal === "string" && fs.existsSync(rawVal)) {
+      buffer = fs.readFileSync(rawVal);
+    }
+
+    // Try reading directly with pngjs
+    if (buffer) {
+      try {
+        const png = getPNG().sync.read(buffer);
+        fs.writeFileSync(outputPath, getPNG().sync.write(png));
+        return png;
+      } catch {
+        // Fall through to browser rendering for non-PNG or exotic formats (JPG, WEBP, SVG)
+      }
+    }
+
+    // Render in headless browser to convert to standard PNG
+    const page = await browser.newPage();
+    try {
+      const dataUrl =
+        typeof rawVal === "string" && rawVal.startsWith("data:")
+          ? rawVal
+          : buffer
+          ? `data:image/png;base64,${buffer.toString("base64")}`
+          : "";
+
+      await page.setContent(`<!DOCTYPE html><html><body style="margin:0;padding:0;overflow:hidden;background:#fff"><img id="preview" src="${dataUrl}" style="display:block"></body></html>`);
+      await page.waitForSelector("#preview");
+      const dim = await page.evaluate(() => {
+        const img = document.getElementById("preview");
+        return {
+          width: img.naturalWidth || img.width || 800,
+          height: img.naturalHeight || img.height || 600,
+        };
+      });
+      await page.setViewportSize({
+        width: Math.max(1, dim.width),
+        height: Math.max(1, dim.height),
+      });
+      const screenshot = await page.screenshot({ path: outputPath, type: "png" });
+      return getPNG().sync.read(screenshot);
+    } finally {
+      await page.close();
+    }
+  }
+
+  // URL mode
+  const url = typeof source === "object" ? source.value || source.url : source;
+  const page = await browser.newPage({
+    viewport: { width: viewport.width || 1441, height: viewport.height || 900 },
+    deviceScaleFactor: 1,
+  });
+
+  try {
+    await page.goto(url, { waitUntil: "networkidle", timeout: 60000 });
+    await page.evaluate(() => document.fonts.ready);
+
+    // If fullPage capture, smoothly scroll through document to trigger IntersectionObserver,
+    // scroll-based animations (Framer Motion, AOS, etc.), and lazy-loaded images.
+    if (fullPage) {
+      await page.evaluate(async () => {
+        await new Promise((resolve) => {
+          let current = 0;
+          const step = 600;
+          const timer = setInterval(() => {
+            window.scrollBy(0, step);
+            current += step;
+            if (current >= document.documentElement.scrollHeight) {
+              clearInterval(timer);
+              window.scrollTo(0, 0);
+              resolve();
+            }
+          }, 45);
+        });
+      });
+      await page.waitForTimeout(600);
+      // Ensure all scroll-animated elements are visible
+      await page.evaluate(() => {
+        const all = document.querySelectorAll('*');
+        for (const el of all) {
+          const style = window.getComputedStyle(el);
+          if (style.opacity === '0' || style.visibility === 'hidden') {
+            el.style.opacity = '1';
+            el.style.visibility = 'visible';
+            if (style.transform !== 'none') el.style.transform = 'none';
+          }
+        }
+      });
+      await page.waitForTimeout(300);
+    }
+
+    if (disableAnimations) {
+      await page.addStyleTag({
+        content: `
+          *,
+          *::before,
+          *::after {
+            animation: none !important;
+            transition: none !important;
+            caret-color: transparent !important;
+          }
+        `,
+      });
+    }
+
+    if (hideSelectors.length) {
+      await page.addStyleTag({ content: `${hideSelectors.join(",")}{visibility:hidden!important}` });
+    }
+
+    const screenshot = await page.screenshot({
+      path: outputPath,
+      fullPage: Boolean(fullPage),
+      animations: disableAnimations ? "disabled" : "allow",
+    });
+
+    return getPNG().sync.read(screenshot);
+  } finally {
+    await page.close();
+  }
+}
+
+/**
+ * Compares two visual inputs (URLs or uploaded images) and saves comparison artifacts.
+ */
+export async function compareVisuals(options = {}) {
+  const {
+    reference,
+    actual,
+    viewport = { width: 1441, height: 900 },
+    threshold = 0.1,
+    fullPage = false,
+    disableAnimations = true,
+    hideSelectors = [],
+  } = options;
+
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  const browser = await chromium.launch({ headless: true });
+
+  try {
+    const refRaw = await loadOrCaptureImage(browser, reference, "reference.png", {
+      viewport,
+      fullPage,
+      disableAnimations,
+      hideSelectors,
+    });
+
+    const actRaw = await loadOrCaptureImage(browser, actual, "actual.png", {
+      viewport,
+      fullPage,
+      disableAnimations,
+      hideSelectors,
+    });
+
+    const targetWidth = Math.max(refRaw.width, actRaw.width);
+    const targetHeight = Math.max(refRaw.height, actRaw.height);
+
+    const ref = normalizeImageSize(refRaw, targetWidth, targetHeight);
+    const act = normalizeImageSize(actRaw, targetWidth, targetHeight);
+
+    const diff = new (getPNG())({ width: targetWidth, height: targetHeight });
+
+    const differentPixels = getPixelmatch()(
+      ref.data,
+      act.data,
+      diff.data,
+      targetWidth,
+      targetHeight,
+      { threshold: Number(threshold) || 0.1 }
+    );
+
+    const diffPath = path.join(OUTPUT_DIR, "difference.png");
+    fs.writeFileSync(diffPath, getPNG().sync.write(diff));
+
+    const totalPixels = targetWidth * targetHeight;
+    const differencePercent = (differentPixels / totalPixels) * 100;
+
+    const diffRegions = detectDiffRegions(diff, targetWidth, targetHeight);
+
+    const result = {
+      referenceType:
+        typeof reference === "object"
+          ? reference.type
+          : typeof reference === "string" && reference.startsWith("http")
+          ? "url"
+          : "image",
+      actualType:
+        typeof actual === "object"
+          ? actual.type
+          : typeof actual === "string" && actual.startsWith("http")
+          ? "url"
+          : "image",
+      referenceUrl:
+        reference?.type === "figma"
+          ? null
+          : typeof reference === "string" && reference.startsWith("http")
+          ? reference
+          : reference?.url || (reference?.type === "url" ? reference.value : null),
+      actualUrl:
+        actual?.type === "figma"
+          ? null
+          : typeof actual === "string" && actual.startsWith("http")
+          ? actual
+          : actual?.url || (actual?.type === "url" ? actual.value : null),
+      referenceName: reference?.name || (typeof reference === "string" ? reference : "reference"),
+      actualName: actual?.name || (typeof actual === "string" ? actual : "actual"),
+      viewport: `${targetWidth}x${targetHeight}`,
+      threshold: Number(threshold) || 0.1,
+      totalPixels,
+      differentPixels,
+      differencePercent: Number(differencePercent.toFixed(2)),
+      referenceImage: "visual-reports/reference.png",
+      actualImage: "visual-reports/actual.png",
+      reportImage: "visual-reports/difference.png",
+      diffRegions,
+      sizeMismatch:
+        refRaw.width !== actRaw.width || refRaw.height !== actRaw.height
+          ? {
+              reference: `${refRaw.width}x${refRaw.height}`,
+              actual: `${actRaw.width}x${actRaw.height}`,
+            }
+          : null,
+      timestamp: new Date().toISOString(),
+    };
+
+    fs.writeFileSync(
+      path.join(OUTPUT_DIR, "result.json"),
+      JSON.stringify(result, null, 2)
+    );
+
+    console.log(result);
+    return result;
+  } finally {
+    await browser.close();
+  }
+}
+
+/**
+ * Capture single page screenshot (backwards compatible helper).
+ */
+export async function capturePage(browser, url, filename) {
+  return loadOrCaptureImage(browser, { type: "url", value: url }, filename);
+}
+
+/**
+ * Compares two URLs (backwards compatible CLI helper).
+ */
+export async function comparePages(referenceUrl, actualUrl, options = {}) {
+  return compareVisuals({
+    reference: { type: "url", value: referenceUrl },
+    actual: { type: "url", value: actualUrl },
+    ...options,
+  });
+}
+
+const isDirectCli =
+  process.argv[1] &&
+  fileURLToPath(import.meta.url) === path.resolve(process.argv[1]);
+
+if (isDirectCli) {
+  const [referenceUrl, actualUrl] = process.argv.slice(2);
+
+  if (!referenceUrl || !actualUrl) {
+    console.error('Usage: node compare.js "REFERENCE_URL" "ACTUAL_URL"');
+    process.exitCode = 1;
+  } else {
+    comparePages(referenceUrl, actualUrl).catch((error) => {
+      console.error(error);
+      process.exitCode = 1;
+    });
+  }
+}

package/dom-compare.js

@@ -0,0 +1,263 @@
+import { chromium } from "playwright";
+import path from "node:path";
+import fs from "node:fs";
+import { OUTPUT_DIR } from "./compare.js";
+
+// Only typography and spacing are compared. Content (text, images) and colours are intentionally ignored.
+const TYPOGRAPHY_PROPS = ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "wordSpacing"];
+const SPACING_PROPS = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "marginTop", "marginBottom", "gap"];
+const STYLE_PROPS = [...TYPOGRAPHY_PROPS, ...SPACING_PROPS];
+
+const MAX_ELEMENTS = 4000;
+const MAX_REPORTED = 600;
+
+/**
+ * Runs inside the browser: collects every visible element with its geometry and computed styles.
+ */
+function extractElements({ props, max, ignore }) {
+  const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "META", "LINK", "HEAD", "TEMPLATE", "BR", "PATH", "DEFS", "G"]);
+  const out = [];
+
+  function pathOf(el) {
+    const parts = [];
+    for (let n = el; n && n !== document.documentElement; n = n.parentElement) {
+      const tag = n.tagName.toLowerCase();
+      let idx = 1;
+      for (let s = n.previousElementSibling; s; s = s.previousElementSibling) {
+        if (s.tagName === n.tagName) idx++;
+      }
+      parts.unshift(`${tag}:nth-of-type(${idx})`);
+    }
+    return parts.join(" > ");
+  }
+
+  function label(el) {
+    let s = el.tagName.toLowerCase();
+    if (el.id) s += `#${el.id}`;
+    const cls = typeof el.className === "string" ? el.className.trim().split(/\s+/).filter(Boolean).slice(0, 2) : [];
+    if (cls.length) s += "." + cls.join(".");
+    return s;
+  }
+
+  function ownText(el) {
+    let t = "";
+    for (const c of el.childNodes) if (c.nodeType === 3) t += c.textContent;
+    return t.replace(/\s+/g, " ").trim().slice(0, 80);
+  }
+
+  const all = document.body.querySelectorAll("*");
+  for (const el of all) {
+    if (out.length >= max) break;
+    if (SKIP.has(el.tagName.toUpperCase())) continue;
+    if (el.closest("svg") && el.tagName.toLowerCase() !== "svg") continue;
+    if (ignore) {
+      try {
+        if (el.closest(ignore)) continue;
+      } catch {
+        // invalid selector: treat as no-op
+      }
+    }
+    const cs = getComputedStyle(el);
+    if (cs.display === "none" || cs.visibility === "hidden") continue;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) continue;
+    const text = ownText(el);
+    if (!text && !/^(INPUT|BUTTON|TEXTAREA|SELECT)$/.test(el.tagName)) continue;
+
+    const styles = {};
+    for (const p of props) {
+      let v = cs[p];
+      if (p === "fontFamily") v = v.split(",")[0].replace(/["']/g, "").trim();
+      styles[p] = v;
+    }
+    out.push({
+      path: pathOf(el),
+      label: label(el),
+      tag: el.tagName.toLowerCase(),
+      text,
+      rect: {
+        x: Math.round((r.left + window.scrollX) * 10) / 10,
+        y: Math.round((r.top + window.scrollY) * 10) / 10,
+        width: Math.round(r.width * 10) / 10,
+        height: Math.round(r.height * 10) / 10,
+      },
+      styles,
+    });
+  }
+  return out;
+}
+
+async function collect(browser, url, { viewport, fullPage, disableAnimations, ignore, shotName }) {
+  const page = await browser.newPage({ viewport, deviceScaleFactor: 1 });
+  try {
+    await page.goto(url, { waitUntil: "networkidle", timeout: 60000 });
+    await page.evaluate(() => document.fonts.ready);
+    if (fullPage) {
+      // Scroll through the page so lazy-loaded / scroll-triggered content is rendered before measuring.
+      await page.evaluate(async () => {
+        await new Promise((resolve) => {
+          let current = 0;
+          const timer = setInterval(() => {
+            window.scrollBy(0, 600);
+            current += 600;
+            if (current >= document.documentElement.scrollHeight) {
+              clearInterval(timer);
+              window.scrollTo(0, 0);
+              resolve();
+            }
+          }, 45);
+        });
+      });
+      await page.waitForTimeout(600);
+    }
+    if (disableAnimations) {
+      await page.addStyleTag({
+        content: "*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}",
+      });
+    }
+    const nodes = await page.evaluate(extractElements, { props: STYLE_PROPS, max: MAX_ELEMENTS, ignore });
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+    await page.screenshot({ path: path.join(OUTPUT_DIR, shotName), fullPage: true });
+    const size = await page.evaluate(() => ({
+      width: document.documentElement.scrollWidth,
+      height: document.documentElement.scrollHeight,
+    }));
+    return { nodes, image: `visual-reports/${shotName}`, ...size };
+  } finally {
+    await page.close();
+  }
+}
+
+function pxNum(v) {
+  const m = /^(-?[\d.]+)px$/.exec(v);
+  return m ? Number(m[1]) : null;
+}
+
+function sameValue(prop, a, b, tolerance) {
+  if (a === b) return true;
+  const x = pxNum(a);
+  const y = pxNum(b);
+  if (x === null || y === null) return false;
+  // Typography is compared tightly; spacing gets the user-set tolerance.
+  const tol = TYPOGRAPHY_PROPS.includes(prop) ? 0.5 : tolerance;
+  return Math.abs(x - y) <= tol;
+}
+
+function diffNodes(a, b, tolerance) {
+  const diffs = [];
+  for (const p of STYLE_PROPS) {
+    if (!sameValue(p, a.styles[p], b.styles[p], tolerance)) {
+      diffs.push({
+        kind: TYPOGRAPHY_PROPS.includes(p) ? "typography" : "spacing",
+        prop: p,
+        ref: a.styles[p],
+        act: b.styles[p],
+      });
+    }
+  }
+  return diffs;
+}
+
+/**
+ * Pairs elements between two pages by DOM path (same structure), then by tag + nearest position for leftovers,
+ * and reports typography / spacing differences. Content differences are never reported.
+ */
+export function matchAndDiff(refNodes, actNodes, tolerance = 2) {
+  const actByPath = new Map(actNodes.map((n) => [n.path, n]));
+  const usedAct = new Set();
+  const pairs = [];
+  const unmatchedRef = [];
+
+  for (const r of refNodes) {
+    const a = actByPath.get(r.path);
+    if (a && a.tag === r.tag && !usedAct.has(a)) {
+      usedAct.add(a);
+      pairs.push([r, a]);
+    } else {
+      unmatchedRef.push(r);
+    }
+  }
+
+  // Text is dynamic in the target, so leftovers are paired by tag and nearest position, never by text.
+  const MAX_DIST = 200;
+  const cands = [];
+  unmatchedRef.forEach((r, ri) => {
+    for (const a of actNodes) {
+      if (usedAct.has(a) || a.tag !== r.tag) continue;
+      const d = Math.abs(a.rect.x - r.rect.x) + Math.abs(a.rect.y - r.rect.y);
+      if (d <= MAX_DIST) cands.push({ ri, a, d });
+    }
+  });
+  cands.sort((x, y) => x.d - y.d);
+  const usedRef = new Set();
+  for (const c of cands) {
+    if (usedRef.has(c.ri) || usedAct.has(c.a)) continue;
+    usedRef.add(c.ri);
+    usedAct.add(c.a);
+    pairs.push([unmatchedRef[c.ri], c.a]);
+  }
+
+  const items = [];
+  let typographyDiffs = 0;
+  let spacingDiffs = 0;
+  for (const [r, a] of pairs) {
+    const diffs = diffNodes(r, a, tolerance);
+    if (!diffs.length) continue;
+    for (const d of diffs) d.kind === "typography" ? typographyDiffs++ : spacingDiffs++;
+    items.push({
+      label: a.label,
+      path: a.path,
+      text: (a.text || r.text || "").slice(0, 60),
+      refRect: r.rect,
+      actRect: a.rect,
+      y: a.rect.y,
+      diffs,
+    });
+  }
+  items.sort((x, y) => x.y - y.y);
+
+  return {
+    summary: {
+      referenceElements: refNodes.length,
+      actualElements: actNodes.length,
+      matched: pairs.length,
+      changedElements: items.length,
+      typographyDiffs,
+      spacingDiffs,
+      tolerance,
+      truncated: items.length > MAX_REPORTED,
+    },
+    items: items.slice(0, MAX_REPORTED),
+  };
+}
+
+/**
+ * Compares the DOM geometry and computed CSS of two live URLs.
+ */
+export async function compareDom({
+  referenceUrl,
+  actualUrl,
+  viewport = { width: 1440, height: 900 },
+  tolerance = 2,
+  ignoreSelectors = [],
+  fullPage = true,
+  disableAnimations = true,
+}) {
+  const browser = await chromium.launch({ headless: true });
+  try {
+    const base = { viewport, fullPage, disableAnimations, ignore: ignoreSelectors.join(",") };
+    const [ref, act] = await Promise.all([
+      collect(browser, referenceUrl, { ...base, shotName: "ui-reference.png" }),
+      collect(browser, actualUrl, { ...base, shotName: "ui-target.png" }),
+    ]);
+    const tol = Number(tolerance) >= 0 ? Number(tolerance) : 2;
+    const diff = matchAndDiff(ref.nodes, act.nodes, tol);
+    return {
+      ...diff,
+      reference: { image: ref.image, width: ref.width, height: ref.height },
+      target: { image: act.image, width: act.width, height: act.height },
+    };
+  } finally {
+    await browser.close();
+  }
+}