Approach (high level)
I would add an automated visual testing job (Percy or Chromatic) to CI that captures baselines for multiple viewports, runs diffs on every PR, and provides a lightweight triage workflow for approvals. My goal: catch regressions while minimizing noise.
Capturing baselines across viewports
- Use Percy widths or Chromatic viewports to specify breakpoints: desktop/tablet/mobile (e.g., 1440, 1024, 375).
- For component-driven apps, publish Storybook to Chromatic so each story is a baseline; for app flows use Percy snapshots in e2e tests (Cypress/Playwright).
- Example Percy snapshot in Cypress:
javascript
// cypress/integration/visual.spec.js
cy.visit('/checkout');
cy.percySnapshot('Checkout - logged in', { widths: [1440, 1024, 375] });
Reducing false positives
- Stabilize dynamic content:
- Seed deterministic test data or mock network responses in CI.
- Stub timestamps, random IDs, and system-generated text.
- Mask/ignore regions:
- Use Percy/Chromatic ignore selectors or snapshot options to exclude dynamic elements (ads, avatars).
- Disable animations:
- Add a test CSS override to set
animation-duration: 0s; transition-duration: 0s; or use prefers-reduced-motion.
- Use consistent fonts and locales in CI (install system fonts or embed web fonts).
- Wait for network idle and element readiness before snapshot to avoid loading artifacts.
Managing approved diffs
- Triage workflow:
- PR triggers visual job; diffs appear in Percy/Chromatic.
- Label diffs as “intended” or “regression”; maintain owners for areas to approve.
- Automate auto-approval for trivial diffs (color tokens updates) via CI tag + script but require human sign-off for layout changes.
- Keep a clear commit/PR description when intentional UI changes are introduced so reviewers can approve baselines quickly.
PR integration
- Add CI step that runs visual tests and reports pass/fail back to PR (status check).
- Block merges on failing visual check unless an approval is present.
- Provide links to the visual report in PR comments automatically.
- Fail-fast: run quick component-level checks first, then full e2e visual suite on merge-to-main schedule to control CI cost.
Metrics & maintenance
- Track false positive rate and time-to-approve; adjust masks and stubs accordingly.
- Periodically prune unused stories/snapshots and rebaseline intentionally on major UI updates.
This setup balances coverage for responsive breakpoints, keeps diffs meaningful, and integrates smoothly into PR validation so the team can catch visual regressions early with minimal noise.
