Régression visuelle (comparaison screenshots)

Un moniteur HTTP classique dit "le serveur répond 200 OK", mais il ne sait pas que le fichier CSS principal n'a pas pu se charger et que le site s'affiche de manière cassée. Le contrôle visuel (en anglais visual regression) prend une capture de la page et la compare à une capture de référence (baseline) - il détecte les changements visuels même lorsque le serveur affirme que tout va bien.

Le contrôle visuel est disponible dans les forfaits Pro et Business.

Comment ça marche

1. Lors de la première activation du contrôle visuel, une capture de référence (baseline) est prise - la référence à laquelle tout est comparé par la suite.
2. À chaque vérification suivante, nous prenons une nouvelle capture et la comparons à la baseline pixel par pixel.
3. Si la différence dépasse le seuil configuré (5 % par défaut), le moniteur est marqué comme modifié et vous recevez une alerte.
4. Dans le détail du moniteur, vous voyez la baseline et la capture actuelle côte à côte, ainsi que les zones de différence mises en évidence.

Quand l'utiliser

• Après le déploiement d'une nouvelle version du site - détecte automatiquement les polices, le CSS ou la mise en page cassés
• Pour les pages d'atterrissage marketing - pour savoir que la balise GA et les autres éléments n'ont pas bougé
• Pour les boutiques en ligne - vérifier que le bouton "Ajouter au panier" est toujours visible
• Pour les pages de statut - pour savoir que votre propre page de statut s'affiche correctement

Configuration

1. Lors de la création d'un moniteur, sélectionnez le type Contrôle visuel - la première capture est automatiquement enregistrée comme baseline
2. Dans le détail du moniteur, dans la section Contrôle visuel, vous voyez la capture de référence, la capture actuelle et les différences mises en évidence
3. Vous réglez la limite de changement avec le curseur Limite de changement visuel (de 0,5 à 30 %, 5 % par défaut)
4. Après chaque déploiement d'une nouvelle version, mettez à jour la baseline avec le bouton Définir l'actuelle comme référence

Attention aux fausses alertes

• Date et heure sur la page - chaque vérification les affiche différemment. Après avoir déployé un tel changement, actualisez toujours la baseline.
• Publicités et bannières - elles tournent entre les captures et provoquent souvent une fausse alerte. Le contrôle visuel fonctionne mieux sur les pages sans publicité.
• Animations - la première et la capture suivante peuvent différer. Le contrôle visuel attend 1,5 seconde après le chargement pour que l'animation se stabilise.