Tests de Régression Visuelle

What problem does it solve?

Visual bugs like misaligned elements, incorrect colors, or broken responsive layouts often go unnoticed by traditional unit tests, leading to a degraded user experience. This Skill automates visual regression testing, capturing screenshots across different viewports to detect unintended UI changes.

Core Features & Use Cases

• Automated Screenshot Comparison: Compares current UI screenshots against baselines, highlighting pixel-level differences to ensure visual consistency.
• Multi-Viewport Testing: Supports testing across desktop, tablet, and mobile viewports (e.g., 1920x1080, 768x1024, 375x667) for comprehensive coverage.
• Game Canvas Validation: Specifically designed to detect visual regressions in dynamic canvas-based arcade games, ensuring game graphics remain perfect.
• Use Case: After a CSS refactor or adding a new arcade game, activate this Skill. It will automatically take screenshots, compare them to approved baselines, and generate a report showing any visual discrepancies, ensuring your UI remains pixel-perfect across all devices.

Quick Start

1. Ensure Playwright is installed and configured.

2. Run visual tests:

npm run test:visual

3. Review the generated HTML report for visual diffs (baselines/, current/, diffs/).

4. If changes are intentional, update baselines:

npm run test:visual --update-snapshots