13551f4f22
New tooling in tests/tools/screenshots/ (TypeScript via tsx): - compare.ts: one pixelmatch engine (AA-excluded), connected-component "where to look" boxes, old|new+boxes|heatmap triptych, per-engine floors. - promote.ts: churn-free updater — overwrite a baseline only when decoded pixels differ beyond the floor, copying CI bytes verbatim (no re-encode churn); pulls a CI run via `gh run download` or a local --from dir. - post-discord.ts: always-on CI-on-main report (SHA + e2e status + the track-only runtime-perf table), then screenshot triptychs, batched + size-capped + flood-collapsed + 429-aware. - perf-report.ts: perf table with Δ vs the previous main run (via gh). - changelog.ts: no-build git-history baseline differ (Discord trigger B). - noise.ts / gen-manifest.ts: calibration + manifest generation. CI wiring: - wasm-build.yml: post-test step runs the gate + report on the already- produced test-results (no extra build); report-only (continue-on-error), posts only on push to main, inert without DISCORD_WEBHOOK_URL. - ci-ubicloud.yml: secrets: inherit (pass the webhook through). - screenshot-changelog.yml: ~30s no-build changelog on baseline changes. screenshot-manifest.json: canonical 354-name set + best-effort engine tags (313 chromium-swiftshader / 41 firefox-llvmpipe). Normalize scale:'device'->'css' across 18 spec files (no-op at CI DSF=1) so committed baselines are uniformly css-scaled. Design: CI's Linux render is the single source of truth; no pinned container (accept rare env drift -> re-promote); dev commits via promote. Replaces the byte-cmp compare-screenshots.sh + file-size-proxy update-baseline-screenshots.sh (kept for now until the first re-baseline). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
84 lines
3.8 KiB
TypeScript
84 lines
3.8 KiB
TypeScript
/**
|
||
* Central config for the screenshot regression + review tooling.
|
||
*
|
||
* The comparison engine (compare.ts), the churn-free updater (promote.ts) and
|
||
* the Discord reporter (post-discord.ts) all read their knobs from here so
|
||
* there is exactly one place to tune thresholds and paths.
|
||
*
|
||
* Paths are relative to the `tests/` directory (that is the working directory
|
||
* the npm scripts and CI steps run from).
|
||
*/
|
||
|
||
/** Committed baseline directories, scanned in order. Filenames are the keys. */
|
||
export const BASELINE_DIRS = ['baseline-screenshots', 'e2e/baseline-screenshots'] as const;
|
||
|
||
/** Where Playwright writes the current run's screenshots (gitignored). */
|
||
export const RESULTS_DIR = 'test-results';
|
||
|
||
/** Where compare.ts writes diff/heatmap/triptych artifacts (gitignored). */
|
||
export const DIFF_OUT_DIR = 'test-results/screenshot-diff';
|
||
|
||
/** The manifest that records every expected screenshot + which engine renders it. */
|
||
export const MANIFEST_PATH = 'screenshot-manifest.json';
|
||
|
||
/**
|
||
* pixelmatch per-pixel settings.
|
||
* - `threshold` is the YIQ perceptual distance (0..1) below which two pixels
|
||
* are considered equal. 0.1 tolerates gamma/AA jitter but catches real colour
|
||
* change.
|
||
* - `includeAA: false` (the pixelmatch default) means anti-aliased edge pixels
|
||
* are DETECTED AND IGNORED — exactly the sub-pixel/AA noise the old
|
||
* `maxDiff>16` counter was dominated by (see screenshot-compare.ts:36-43).
|
||
*/
|
||
export const PIXELMATCH = { threshold: 0.1, includeAA: false } as const;
|
||
|
||
/** Colour pixelmatch paints a real (non-AA) diff pixel with — the mask reads this back. */
|
||
export const DIFF_COLOR: [number, number, number] = [255, 0, 0];
|
||
|
||
/** Connected-component clustering ("where to look") parameters. */
|
||
export const CLUSTER = {
|
||
dilate: 2, // grow the mask so fragmented glyph pixels merge into one box
|
||
minBoxArea: 16, // drop specks smaller than this (px²)
|
||
maxBoxes: 6, // draw at most this many (largest-first) red boxes
|
||
boxColor: [255, 0, 0] as [number, number, number],
|
||
} as const;
|
||
|
||
/** Horizontal montage layout for the old | new+boxes | heatmap triptych. */
|
||
export const TRIPTYCH = {
|
||
gap: 8,
|
||
bg: [24, 24, 24, 255] as [number, number, number, number],
|
||
padFill: [40, 0, 40, 255] as [number, number, number, number], // magenta pad on dim-mismatch
|
||
} as const;
|
||
|
||
/**
|
||
* Per-engine verdict floors. A screenshot is CHANGED when its AA-excluded
|
||
* changed-pixel ratio exceeds `changedRatio`. `meanChannelGuard` is recorded
|
||
* for the drift-vs-regression heuristic (broad + low-intensity ⇒ environment
|
||
* drift, not a localized regression), not for the primary verdict.
|
||
*
|
||
* NOTE: these are PLACEHOLDERS. `npm run screenshots:noise` renders the suite
|
||
* twice on the CI host and prints the real intra-CI floor per engine; set
|
||
* `changedRatio ≈ measured × 3` from that and commit the numbers here.
|
||
*/
|
||
export type EngineFloor = { changedRatio: number; meanChannelGuard: number };
|
||
|
||
export const FLOORS: Record<string, EngineFloor> = {
|
||
'firefox-llvmpipe': { changedRatio: 0.002, meanChannelGuard: 2.0 },
|
||
'chromium-swiftshader': { changedRatio: 0.002, meanChannelGuard: 2.0 },
|
||
default: { changedRatio: 0.002, meanChannelGuard: 2.0 },
|
||
};
|
||
|
||
/**
|
||
* Optional per-file rectangles to ignore before diffing (e.g. a live clock).
|
||
* Keyed by screenshot filename. Empty for now.
|
||
*/
|
||
export const IGNORE_REGIONS: Record<string, Array<{ x: number; y: number; width: number; height: number }>> = {};
|
||
|
||
export type ManifestEntry = { name: string; engine: string };
|
||
export type Manifest = { screenshots: ManifestEntry[] };
|
||
|
||
/** Resolve the verdict floor for a screenshot via the manifest's engine tag. */
|
||
export function floorFor(name: string, manifest?: Manifest): EngineFloor {
|
||
const engine = manifest?.screenshots.find((e) => e.name === name)?.engine;
|
||
return (engine && FLOORS[engine]) || FLOORS.default;
|
||
}
|