Qu’est-ce que le test de régression visuelle ?
Le test de régression visuelle compare des captures d’écran d’une interface à des images de référence précédemment approuvées pour détecter les changements visuels involontaires. Il trouve des bugs que les tests de code manquent, comme un bouton déplacé, un texte qui déborde ou une mise en page mobile cassée.
Comment ça marche
La méthode comporte quatre étapes, répétées à chaque modification.
- Référence : prenez des captures des pages dans leur état approuvé.
- Comparaison : après un changement, capturez les mêmes pages aux mêmes tailles et comparez-les pixel par pixel.
- Seuil : fixez une limite sur la part de pixels modifiés pour que de minuscules différences ne comptent pas comme des échecs.
- Approbation : si le changement est voulu, la nouvelle image devient la référence ; sinon, corrigez le bug.
Pourquoi en avoir besoin
Les tests unitaires disent qu’une fonction renvoie la bonne valeur, pas que la page a le bon aspect. Une modification de CSS peut casser la mise en page d’une page que personne n’a touchée. Ces effets de bord sont plus fréquents quand des agents de codage modifient l’interface, car l’agent travaille en général sans voir l’écran.
Réduire les faux positifs
Un test bruyant finit vite par être ignoré, donc une configuration stable compte.
- Désactivez les animations et les transitions.
- Figez les données changeantes comme les dates, les heures et le contenu aléatoire.
- Attendez le chargement des polices et capturez toujours sur le même navigateur et le même système d’exploitation.
- Testez à plusieurs tailles, comme mobile, tablette et bureau.
Les outils
Parmi les choix courants : l’assertion toHaveScreenshot de Playwright, des outils open source comme BackstopJS, et des services hébergés comme Percy ou Chromatic. Tous reposent sur la même idée : une image de référence, une nouvelle image et une image de diff qui met en évidence ce qui a changé.
La comparaison visuelle dans AgentVera
L’onglet Preview d’AgentVera lance des comparaisons visuelles sur le serveur de développement du projet et de chaque worktree.
- Des captures pleine page des pages de votre choix sont prises en Mobile (375×812), Tablet (768×1024) et Desktop (1440×900) ; jusqu’à 6 tailles peuvent être définies.
- Vous définissez une référence ; les captures suivantes sont comparées pixel par pixel et les pixels modifiés sont marqués en rouge. Le seuil par défaut est de 0,1 % des pixels.
- Le bouton de test avec un agent ouvre un agent Claude dans ce worktree avec le navigateur AgentVera ; il ouvre chaque page à chaque point de rupture et cherche débordements, mises en page cassées, erreurs de console et liens morts.
FAQ
Le test de régression visuelle est-il la même chose que le snapshot testing ?
Idée proche, cible différente. Les tests de snapshot comparent en général le HTML ou le texte produit par un composant ; les tests de régression visuelle comparent de vraies captures d’écran.
Pourquoi les comparaisons de pixels donnent-elles de faux échecs ?
Le rendu des polices, l’anticrénelage, les animations et les contenus changeants peuvent décaler quelques pixels. Un seuil et un environnement stable réduisent ce bruit.
Quelles pages tester ?
Commencez par les plus utilisées et les plus fragiles : la page d’accueil, la connexion, le paiement ou les formulaires. Capturez chacune à plusieurs tailles d’écran.