Vous pouvez ajouter une étape de Comparaison Visuelle pour détecter les régressions visuelles en comparant une capture d'écran de votre page à une image de référence que vous avez téléversée.
Guide étape par étape
1. Accédez à votre cas de test : Ouvrez le cas de test auquel vous souhaitez ajouter la vérification visuelle.
2. Créez une nouvelle étape : Cliquez sur le bouton “Ajouter une nouvelle étape”, ou demandez à Thunders AI d'en ajouter une.
3. Choisissez le type d'étape Comparaison Visuelle : Dans le menu déroulant “Type d’étape”, sélectionnez “Comparaison Visuelle”.
4. Téléversez votre image de référence : Glissez-déposez ou parcourez pour sélectionner la capture d'écran que Thunders devra utiliser pour la comparaison. Il s'agit de l'image “attendue”.
5. Ajoutez des Instructions IA (facultatif) : Dans le champ Instructions IA, décrivez en langage naturel ce que la comparaison doit vérifier et ce qu'elle doit ignorer — par exemple « Vérifie le header et la barre de navigation ; ignore l'horodatage. » Laissez-le vide pour comparer l'image entière à la référence (comportement par défaut). Le champ accepte jusqu'à 1 000 caractères, et vous pouvez le modifier plus tard puis relancer l'étape.
6. Choisissez la portée de la comparaison :
Page complète: Thunders capture l'intégralité de la page défilable et la compare à votre référence. Utilisez cette option lorsque la différence qui vous intéresse peut apparaître n'importe où sur la page, y compris sous la ligne de flottaison.
Zone visible : Thunders ne capture que la partie visible de la fenêtre du navigateur. Utilisez cette option lorsque vous voulez uniquement vérifier ce qui est à l'écran.
Thunders permet également de comparer une image de référence Page complète à une capture Zone visible : le système reconnaît le viewport comme une portion de la page complète et ne signale que les différences situées dans la zone de chevauchement.
7. Exécutez votre Test Case : Cliquez sur “Exécuter” et attendez que l'étape Comparaison visuelle s'exécute.
Orienter la comparaison avec les Instructions IA
Le champ Instructions IA vous permet d'indiquer, avec vos propres mots, ce qui compte dans la comparaison, afin qu'elle signale les différences qui vous intéressent au lieu de relever chaque pixel modifié. Il est facultatif (jusqu'à 1 000 caractères) et modifiable à tout moment.
Cibler une zone — « Vérifie la mise en page du formulaire de connexion, les champs et le bouton. » Seule cette zone est évaluée ; les différences ailleurs sont ignorées.
Ignorer le contenu dynamique — « Ignore les horodatages, les avatars et tous les chiffres variables des cartes du tableau de bord. » Ces régions ne sont pas signalées ; tout le reste est comparé. C'est le meilleur moyen d'éviter que des données dynamiques ne provoquent de fausses différences.
Combiner ciblage et exclusion — « Vérifie la barre de navigation et le header. Ignore la bannière marketing. »
Comparer des écrans volontairement différents — « Il s'agit d'une refonte ; la mise en page différera de l'ancienne version. Confirme que le nouveau design est en place. » Si vous laissez les Instructions IA vides et que votre référence ressemble à un écran totalement différent de la page en direct, l'étape signale une non-correspondance complète et vous invite à vérifier l'image de référence.
Astuce : Plus vos instructions sont précises, plus le résultat est ciblé. Une consigne vague comme « assure-toi que ça a l'air bien » revient à une comparaison complète.
Lire le résultat de la comparaison
Lorsqu'une étape Comparaison visuelle se termine, le résultat est l'un des deux ci-dessous.
Correspondance visuelle : Les deux captures sont visuellement équivalentes. L'étape réussit sans générer de rapport de bug.
Différence visuelle : Thunders a détecté des différences visuelles entre la référence et la capture réelle. Vous verrez un rapport de bug par région qui diffère, contenant :
Un titre décrivant ce qui a changé (par exemple : « La couleur du bouton login a changé sa couleur bleue en rouge »)
Un champ Attendu décrivant ce que montre l'image de référence dans cette région
Un champ Constaté décrivant ce qu'affiche la page en direct
Une image de diff recadrée sur la région qui diffère, pour que vous puissiez voir exactement où et quoi a changé
Severité : Critical
Vous pouvez ainsi passer directement du rapport d'exécution au bug visuel concerné, sans avoir à parcourir un diff pleine page.
Cas d'usage courants
Tests de régression visuelle : Vérifier que la mise en page et le style d'une page n'ont pas changé de manière inattendue après un déploiement.
Vérifications inter-environnements : Comparer une page de staging à une référence de production pour détecter les problèmes de rendu spécifiques à un environnement.
Vérifications UI ciblées : Utiliser le mode Zone visible pour valider une section précise (header, carte de tarification, modale) sans le contexte de la page complète.