From a557bacc018b3c1952f6eac08962c5fd4777f783 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:27:38 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 ++ README.md | 3 + plugin.lock.json | 45 +++++++ skills/testing-visual-regression/SKILL.md | 149 ++++++++++++++++++++++ 4 files changed, 209 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 plugin.lock.json create mode 100644 skills/testing-visual-regression/SKILL.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..744b1d3 --- /dev/null +++ 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" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..ae6e67b --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# leapmultix-skill-testing-visual-regression + +Skill testing-visual-regression from LeapMultix diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..3badd0c --- /dev/null +++ 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": [] + } +} \ No newline at end of file diff --git a/skills/testing-visual-regression/SKILL.md b/skills/testing-visual-regression/SKILL.md new file mode 100644 index 0000000..2f015ac --- /dev/null +++ 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)