Tests de non-régression et white-label : comment tester N thèmes sans perdre la raison
White-label multiplie les thèmes par client, breakpoint et langue. Seule la non-régression automatisée permet d'ajouter un thème sans dette QA.
Lire la suite →Détection visuelle — Tous les articles et tutoriels
14 articles
La détection visuelle ne se résume pas à comparer deux images pixel par pixel. Selon le type de défaut visé, les algorithmes et les seuils diffèrent : une dérive de couleur subtile (token mal résolu, conversion sRGB / P3) demande une comparaison perceptuelle ; un décalage de layout (flexbox cassé, marge dupliquée) se voit mieux par une analyse structurelle ; un problème de typographie (police de fallback chargée à la place de la principale) exige une attention particulière au rendu sub-pixel. Et tout change encore en mode responsive ou dark mode, où chaque breakpoint multiplie la surface à couvrir.
Cette page rassemble les articles qui décortiquent les types de régressions visuelles détectables et la manière de les distinguer : faux positifs liés au lissage des polices, vraies régressions de contraste qui passent inaperçues à l'œil nu, casses de mise en page sur viewport étroit, basculements partiels du dark mode où certains composants oublient de s'adapter. On y aborde aussi les choix d'algorithmes de comparaison (pixel matching, SSIM, perceptuel) avec leurs forces et leurs angles morts respectifs. Delta-QA s'appuie sur une combinaison de ces approches pour minimiser le bruit tout en restant strict sur les vraies régressions ; ces articles expliquent les principes pour comprendre ce qu'un outil de test visuel peut — et ne peut pas — détecter de manière fiable.
Tests de non-régression et Tailwind CSS : pourquoi l'approche utility-first exige une vérification du rendu
tailwind.config.js global, purge agressive, mises à jour majeures : pourquoi Tailwind casse silencieusement et comment la non-régression sécurise vos pages.
Lire la suite →
Tests de non-régression responsive mobile : pourquoi le responsive design ne suffit plus
60 % du trafic web est mobile. Encoches, barres dynamiques, touch targets : le responsive design seul ne garantit pas le rendu réel. Comment le tester.
Lire la suite →
Tests de non-régression multi-tenant : quand chaque client a son propre rendu à vérifier
SaaS multi-tenant : chaque client a son branding. Comment automatiser la non-régression sans exploser le budget QA ? Guide complet.
Lire la suite →
Test visuel et images Retina : si vous ne testez pas en HiDPI, vous ne voyez pas ce que vos utilisateurs voient
Tester les images sur écrans Retina et HiDPI : détecter les visuels servis en 1x qui apparaissent flous sur des affichages 2x ou 3x utilisateurs.
Lire la suite →
Animations CSS et test visuel : comment arrêter de se battre contre les faux positifs
Transitions, animations infinies, micro-animations : pourquoi les animations CSS créent des faux positifs en test visuel et comment les neutraliser.
Lire la suite →Qu'est-ce qu'une régression CSS ? Définition, exemples et guide de détection
Une régression CSS est un bug visuel involontaire causé par la cascade, l'héritage ou la spécificité. Invisible aux linters et aux tests fonctionnels.
Lire la suite →
Pourquoi votre site s'affiche différemment selon les navigateurs (et comment le corriger)
Pourquoi Chrome, Firefox et Safari rendent votre site différemment : moteurs de rendu, CSS non standard, polices et solutions concrètes pour corriger.
Lire la suite →
Dette technique visuelle : définition, impact et solutions pour la rembourser
Définition de la dette technique visuelle, son impact sur la qualité perçue et stratégies concrètes pour la rembourser sprint après sprint.
Lire la suite →