testing-visual-regression
Visual regression tests for canvas games and responsive UI. Use after canvas modifications, CSS changes, or adding new arcade games
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- GitHub stars: 1
- Updated: 2025-11-21
Download the latest version (v1.0.0) from this page.
SKILL.md
--- 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)