| name | visual-testing-advanced |
| description | Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency. |
| category | specialized-testing |
| priority | high |
| tokenEstimate | 900 |
| agents | ["qe-visual-tester","qe-test-executor","qe-quality-gate"] |
| implementation_status | optimized |
| optimization_version | 1 |
| last_optimized | 2025-12-02T00:00:00.000Z |
| dependencies | [] |
| quick_reference_card | true |
| tags | ["visual","regression","screenshot","pixel-diff","percy","playwright","responsive"] |
Advanced Visual Testing
<default_to_action>
When detecting visual regressions or validating UI:
- CAPTURE baseline screenshots (first run establishes baseline)
- COMPARE new screenshots against baseline (pixel-by-pixel or AI)
- MASK dynamic content (timestamps, ads, user counts)
- TEST across devices (desktop, tablet, mobile viewports)
- 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 |
Visual Regression with Playwright
import { test, expect } from '@playwright/test';
(, ({ page }) => {
page.();
(page).();
});
(, ({ page }) => {
page.({ : , : });
page.();
(page).();
page.({ : , : });
(page).();
});
