@decocms/parity 0.10.0 → 0.10.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.10.1](https://github.com/decocms/parity/compare/v0.10.0...v0.10.1) (2026-05-30)
+
+### Fixed
+
+* **Adaptive `scrollFullPage` — actually reaches the bottom on long pages.** Previous fixed-step loop with a 10s outer race only covered ~15000px before bailing, so 25000-40000px e-commerce homepages were captured with half the content still as skeletons. New loop re-measures `scrollHeight` every tick, waits inline for in-view skeleton placeholders to clear (up to 1.5s per step), and exits once page height has been stable for 3 consecutive checks. On miess home: 15 steps, 8862px reached, **0 skeletons at screenshot time** (was 7+ before). Race timeout bumped 10s → 45s, `capturePage` visual-diff `timeoutMs` 45s → 90s to fit the new scroll budget.
+
+* **Silent `ReferenceError: __name is not defined` inside `page.evaluate`.** Took two debug rounds to isolate — `tsx`/esbuild injects a `__name` helper to preserve `.name` on arrow-function declarations (`const foo = () => ...`), but that helper doesn't exist in the page's browser context. The function threw immediately and `.catch(() => undefined)` swallowed it, making it look like a legitimate timeout. Fix: inlined the helper Promises inside `scrollFullPage`'s `page.evaluate`, and replaced silent `.catch` with one that logs the actual error message.
+
+* **`SKELETON_DOWNGRADE_PCT_DIFF_CEILING = 0.25`.** The skeleton-vs-loaded downgrade was masking structural failures: any diff where the LLM mentioned "skeleton"/"placeholder" was forced to `low`, even when prod had a half-empty page (34%+ pctDiff). Now the downgrade only fires when pctDiff is under 25% — above that, the imbalance is treated as a real regression, not timing noise.
+
+### Changed
+
+* `waitForSkeletonsToResolve` budget reduced 10s → 5s. The new adaptive scroll does inter-step skeleton waits, so the global safety net is a last-resort for off-screen skeletons rather than the primary defense.
+
+* New `pre-screenshot skeletons=N` diagnostic log (via `DEBUG_PARITY=1`) so anyone investigating "is the page actually ready when we capture it?" can answer in one run.
+
 ## [0.10.0](https://github.com/decocms/parity/compare/v0.9.0...v0.10.0) (2026-05-29)
 
 ### Added

package/dist/cli.js

@@ -1938,28 +1938,53 @@ async function waitForSkeletonsToResolve(page, maxMs = 1e4) {
     });
   }
 }
-async function scrollFullPage(page) {
-  await page.evaluate(async () => {
-    await new Promise((resolve) => {
-      const step = Math.max(window.innerHeight * 0.8, 600);
-      let y = 0;
-      const max = document.documentElement.scrollHeight;
-      const tick = () => {
-        window.scrollTo(0, y);
-        y += step;
-        if (y < max) {
-          setTimeout(tick, 400);
+async function scrollFullPage(page, budgetMs = 45000) {
+  const start = Date.now();
+  const result = await page.evaluate(async (budget) => {
+    const SK = "[aria-busy='true'],[data-skeleton],[data-loading='true'],.skeleton,[class*='skeleton' i],[class*='Skeleton'],[class*='shimmer' i],.animate-pulse,.placeholder-shimmer,.react-loading-skeleton";
+    const innerStart = Date.now();
+    let y = 0;
+    let prevHeight = 0;
+    let stableTicks = 0;
+    let steps = 0;
+    const STABLE_THRESHOLD = 3;
+    while (budget - (Date.now() - innerStart) > 2000) {
+      window.scrollTo(0, y);
+      steps++;
+      await new Promise((r) => setTimeout(r, 400));
+      const stepWaitStart = Date.now();
+      while (document.querySelectorAll(SK).length > 0 && Date.now() - stepWaitStart < 1500 && budget - (Date.now() - innerStart) > 1000) {
+        await new Promise((r) => setTimeout(r, 200));
+      }
+      const height = document.documentElement.scrollHeight;
+      const viewport = window.innerHeight;
+      if (y + viewport >= height - 50) {
+        if (height === prevHeight) {
+          stableTicks++;
+          if (stableTicks >= STABLE_THRESHOLD)
+            break;
         } else {
-          window.scrollTo(0, max);
-          setTimeout(() => {
-            window.scrollTo(0, 0);
-            setTimeout(resolve, 700);
-          }, 1500);
+          stableTicks = 0;
+          prevHeight = height;
         }
-      };
-      tick();
-    });
-  });
+        await new Promise((r) => setTimeout(r, 500));
+      } else {
+        y = Math.min(y + Math.max(viewport * 0.8, 600), height);
+      }
+    }
+    const finalHeight = document.documentElement.scrollHeight;
+    window.scrollTo(0, finalHeight);
+    await new Promise((r) => setTimeout(r, 1500));
+    window.scrollTo(0, 0);
+    await new Promise((r) => setTimeout(r, 700));
+    return { steps, finalHeight, stableAtEnd: stableTicks >= STABLE_THRESHOLD };
+  }, budgetMs);
+  return {
+    steps: result.steps,
+    finalHeight: result.finalHeight,
+    stableAtEnd: result.stableAtEnd,
+    durationMs: Date.now() - start
+  };
 }
 function isFromHttpCache(resp) {
   const h = resp.headers();
@@ -2028,14 +2053,20 @@ async function capturePage(page, opts) {
         dlog(opts.side, opts.viewport, `    capturePage: settle (cap=${Math.min(opts.settleMs ?? 2000, remaining())}ms)`);
         await page.waitForTimeout(Math.min(opts.settleMs ?? 2000, remaining()));
         if (opts.scrollToLoad !== false && remaining() > 3000) {
-          dlog(opts.side, opts.viewport, `    capturePage: scrollFullPage start (remaining=${remaining()}ms)`);
-          await Promise.race([
-            scrollFullPage(page).catch(() => {
+          const scrollBudget = Math.min(45000, remaining());
+          dlog(opts.side, opts.viewport, `    capturePage: scrollFullPage start (budget=${scrollBudget}ms, remaining=${remaining()}ms)`);
+          const scrollResult = await Promise.race([
+            scrollFullPage(page, scrollBudget).catch((err) => {
+              dlog(opts.side, opts.viewport, `    capturePage: scrollFullPage threw: ${err.message}`);
               return;
             }),
-            new Promise((resolve) => setTimeout(resolve, Math.min(1e4, remaining())))
+            new Promise((resolve) => setTimeout(() => resolve(undefined), scrollBudget + 2000))
           ]);
-          dlog(opts.side, opts.viewport, `    capturePage: scrollFullPage done (remaining=${remaining()}ms)`);
+          if (scrollResult) {
+            dlog(opts.side, opts.viewport, `    capturePage: scrollFullPage done steps=${scrollResult.steps} finalHeight=${scrollResult.finalHeight} stable=${scrollResult.stableAtEnd} duration=${scrollResult.durationMs}ms (remaining=${remaining()}ms)`);
+          } else {
+            dlog(opts.side, opts.viewport, `    capturePage: scrollFullPage timed out at outer race (remaining=${remaining()}ms)`);
+          }
           if (remaining() > 2000) {
             dlog(opts.side, opts.viewport, `    capturePage: post-scroll networkidle (cap=${Math.min(3000, remaining())}ms)`);
             await page.waitForLoadState("networkidle", { timeout: Math.min(3000, remaining()) }).catch(() => {
@@ -2063,7 +2094,7 @@ async function capturePage(page, opts) {
         }),
         new Promise((resolve) => setTimeout(resolve, Math.min(3000, remaining())))
       ]);
-      const skeletonBudget = Math.min(1e4, remaining());
+      const skeletonBudget = Math.min(5000, remaining());
       if (skeletonBudget > 500) {
         dlog(opts.side, opts.viewport, `    capturePage: waitForSkeletons (cap=${skeletonBudget}ms)`);
         await Promise.race([
@@ -2073,6 +2104,10 @@ async function capturePage(page, opts) {
           new Promise((resolve) => setTimeout(resolve, skeletonBudget))
         ]);
       }
+      try {
+        const skeletonsAtCapture = await page.evaluate((sel) => document.querySelectorAll(sel).length, SKELETON_SELECTOR).catch(() => -1);
+        dlog(opts.side, opts.viewport, `    capturePage: pre-screenshot skeletons=${skeletonsAtCapture}`);
+      } catch {}
       dlog(opts.side, opts.viewport, `    capturePage: screenshot start (cap=${Math.min(15000, remaining())}ms)`);
       await Promise.race([
         page.screenshot({ path: opts.screenshotPath, fullPage: true, animations: "disabled" }).catch(() => {
@@ -6695,10 +6730,14 @@ function downgradeCarouselFramingDiffs(diffs, bothHaveCarousel) {
   });
 }
 var SKELETON_DESCRIPTION_RE = /skeleton|placeholder|shimmer|loading|carregando|esqueleto|esquemático|cinza|gray box|gray card|empty card|empty placeholder|loader/i;
-function downgradeSkeletonImbalanceDiffs(diffs, prodSkeletonCount, candSkeletonCount) {
+var SKELETON_DOWNGRADE_PCT_DIFF_CEILING = 0.25;
+function downgradeSkeletonImbalanceDiffs(diffs, prodSkeletonCount, candSkeletonCount, pctDiff) {
   if (Math.abs(prodSkeletonCount - candSkeletonCount) < SKELETON_IMBALANCE_THRESHOLD) {
     return diffs;
   }
+  if (pctDiff > SKELETON_DOWNGRADE_PCT_DIFF_CEILING) {
+    return diffs;
+  }
   const heavier = prodSkeletonCount > candSkeletonCount ? "prod" : "cand";
   return diffs.map((d) => {
     if (d.severity === "low")
@@ -6862,7 +6901,7 @@ async function visualRegressionKeyframes(ctx) {
     }
     if (differences.length > 0) {
       differences = downgradeCarouselFramingDiffs(differences, p.bothHaveCarousel);
-      differences = downgradeSkeletonImbalanceDiffs(differences, p.prodSkeletonCount, p.candSkeletonCount);
+      differences = downgradeSkeletonImbalanceDiffs(differences, p.prodSkeletonCount, p.candSkeletonCount, p.pctDiff);
     }
     const verdict = decideVerdict({
       llmError,
@@ -17165,7 +17204,7 @@ async function runCommand(rawOpts) {
                   viewport: task.viewport,
                   screenshotPath: screenshotPath2,
                   settleMs: 4000,
-                  timeoutMs: 45000,
+                  timeoutMs: 90000,
                   scrollToLoad: true
                 });
                 allPageCaptures.push(cap);
@@ -17357,8 +17396,9 @@ async function preflightCheck(prodUrl, candUrl, viewport) {
       errors.push(`${label}: URL inválida (${url})`);
       return;
     }
+    const PREFLIGHT_TIMEOUT_MS = 30000;
     const controller = new AbortController;
-    const t = setTimeout(() => controller.abort(), 1e4);
+    const t = setTimeout(() => controller.abort(), PREFLIGHT_TIMEOUT_MS);
     try {
       const res = await fetch(url, {
         method: "GET",
@@ -17374,7 +17414,7 @@ async function preflightCheck(prodUrl, candUrl, viewport) {
         errors.push(`${label}: HTTP ${res.status} ${res.statusText} (${url})`);
     } catch (err) {
       const e = err;
-      const msg = e.name === "AbortError" ? "timeout (10s)" : e.message;
+      const msg = e.name === "AbortError" ? `timeout (${PREFLIGHT_TIMEOUT_MS / 1000}s)` : e.message;
       errors.push(`${label}: ${msg} (${url})`);
     } finally {
       clearTimeout(t);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@decocms/parity",
-	"version": "0.10.0",
+	"version": "0.10.1",
 	"description": "E2E parity validator for site migrations. Compares prod vs cand and reports UI, functional, SEO, visual, and Web Vitals deltas with an LLM-ranked HTML report.",
 	"type": "module",
 	"license": "MIT",