Visual regression (comparaison de captures d'écran)

5 min de lecture

Le moniteur HTTP classique dit "le serveur répond 200", mais ne sait pas que le fichier CSS principal n'a pas été chargé et que le site s'affiche cassé. Visual regression prend une capture d'écran et la compare avec une baseline - détecte les changements visuels même quand le serveur dit OK.

Comment cela fonctionne

1. Lors du premier enable de visual regression, une capture baseline (référence) est prise.
2. À chaque vérification suivante, une nouvelle capture est prise et comparée pixel par pixel avec la baseline.
3. Si la différence dépasse le seuil (par défaut 5 %), le moniteur est marqué comme changed et vous recevez une alerte.
4. Dans le détail du moniteur, vous voyez la baseline et la capture actuelle côte à côte + diff overlay.

Quand l'utiliser

• Après les déploiements - détecte automatiquement les fontes cassées, CSS, layout
• Pour les landing pages marketing - pour savoir que le tag GA n'a pas perdu sa position
• Pour les e-shops - vérification que le bouton "Ajouter au panier" est toujours visible
• Pour les status pages - pour savoir que votre propre status page se rend

Configuration

1. Dans le détail du moniteur, allez à l'onglet Visual regression
2. Cliquez sur Enable - la baseline est créée (10-30 secondes)
3. Facultativement, définissez le seuil (1-20 %, par défaut 5 %)
4. Après le déploiement, mettez à jour la baseline via Refresh baseline

Attention aux faux positifs

• Date / heure sur la page - chaque vérification les rend différemment. Soit ignorez, soit définissez un CSS selector mask.
• Publicités / bannières - tournent entre les chargements. Maskez le domaine du fournisseur publicitaire.
• Animations - premier frame vs suivant. Visual regression attend 2 s après le load pour que l'animation se stabilise.
• Cookie banner - toujours auto-accepté, mais reste parfois visible. Ajoutez une règle CSS via user-config.