visual-diff: mask Angular-only test-env chrome

Paint 3 known noise regions white in both screenshots before pixel-
matching:
  - top-left ~200×90 (debug counter + orange `Тестовая версия` badge)
  - top-right ~240×50 (build tag like `rc/2026-04-06`)
  - bottom-right ~90×90 (chat-widget bubble)

These show only on the deployed Angular test env, not in the React
dev build, and were inflating every parity score by ~1-2pp.

Mismatch deltas vs prior run:
  en-onlineboard-route       4.62% → 4.45%
  flight-details            11.24% → 10.82%
  mobile-flight-details     17.92% → 16.58%
  mobile-onlineboard-start  20.37% → 18.66%
  onlineboard-arrival        4.63% → 4.46%
  onlineboard-departure      5.03% → 4.86%
  onlineboard-route          4.78% → 4.60%
  onlineboard-start         14.52% → 13.77%
  schedule-route            12.47% → 11.87%
  schedule-start            13.39% → 12.86%
  flights-map               37.28% → 36.40%
This commit is contained in:
2026-04-19 21:34:44 +03:00
parent a41c767dd1
commit 64c86dcdd6
+40
View File
@@ -28,6 +28,39 @@ const STATS_PATH = join(ROOT, "comparison-report/visual/diff-stats.json");
mkdirSync(DIFFS_DIR, { recursive: true });
/**
* Paint a rectangle white. Used to mask Angular-only test-env chrome
* (orange `Тестовая версия` badge top-left, `rc/2026-04-06` build tag
* top-right, chat-widget bubble bottom-right) before pixel-matching
* so those regions don't pollute the parity score.
*/
function maskRect(png, x, y, w, h) {
const x0 = Math.max(0, x);
const y0 = Math.max(0, y);
const x1 = Math.min(png.width, x + w);
const y1 = Math.min(png.height, y + h);
for (let yy = y0; yy < y1; yy++) {
for (let xx = x0; xx < x1; xx++) {
const idx = (yy * png.width + xx) * 4;
png.data[idx] = 255;
png.data[idx + 1] = 255;
png.data[idx + 2] = 255;
png.data[idx + 3] = 255;
}
}
}
/** Apply the standard chrome masks to both PNGs in-place. */
function applyChromeMasks(png) {
const isMobile = png.width <= 500;
// Top-left debug counter / orange "Тестовая версия" badge.
maskRect(png, 0, 0, isMobile ? 200 : 200, 90);
// Top-right `rc/...` build tag.
maskRect(png, png.width - 240, 0, 240, 50);
// Bottom-right chat widget.
maskRect(png, png.width - 90, png.height - 90, 90, 90);
}
const files = readdirSync(SRC_DIR);
const reactFiles = files.filter((f) => f.startsWith("react-") && f.endsWith(".png"));
@@ -70,6 +103,13 @@ for (const reactFile of reactFiles) {
const aP = pad(aPng);
const rP = pad(rPng);
// Strip Angular-only chrome (orange test-env badge, build tag, chat
// widget) from both sides — those regions are environmental noise
// that shouldn't drag the parity score down.
applyChromeMasks(aP);
applyChromeMasks(rP);
const diffPng = new PNG({ width, height });
const mismatchCount = pixelmatch(