motion-visual-regression

motion-visual-regression

Catalogue généré le 2026-05-11

En une phrase

MettreMet en place des tests visuels Playwright (Playwrightgolden screenshots) pour stabiliserdétecter automatiquement quand une animation casse ou quand un composant change visuellement sans qu'on le motion et détecter les régressions en CI.veuille.

Quand l'utiliser

• VoirSur laun descriptionprojet ci-dessusoù les régressions visuelles coûtent cher (site client, portfolio public)

Quand une équipe travaille à plusieurs et laqu'on sectionveut «un Pourfilet allerde plussécurité loinen ».CI Après avoir polish un motion system pour figer le rendu attendu Quand on a déjà eu un bug "ça marche en local mais pas en prod" sur du visuel Sur les pages critiques d'un site (hero, checkout, formulaires)

Comment l'invoquer

• Slash command : /motion-visual-regression (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour stabiliser le motion et détecter les régressions visuelles

PourDescription aller plus loin

Animation Testing & Visual Regression

Objectifdétaillée

DétecterL'idée régressions: visuelles/motionPlaywright sansprend flakiness.une capture d'écran de référence (le "golden") quand tout va bien, puis à chaque commit il recompare la page actuelle à la référence. Si les pixels diffèrent au-delà d'un seuil, le test échoue et tu sais qu'un changement de CSS ou un refactor a impacté le visuel.

Procédure

Ce

skill Installerinstalle PlaywrightPlaywright, Goldenécrit screenshots:deux premiers tests toHaveScreenshot() (un état idle + un état stable Déterminisme:après animation), puis t'arme contre la "flakiness" — c'est-à-dire les faux positifs où le test échoue sans raison à cause d'une animation qui n'est pas finie au moment de la capture. Pour ça il propose de désactiver les animations pendant les tests, de masquer les zones dynamiques (timestamp, données live), et de fixer des seuils de tolérance pixel pertinents.

Tu repars avec des scripts npm prêts à lancer, deux tests qui fonctionnent dès le premier npx playwright test, et un set de recommandations pour éviter que ta suite de tests visuels devienne un cauchemar à maintenir. Pour Thymon : utile si besoin,tu masquerdéploies dynamique

souvent Ajouteret seuils/masquesque tu veux dormir tranquille la nuit, moins pertinent sur un projet perso en CIsolo où

Outputstu attendus

vois

tout Scriptsde npmsuite 2si testsquelque toHaveScreenshot()chose Recos anti-flakiness

Hints

Install: npm i -D @playwright/test casse.

Source

• Plugin : perso (standalone)
• Nom interne : motion-visual-regression
• Fichier : /home/thymon/.claude/skills/motion-visual-regression/SKILL.md