20 cas de test

Changements Subtils

Les regressions les plus dangereuses sont celles que l'on ne peut pas voir a l'oeil nu. Les differences de rendu sous-pixel, les ecarts de couleurs quasi-identiques et les variations d'anti-aliasing peuvent echapper au QA manuel. Delta-QA opere au niveau du pixel pour capter ce que l'humain ne peut pas.

Ce que nous detectons

1

Ecarts de couleurs quasi-identiques

Detecte des changements de couleur aussi petits que 1-2 valeurs RGB (ex. #666666 vs #626262), invisibles a l'oeil nu.

2

Differences d'anti-aliasing

Capture les variations d'anti-aliasing des polices et contours qui produisent differents motifs de lissage sous-pixel.

3

Rendu sous-pixel

Surveille le positionnement fractionnaire des pixels et les differences de rendu causees par les transforms ou le dimensionnement en pourcentage.

4

Variations de lissage de police

Detecte les changements de -webkit-font-smoothing et de rendu de police qui affectent la nettete et la perception de graisse.

Exemple interactif

Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.

Avant
Apres

Scénarios concrets

🎯

Le hover qui disparaît des boutons

Un développeur ajoute un reset CSS global qui supprime les styles hover sur les liens et boutons. Au survol, les boutons ne changent plus de couleur ni d'ombre — ils restent exactement pareils qu'au repos. Les visiteurs n'ont plus aucun feedback visuel pour savoir que c'est cliquable. Le taux de clic baisse et personne ne comprend pourquoi. Le changement faisait partie d'un gros refactoring CSS, personne n'a vérifié les états hover. Delta-QA capture les éléments à l'état hover et compare les captures : les boutons qui ne changent plus d'apparence au survol ressortent immédiatement dans le diff.

⚠️

Les liens qui se fondent dans le texte

Un développeur modifie les styles globaux des liens et, par effet de bord, les liens dans le corps de texte perdent leur soulignement et leur couleur distincte. Ils ressemblent maintenant au texte normal — même couleur, même style. Vos visiteurs ne savent plus où cliquer dans vos articles et pages de contenu. Le développeur a vérifié la navigation principale (qui utilise des classes spécifiques), pas les liens dans le contenu. Delta-QA compare les captures d'écran et met en évidence les liens qui ne se distinguent plus du texte — l'absence de soulignement et de couleur distincte ressort dans le diff.

💡

La scrollbar qui change de style

Un changement CSS écrase les styles personnalisés de la scrollbar. La barre de défilement fine et élégante est remplacée par la scrollbar par défaut du navigateur — épaisse et grise. Le site perd sa finition et la zone de contenu est visuellement rétrécie. C'est le genre de régression que personne ne cherche activement — on la remarque vaguement sans identifier la cause. Delta-QA compare les captures d'écran et met en évidence le changement — la barre épaisse qui remplace le design personnalisé ressort dans la superposition.

💡

L'antialiasing qui change

Un développeur introduit un nouveau CSS reset qui change -webkit-font-smoothing de antialiased à auto. Sur macOS, tout le texte du site paraît plus gras et moins net — comme si quelqu'un avait légèrement flouté la typographie. Vos utilisateurs Mac perçoivent le site comme « moins soigné » sans pouvoir mettre le doigt dessus. En staging ça passait car l'environnement de test tournait sur Linux avec un rendu différent. Delta-QA compare les captures d'écran et détecte le changement de rendu — les caractères plus gras et moins nets ressortent dans la superposition.

Pret a detecter chaque regression visuelle ?

Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.