Visual Regression Testing

Visual regression testing catches the changes your other tests miss entirely: the button that shifted 3 pixels left, the font that reverted to a default, the modal overlay that now obscures the submit action. These bugs don’t throw errors — they silently degrade user experience until someone notices.

---

How Visual Regression Testing Works

1. Capture baseline screenshots (approved UI state)
2. Code change is made
3. Capture new screenshots (same viewports, same state)
4. Pixel-by-pixel comparison (or perceptual diff)
5. If differences detected:
   → Show diff overlay to reviewer
   → If intentional: Update baseline
   → If unintentional: Fix the regression

---

Approaches

Approach	Scope	Speed	Accuracy	Best For
Screenshot comparison	Full page	Medium	High	Page-level regressions
Component snapshot	Single component	Fast	High	Design system components
DOM snapshot	HTML structure	Fast	Medium	Structural changes, not visual
Perceptual diff	Full page (AI-powered)	Slow	Highest	Ignoring anti-aliasing noise

---

Tool Comparison

Tool	Integration	Cloud Service	Free Tier	Best For
Percy (BrowserStack)	Playwright, Cypress, Storybook	Yes	5K screenshots/mo	Teams wanting managed service
Chromatic	Storybook	Yes	5K snapshots/mo	Storybook-based design systems
Applitools	Selenium, Playwright, Cypress	Yes	Limited	AI-powered visual comparison
Playwright Screenshots	Playwright	No (self-hosted)	Unlimited	Teams wanting zero cost
BackstopJS	Puppeteer	No (self-hosted)	Unlimited	Simple screenshot regression
Loki	Storybook	No (self-hosted)	Unlimited	CI-friendly Storybook testing

---

Screenshot Stability Techniques

Instability Source	Mitigation
Dynamic dates/times	Mock Date.now(), freeze time in tests
Animations	Disable CSS animations, set prefers-reduced-motion
Loading spinners	Wait for network idle before capture
Random content	Seed random generators, mock API responses
Cursor blink	Hide cursor via CSS in test mode
Font loading	Wait for fonts to load, use document.fonts.ready
Third-party widgets	Hide or mock external embeds
Scrollbar differences	Use overflow: hidden or consistent OS settings

---

Viewport Strategy

Breakpoint	Width	Device Category
Mobile S	320px	Small phone
Mobile M	375px	iPhone, standard Android
Mobile L	425px	Large phone
Tablet	768px	iPad, Android tablet
Laptop	1024px	Small laptop
Desktop	1440px	Standard desktop
Wide	1920px	Full HD monitor

---

Design System + Component Testing

Storybook stories:
    Button/Primary → Screenshot at all states (default, hover, disabled, loading)
    Button/Secondary → Screenshot at all states
    Card/Default → Screenshot at all viewports
    Modal/Open → Screenshot with content variants

Every PR:
    → Chromatic captures all stories
    → Diffs flagged for review
    → Designer approves or rejects

Interaction States to Capture

Component	States to Screenshot
Button	Default, hover, active, focus, disabled, loading
Input	Empty, filled, error, disabled, focused
Modal	Open, with content, with scrolling
Dropdown	Closed, open, with selection, with search
Table	Empty, few rows, many rows, with sorting indicator
Toast/Alert	Each type (success, error, warning, info)

---

Diff Review Workflow

Diff Size	Action
0 changes	Auto-approve, merge freely
< 5 diffs	Quick developer review, approve if intentional
5-20 diffs	Developer + designer review
> 20 diffs	Likely a global CSS change — verify scope, bulk approve if correct
Anti-aliasing diffs only	Configure threshold tolerance (0.1% pixel diff)

---

Anti-Patterns

Anti-Pattern	Problem	Fix
Screenshotting dynamic content	Constant false positives	Mock all dynamic data
No review workflow	Diffs pile up, baselines go stale	Block PR on unreviewed visual changes
Testing every page at every viewport	Thousands of screenshots, slow CI	Focus on critical pages + design system components
Pixel-perfect threshold at 0%	Any anti-aliasing difference fails	Set tolerance to 0.05-0.1%
Ignoring dark mode	Regressions only caught for light theme	Test both themes

---

Checklist

• Visual regression tool selected and integrated with CI
• Baseline screenshots established for critical pages
• Design system components tested via Storybook + Chromatic/Percy
• Dynamic content mocked for screenshot stability
• Animations disabled in test mode
• All standard viewports covered (mobile, tablet, desktop)
• Interaction states captured (hover, focus, error, loading)
• Review workflow: visual diffs block PR until approved
• Dark mode/light mode both tested
• Baseline update process documented

---

:::note[Source] This guide is derived from operational intelligence at Garnet Grid Consulting. For frontend testing consulting, visit garnetgrid.com. :::