Initial commit

2025-11-30 08:26:45 +08:00
commit f79d7f0f9e
16 changed files with 1710 additions and 0 deletions
--- a/skills/testing-visual-regression/SKILL.md
+++ b/skills/testing-visual-regression/SKILL.md
@@ -0,0 +1,149 @@
+---
+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)