Test de régression visuelle
Ce qu'est le test de régression visuelle, comment la comparaison de captures détecte les bogues d'interface et les pièges courants.
Le test de régression visuelle est une méthode de test automatisé qui détecte les modifications non voulues de l'apparence d'une interface. Il capture des images de pages ou de composants, les compare à des images de référence approuvées, et signale pour examen toute différence au-delà d'un seuil défini.
Les tests fonctionnels vérifient qu'un bouton fonctionne. Les tests visuels vérifient qu'il présente toujours le bon aspect : position, couleur, taille, police et espacement corrects. Une modification CSS dans un fichier partagé peut décaler les mises en page de nombreuses pages, et les tests visuels rendent ces effets de bord visibles avant la mise en production. Les équipes les exécutent dans l'intégration continue, souvent avec Playwright, des extensions basées sur Cypress ou des services dédiés aux tests visuels.
Fonctionnement du test de régression visuelle
- Rendre chaque page ou composant dans un navigateur contrôlé, à des tailles de fenêtre d'affichage fixes.
- Capturer les écrans et les enregistrer comme références après examen.
- À chaque modification, capturer de nouveau dans les mêmes conditions.
- Comparer les nouvelles images avec les références et produire des images de différences.
- Un relecteur accepte les changements voulus, qui deviennent les nouvelles références, ou corrige les bogues.
Où le test de régression visuelle est utilisé
- Systèmes de design et bibliothèques de composants.
- Sites marketing avec de nombreux gabarits.
- Applications web qui reçoivent fréquemment des mises à jour CSS ou de dépendances.
- Contrôles multinavigateurs sur Chromium, Firefox et WebKit.
Différence de pixels ou différence perceptuelle
La différence de pixels compare les valeurs de couleur à chaque position et compte les écarts. Elle est exacte, mais sensible à l'anticrénelage et au rendu des polices. La différence perceptuelle, comme la comparaison basée sur le SSIM, mesure les changements de structure et de contraste tels qu'un visiteur les remarquerait, ce qui réduit les fausses alertes. Beaucoup d'outils combinent une différence de pixels avec une tolérance et des zones masquées.
Erreurs courantes
- Créer les références sur un système d'exploitation et les comparaisons sur un autre, ce qui modifie le rendu des polices.
- Laisser des dates, des publicités ou des animations dans la zone capturée.
- Accepter des différences sans les examiner, ce qui transforme des bogues en références.
- Ne tester qu'une seule taille de fenêtre d'affichage.
Vous refaites les mêmes captures encore et encore ?
Pour des contrôles visuels manuels sans suite de tests, Website Capture de Temposhot capture une liste d'URL à des tailles d'appareil fixes, et l'outil Compare Images met en évidence les différences entre deux captures. Consultez l'automatisation des captures de sites web.
Questions fréquentes
Le test de régression visuelle remplace-t-il les tests fonctionnels ?
Non. Il contrôle l'apparence. Les tests fonctionnels contrôlent toujours le comportement.
Comment réduire les faux positifs ?
Figez le contenu dynamique, utilisez le même environnement pour chaque exécution, et masquez les zones qui changent volontairement.
Sources
Ressources associées
- Comparer des images : comparer deux captures d'écran dans le navigateur.
- Options de Website Capture : réglages d'appareil et d'attente.
- Tâches et résultats : examiner une exécution de capture.
Vous prenez toujours les mêmes captures d'écran ?
Temposhot capture un écran, une fenêtre ou une zone à intervalles programmés et exporte l'ensemble en PDF, en images, en ZIP ou en MP4. Les outils gratuits du navigateur ne permettent de traiter qu'une image à la fois.
Ressources associées
Termes associés
- Comparaison de captures d'écranCe qu'est la comparaison de captures d'écran, le fonctionnement de la comparaison visuelle et les usages en assurance qualité.
- PlaywrightCe qu'est Playwright, comment il réalise des captures d'écran multinavigateurs et comment il se compare à Puppeteer pour l'automatisation.
- Navigateur sans interfaceCe qu'est un navigateur sans interface, comment il sert aux captures automatisées et les pièges courants.
- Capture avant-aprèsComment fonctionnent les paires de captures avant-après, où elles sont utilisées et comment réaliser des comparaisons efficaces.
- Capture responsiveCe qu'est une capture responsive, les tailles de fenêtre d'affichage courantes et les erreurs à éviter lors des captures sur plusieurs appareils.