Visual Regression Testing
Ce que sont les tests de régression visuelle
Les tests de régression visuelle prennent une capture de deux URLs et les comparent pixel par pixel, afin de voir si un déploiement a modifié la page d'une façon que personne n'avait voulue. Ils détectent la catégorie de bug qu'aucun check HTTP ni aucune métrique de performance ne signalera jamais : la page renvoie toujours 200, se charge toujours vite, et s'affiche mal.
Dans LoadFocus, la comparaison se fait entre deux URLs, et non contre un historique enregistré. L'appariement habituel est un domaine de préproduction face à la production : vous demandez donc "est-ce que ma prochaine version ressemble à l'actuelle" plutôt que "cette page a-t-elle dérivé depuis le mois dernier".
Comment fonctionne la comparaison
Chaque test capture les deux URLs et produit une image de comparaison qui met en évidence les différences en rouge, affichée à côté de la capture du résultat pour que vous voyiez les deux côte à côte.
Le fait que le test réussisse dépend du seuil de comparaison que vous choisissez. Le seuil est la proportion de différence en dessous de laquelle les changements sont ignorés : choisissez 10 %, et le test réussit tant que les deux pages diffèrent de moins de 10 %.
Choisir un seuil
Le seuil est un ensemble fixe d'options, et non une valeur libre :
| Seuil | À utiliser quand |
|---|---|
| 0,5 % | La page doit être identique au pixel près ; tout changement doit être signalé |
| 1 % | Quasi identique, en tolérant l'anticrénelage et le bruit de rendu des polices |
| 5 % | Petites zones dynamiques, comme un horodatage ou un badge tournant |
| 10 % (par défaut) | Usage général, quand une partie du contenu varie entre environnements |
| 20 % | Pages avec un bloc dynamique important, comme un fil ou un carrousel |
| 50 % | Seule la mise en page générale compte |
Commencez par la valeur par défaut puis resserrez. Un seuil trop large laisse passer de vraies régressions ; un seuil trop strict fait échouer chaque exécution sur du bruit de rendu et finit par être ignoré, ce qui est pire.
Quand les utiliser
- Avant une mise en production : pointez une URL de préproduction vers l'URL de production correspondante et confirmez que les seules différences sont celles que vous avez livrées volontairement.
- Après une mise à jour CSS ou de dépendances : le change set annonce une ligne, la page rendue n'est pas forcément d'accord.
- Sur les pages à gabarit : quand une modification de gabarit touche de nombreuses URLs d'un coup.
Exécuter les tests depuis Chrome
Une extension Chrome de régression visuelle est disponible et exécute les tests que vous avez déjà définis. Ouvrez l'extension, lancez le test, et la même comparaison pixel par pixel s'effectue sur les pages de ce test.
Ce que la régression visuelle ne vous dit pas
Elle signale que quelque chose a changé d'apparence, pas que quelque chose est cassé, ni pourquoi. Associez-la au reste de la suite de surveillance :
- Surveillance des performances web pour savoir si la page est rapide.
- Browser checks pour savoir si le parcours aboutit toujours.
- Opportunités Lighthouse pour savoir quoi corriger quand elle est lente.
FAQ
Qu'est-ce qu'un test de régression visuelle ?
C'est le fait de capturer une page et de la comparer pixel par pixel à une autre version de cette page, afin que les changements visuels involontaires soient détectés avant que les utilisateurs ne les voient.
À quoi LoadFocus compare-t-il ?
À deux URLs que vous choisissez, généralement un domaine de préproduction face à la page de production correspondante, et non à un historique de référence enregistré.
Comment éviter que de petites différences de rendu fassent échouer chaque exécution ?
Augmentez le seuil de comparaison. C'est la proportion de différence en dessous de laquelle les changements sont ignorés, et la valeur par défaut est 10 %.
Quels seuils puis-je choisir ?
Six valeurs prédéfinies : 0,5 %, 1 %, 5 %, 10 %, 20 % et 50 %. La valeur par défaut est 10 %.
Comment les différences sont-elles affichées ?
Une image de comparaison est affichée à côté de la capture du résultat, les zones différentes surlignées en rouge, pour que vous voyiez les deux versions côte à côte.
Puis-je exécuter des tests de régression visuelle depuis le navigateur ?
Oui. L'extension Chrome de régression visuelle exécute les tests que vous avez déjà définis et renvoie la même comparaison pixel par pixel.