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 au copilot 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. 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.
6. Exécutez votre Test Case : Cliquez sur “Exécuter” et attendez que l'étape Comparaison visuelle s'exécute.
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 Viewport pour valider une section précise (header, carte de tarification, modale) sans le contexte de la page complète.