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 : une image des fichiers de test du projet, ou un fichier téléchargé par une étape précédente.
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. Choisissez votre image de référence : Dans le champ Image à comparer, cliquez sur le trombone (Joindre un fichier) pour sélectionner une image parmi les fichiers de test du projet, ou pour en téléverser une nouvelle. Il s'agit de l'image “attendue”. Les formats pris en charge sont JPG, JPEG, GIF, BMP et PNG, et l'image doit faire moins de 10 mégapixels. Vous pouvez aussi saisir la variable d'un fichier téléchargé par une étape précédente, par exemple [DOWNLOADED_FILE_1].
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 cas de test : 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 que la mise en page du formulaire de connexion, les champs et le bouton correspondent au design. » 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 ; indiquer que la différence est attendue permet de garder une comparaison pertinente.
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 de connexion est passée du bleu au 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 ce qui a changé
Sévérité : High
Vous pouvez ainsi passer directement du rapport d'exécution au bug visuel concerné, sans avoir à parcourir un diff pleine page.
Vue d'ensemble et Focus : Lorsque l'étape détecte des différences, le panneau de résultat de l'exécution propose deux vues.
Vue d'ensemble affiche l'image de référence et la page réelle côte à côte, avec un cadre numéroté sur chaque différence.
Focus affiche chaque différence recadrée en taille réelle, avec son numéro et son titre. Utilisez cette vue pour lire une petite différence.
Cliquez sur un cadre numéroté dans Vue d'ensemble pour ouvrir cette différence dans Focus. Lorsque vous sélectionnez une différence dans la liste des étapes, Focus affiche uniquement cette différence. Au-dessus des images, le panneau affiche aussi les Instructions IA utilisées par l'étape, et le résumé de la comparaison lorsqu'il existe.
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.