L’anticrénelage (antialiasing), cette technique qui adoucit les contours d’un texte ou d’une forme en mélangeant légèrement les couleurs des pixels de bordure, varie de façon minime d’une exécution à l’autre, même sur la même machine avec la même version de navigateur. Un test de régression visuelle configuré avec une tolérance de zéro pixel de différence considère chacune de ces variations comme une régression, ce qui produit un flux constant de faux positifs.
Sur un projet de configurateur de produit pour un fabricant de mobilier sur mesure, cette configuration stricte générait en moyenne trois à quatre alertes de régression visuelle par jour, sans qu’aucune ne corresponde à un changement réel de l’interface. L’équipe avait fini par ignorer systématiquement ces alertes, ce qui a permis à une vraie régression de passer inaperçue pendant plusieurs jours.
Le problème d’une tolérance à zéro
La configuration initiale du test de comparaison d’images ressemblait à ceci, avec Playwright :
await expect(page).toHaveScreenshot('configurateur-canape.png', {
maxDiffPixelRatio: 0,
});
Avec ce réglage, la moindre variation de rendu de police, souvent liée à des différences infimes de sous-pixel selon la charge de la machine d’exécution, déclenche un échec. Le développeur qui relit le diff visuel ne voit souvent aucune différence perceptible à l’œil nu, ce qui use rapidement sa vigilance.
Ajuster la tolérance sans perdre en capacité de détection
Deux réglages, souvent confondus, doivent être ajustés séparément :
threshold: la sensibilité de détection par pixel individuel, c’est-à-dire l’écart de couleur en dessous duquel deux pixels sont considérés comme identiques.maxDiffPixelRatio: la proportion totale de pixels différents tolérée sur l’ensemble de l’image avant que le test échoue.
await expect(page).toHaveScreenshot('configurateur-canape.png', {
threshold: 0.2,
maxDiffPixelRatio: 0.003,
});
Un threshold de 0,2 absorbe les variations de sous-pixel liées à l’anticrénelage sans devenir aveugle à un changement de couleur franc. Le maxDiffPixelRatio à 0,3 % tolère un léger flou de rendu réparti sur l’image, tout en bloquant un changement localisé mais significatif, comme un bouton déplacé ou une couleur de fond modifiée sur une large zone.
Traiter différemment les zones à fort contraste
Sur ce projet, le texte du prix affiché en gros caractères sur fond blanc générait davantage de variations d’anticrénelage que le reste de l’interface, en raison du contraste élevé. Plutôt que d’augmenter la tolérance globale, cette zone a été isolée dans une capture séparée, avec son propre seuil légèrement plus permissif, sans affaiblir la précision de détection sur le reste de la page :
await expect(page.locator('.configurateur-prix')).toHaveScreenshot('prix-affiche.png', {
threshold: 0.3,
maxDiffPixelRatio: 0.01,
});
Vérifier que la tolérance ne masque pas une vraie régression
Après ajustement, l’équipe a délibérément introduit un changement visuel volontaire (déplacement du bouton de validation de dix pixels) pour vérifier que le nouveau seuil détectait toujours ce type de régression. Cette vérification, souvent négligée, est ce qui distingue un seuil correctement calibré d’un seuil simplement élargi jusqu’à ce que les alertes cessent.
Ce que cet ajustement ne traite pas
Cette méthode s’applique à des faux positifs liés au rendu lui-même (anticrénelage, sous-pixel), pas à un incident ponctuel provoqué par la mise à jour d’un outil tiers d’édition visuelle, qui relève d’un diagnostic au cas par cas distinct.
Une tolérance bien réglée ne cache pas les régressions, elle filtre le bruit pour que les vraies régressions restent visibles.
En résumé
Séparer le seuil de sensibilité par pixel de la proportion globale tolérée permet d’absorber les variations normales de rendu sans perdre la capacité à détecter un vrai changement visuel. Sur ce projet, le passage à ces deux réglages distincts a fait chuter les alertes quotidiennes de trois ou quatre à une par semaine environ, chacune correspondant depuis à un changement réel de l’interface.
