La Régression Visuelle compare votre page en ligne avec une capture d'écran approuvée précédemment (la référence) et signale toute différence. Score 100 = rien n'a changé. Des scores plus bas = de vraies différences détectées.
Vous pouvez exécuter des tests de régression à la demande, ou configurer un moniteur qui les exécute automatiquement selon une planification et vous envoie un e-mail lorsque quelque chose change.
Test de régression ponctuel
- Admin WP → QAProof → Tests → onglet Visual Regression.
- Saisissez l'URL de la page.
- Cliquez sur Run Test. Lors de la première exécution pour cette URL, le système capture une référence. À chaque exécution suivante, il compare avec cette référence.
Pour une surveillance automatisée à long terme, utilisez plutôt un Moniteur — il fait la même chose selon une planification.
Configurer un moniteur
- Admin WP → QAProof → Monitors → Add Monitor.
- Saisissez l'URL de la page, la planification (quotidienne / hebdomadaire / mensuelle), l'e-mail de notification et un seuil d'alerte facultatif (par défaut : notifier si le score descend en dessous de 90).
- Cliquez sur Create. La première exécution capture la référence. Les exécutions planifiées suivantes sont des tests de régression par rapport à celle-ci.
Vous pouvez exécuter un moniteur à la demande à tout moment avec le bouton Run sans attendre la planification.
Ce que signifie le score
- 100 — aucune différence détectable. La page est identique à la référence.
- 90–99 — bruit insignifiant (rendu sous-pixel, anticrénelage). Généralement rien à corriger.
- 75–89 — modifications mineures confirmées (un mot ajouté, la couleur d'un bouton ajustée).
- 50–74 — plusieurs modifications ou une régression significative de disposition/style.
- 25–49 — régression majeure affectant des sections clés.
- <25 — page fondamentalement cassée ou vide.
Comment fonctionne la comparaison
Trois signaux indépendants déterminent si la page a changé :
- Comparaison du texte du DOM — chaque chaîne visible sur la référence par rapport à l'actuelle. Détecte les modifications de texte uniquement que la comparaison de capture d'écran pourrait manquer.
- Comparaison des couleurs CSS — jetons de couleur extraits (
--primary,--accent, fond de bouton, couleur de lien, etc.) comparés numériquement. Détecte les changements de palette. - Comparaison des couleurs de pixels — comparaison RVB par tuiles des captures d'écran. Détecte tout le reste.
Si les trois signaux ne signalent aucun changement, le système renvoie le score 100 sans faire appel à l'IA — rapide et sans risque de faux positifs. Si l'un des signaux se déclenche, une analyse par IA s'exécute pour interpréter le changement et produire un résumé lisible par un humain.
Approuver un changement réel
Lorsque vous redessinez une page intentionnellement, la prochaine exécution du moniteur signalera une régression. C'est attendu — le système n'a aucun moyen de savoir quels changements vous vouliez. Ouvrez le résultat, vérifiez que les changements sont corrects et cliquez sur Approve. Cela capture une nouvelle référence afin que les exécutions futures utilisent le nouvel état comme repère.
Résultats « Capture appears unstable »
Parfois, vous verrez un résultat de régression avec un score de 100 et un résumé tel que "Capture appears unstable — page height differs by 60% between baseline and current" ou "… 4 image(s) failed to load during the current capture".
Il s'agit d'un garde-fou délibéré. Le système a détecté que la capture actuelle est elle-même peu fiable (un carrousel JS a explosé, le CDN d'images a limité notre débit, etc.) et a refusé de comparer. Signaler une régression dans cet état serait trompeur — le site sous-jacent n'a pas changé. Relancez le test dans 1 à 2 minutes ; il réussit presque toujours à la nouvelle tentative.
Alertes par e-mail
Lorsque le résultat d'un moniteur descend en dessous de votre seuil d'alerte, le plugin envoie un e-mail à l'adresse que vous avez configurée. L'e-mail inclut :
- Score et libellé (Bon / À Améliorer / Médiocre).
- Détail du score (4 catégories).
- Le principal problème détecté.
- Bouton Download Full Report — un seul clic télécharge un PDF avec tous les problèmes, recommandations et captures d'écran.
Vous pouvez désactiver les alertes de moniteur globalement dans Profile → Email Notifications, ou par moniteur dans la boîte de dialogue d'édition du Moniteur.
Historique des résultats
Chaque moniteur conserve les 50 derniers résultats. Les résultats plus anciens sont automatiquement purgés. Ouvrez un moniteur dans QAProof → Monitors pour voir la chronologie — les points verts sont des exécutions réussies, ambre/rouge sont des échecs, et vous pouvez explorer n'importe quel résultat passé.
Conseils pour des moniteurs stables
- Choisissez des pages stables. Les pages au contenu changeant fréquemment (cours boursiers en direct, flux de réseaux sociaux) signaleront des « régressions » constantes parce que le contenu change réellement. Utilisez le masquage de contenu dynamique (activé par défaut) pour masquer les minuteurs et les rotateurs, ou choisissez des pages moins volatiles.
- Utilisez une planification hebdomadaire pour les sites à faible trafic. Le déclenchement de WP-Cron sur les installations WordPress à faible trafic peut être peu fiable. Configurez une tâche cron au niveau du serveur appelant
wp-cron.php, ou utilisez une planification hebdomadaire, plus tolérante. - Recapturez les références après les déploiements. Si vous publiez des changements visuels, cliquez sur Approve sur le prochain résultat de régression pour rafraîchir la référence. Sinon, chaque exécution future continuera de signaler le même changement intentionnel.