Initial commit

2025-11-30 08:27:38 +08:00
commit a557bacc01
4 changed files with 209 additions and 0 deletions
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "leapmultix-skill-testing-visual-regression",
+  "description": "Skill testing-visual-regression from LeapMultix",
+  "version": "1.0.0",
+  "author": {
+    "name": "Julien LE SAUX",
+    "email": "contact@jls42.org"
+  },
+  "skills": [
+    "./skills"
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+# leapmultix-skill-testing-visual-regression
+
+Skill testing-visual-regression from LeapMultix
--- a/plugin.lock.json
+++ b/plugin.lock.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/skills/testing-visual-regression",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "e7b9e46c170a256831498c809dbf4b76c075ee1c",
+    "treeHash": "5eb26945bad379635c52bb007776b7b10d1345eaebcb66207837b79b281d8b18",
+    "generatedAt": "2025-11-28T10:19:15.369614Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "leapmultix-skill-testing-visual-regression",
+    "description": "Skill testing-visual-regression from LeapMultix",
+    "version": "1.0.0"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "cdd9dceb68dcc72527fbc4fe4ae59c3d84f078738435703a8f76d3f1cd609c27"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "d93f926748b10a5143f1175888671d3de77b68fb8d5a2062185888288f97519e"
+      },
+      {
+        "path": "skills/testing-visual-regression/SKILL.md",
+        "sha256": "56bbd2d309c27b88b22a466d86ba5e28c2e91f3c8c99731ae83a80aa970b3aee"
+      }
+    ],
+    "dirSha256": "5eb26945bad379635c52bb007776b7b10d1345eaebcb66207837b79b281d8b18"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}
--- 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)