# Visual Testing Advanced

Advanced visual regression testing with pixel-perfect comparison, AI-powered diff...

- Repository: https://github.com/proffesor-for-testing/agentic-qe (521 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -g -a claude-code -y`
Codex: `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -g -a codex -y`
Cursor: `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -g -a cursor -y`
Gemini CLI: `npx skills add proffesor-for-testing/agentic-qe --skill visual-testing-advanced -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add proffesor-for-testing/agentic-qe`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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`.

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

The rest: https://github.com/proffesor-for-testing/agentic-qe/blob/HEAD/.claude/skills/visual-testing-advanced/SKILL.md