Los Laboratorios / Quality
QualityWorking~5h
A visual-regression harness that knows the difference between a bug and a repaint
A baseline-screenshot visual-regression harness for a handful of key pages/components at multiple breakpoints. You capture and commit baselines, diff every subsequent run against them with a tuned pixel/percentage threshold, and prove the harness in both directions: it must flag a real intentional visual break, and it must NOT flag a genuinely harmless no-op change (a comment-only commit, an unrelated file edit).
Lo que demuestra
La frase que puedes defender en una entrevista.
Línea de currículum
Built a visual-regression testing harness (Playwright screenshot baselines across 3 breakpoints, tuned pixel-diff threshold, CI gate) and proved its precision with a two-sided test: it flags an intentional visual break and stays silent on a no-op change.
- Understands visual regression as a signal-to-noise problem, not just "take a screenshot and diff it"
- Can tune a diff threshold deliberately instead of picking an arbitrary number and hoping
- Proves both the true-positive and true-negative case — most people only demo the true positive
El resumen
Lo que construyes, paso a paso.
- 01Choose 3-4 key surfaces (e.g. landing hero, a form, a data table) and capture baseline screenshots at 3 breakpoints (mobile/tablet/desktop) with animations and dynamic content (dates, avatars) disabled or mocked.
- 02Commit baselines to the repo and wire a CI job that regenerates screenshots on every PR and diffs them against baseline with a tuned threshold (e.g. maxDiffPixelRatio).
- 03Fail the CI job and upload a diff-image artifact when any surface exceeds the threshold; pass silently when it doesn't.
- 04Prove the true positive: on a branch, make one intentional visual break (e.g. shift a button 40px, change a brand color) and confirm the harness fails on exactly that surface.
- 05Prove the true negative: on a separate branch, make a genuinely cosmetic no-op (a code comment, a variable rename with zero rendered-output change) and confirm the harness stays green.
- 06Document the threshold you chose and why (what real-world noise — font rendering, subpixel rounding — it needed to tolerate without masking real breaks).
La prueba
Está terminado cuando estos pasan.
CI run against the intentional-visual-break branch fails specifically on the modified surface, with a diff image artifact showing the changed region
automated test
CI run against the no-op branch (comment/rename only, zero rendered change) passes with no flagged surfaces
automated test
Baseline regeneration is a deliberate, reviewed action (a labeled script/command), never an automatic silent overwrite on every run
reviewed
Threshold and rationale are documented in the repo (what noise it tolerates, what it still catches)
artifact
Stack
Playwright (screenshot + toHaveScreenshot)TypeScriptGitHub Actionspixelmatch (or Playwright's built-in comparator)
Método Sage
frame → map → decide → prove
Conservas
A committed baseline-screenshot suite + CI config + two run logs (intentional-break fail, no-op pass) + threshold rationale doc