Advanced Visual Testing

<default_to_action> When detecting visual regressions or validating UI:

1. CAPTURE baseline screenshots (first run establishes baseline)
2. COMPARE new screenshots against baseline (pixel-by-pixel or AI)
3. MASK dynamic content (timestamps, ads, user counts)
4. TEST across devices (desktop, tablet, mobile viewports)
5. REVIEW and approve intentional changes, fail on regressions

Quick Visual Testing Steps:

• Set up baseline on main branch
• Compare feature branch against baseline
• Mask dynamic elements (timestamps, avatars)
• Use AI-powered comparison to reduce false positives
• Integrate in CI/CD to block visual regressions

Critical Success Factors:

• Functional tests don't catch visual bugs
• AI-powered tools reduce false positives
• Review diffs, don't just auto-approve </default_to_action>

Quick Reference Card

When to Use

• UI component changes
• CSS/styling modifications
• Responsive design validation
• Cross-browser consistency checks

Visual Bug Types

Bug Type	Description
Layout shift	Elements moved position
Color change	Unintended color modification
Font rendering	Typography issues
Alignment	Spacing/alignment problems
Missing images	Broken image paths
Overflow	Content clipping

Comparison Algorithms

Algorithm	Best For
Pixel diff	Exact match requirement
Structural similarity	Handle anti-aliasing
AI semantic	Ignore insignificant changes

---

PRIMARY PATH: qe-browser visual-diff

Most visual regression work should go through the qe-browser fleet skill. It wraps Vibium (WebDriver BiDi) and provides pixel-diff against stored baselines with threshold enforcement and diff-image output. See .claude/skills/qe-browser/SKILL.md.

# Navigate
vibium go https://example.com
vibium wait load