---
name: testing-visual-regression
description: Visual regression tests for canvas games and responsive UI. Use after canvas modifications, CSS changes, or adding new arcade games
allowed-tools: Read, Grep, Glob, Bash, WebSearch
---

# Tests de Régression Visuelle

Détecte régressions visuelles dans jeux canvas et UI responsive via captures automatiques.

## Table des matières

- [Quand utiliser](#quand-utiliser)
- [Ce que les tests visuels détectent](#ce-que-les-tests-visuels-détectent)
- [Architecture](#architecture)
- [Outils et Configuration](#outils-et-configuration)
- [Tests essentiels](#tests-essentiels)
- [Gestion des faux positifs](#gestion-des-faux-positifs)
- [Debugging](#debugging)
- [Workflow](#workflow)
- [Checklist](#checklist)
- [En cas de doute](#en-cas-de-doute)

## Quand utiliser

- Modifications code canvas (jeux arcade)
- Changements CSS ou styles
- Ajout nouveau jeu arcade
- Avant release majeure
- Bugs visuels reportés
- Modifications thèmes

## Ce que les tests visuels détectent

**Tests unitaires NE détectent PAS:**

- Sprites mal positionnés/manquants
- Couleurs incorrectes
- Animations cassées
- Éléments mal alignés
- Responsive breakpoints cassés
- Thèmes mal appliqués

## Architecture

**Structure :**

- `baselines/` - Images de référence
- `current/` - Captures actuelles
- `diffs/` - Différences visuelles

**Viewports :**

- Desktop: 1920×1080
- Tablet: 768×1024
- Mobile: 375×667

Trouve structure tests visuels dans projet.

## Outils et Configuration

**Outils :** Playwright (visual testing intégré)

**Configuration clés :**

- Répertoire tests visuels
- Timeout canvas
- Retry sur timing
- Base URL serveur local
- Viewports configurés

Trouve ou crée configuration Playwright.

## Tests essentiels

**Jeux arcade (par jeu):**

- Écran démarrage
- Gameplay + action
- Game over
- États spécifiques

**UI responsive (par composant):**

- Dashboard, TopBar, Customization
- Chaque viewport (desktop, tablet, mobile)
- États interactifs (menus, toggles)

**Tolérance :**

- UI statique: maxDiffPixels 50-100
- Canvas animé: maxDiffPixels 200-300
- Responsive: maxDiffPixels 100

## Gestion des faux positifs

- **Animations :** Pause avant capture
- **Contenu dynamique :** Masquer avec option mask
- **Fonts :** Font smoothing cohérent

## Debugging

**Outils :**

- Rapport HTML (diffs visuels)
- Mode UI interactif (meilleur debug)
- Inspection manuelle diffs

**Images générées :**

- baseline (référence)
- actual (capture)
- diff (différences en rouge)

## Workflow

1. **Setup :** Installe Playwright, crée structure dossiers
2. **Tests arcade :** Start, gameplay, gameover
3. **Tests UI :** Tous viewports, états interactifs
4. **CI/CD :** Ajoute stage, bloque merge si régressions
5. **Review :** Examine diffs manuellement

## Checklist

- [ ] Desktop tests passent (1920×1080)
- [ ] Tablet tests passent (768×1024)
- [ ] Mobile tests passent (375×667)
- [ ] Baselines mises à jour (si intentionnel)
- [ ] Baselines commitées descriptif
- [ ] Pas de faux positifs
- [ ] Tolérance appropriée
- [ ] Diffs reviewed manuellement

## En cas de doute

**Règles absolues :**

1. Tests visuels OBLIGATOIRES après mods visuelles
2. Review manuellement TOUS diffs
3. Update baselines uniquement si intentionnel
4. Tolérance adaptée : statique strict, animé plus souple
5. Debug avec UI interactif
6. Baselines avec messages descriptifs

**Référence :**

- Structure baselines/ existante
- Scripts npm visual-testing
- Diffs générés (baseline/actual/diff)