1
Style des champs de saisie
Detecte les changements d'apparence des inputs texte : bordures, fonds, paddings et proprietes de police.
35 cas de test
Formulaires & Etats
Les elements de formulaire sont des points de contact critiques dans l'interaction utilisateur. Un etat de validation casse, un indicateur de focus manquant ou un input non style peuvent mener a la frustration et aux erreurs de saisie. Delta-QA surveille chaque etat visuel lie aux formulaires.
Ce que nous detectons
2
Checkbox & radio
Surveille le style personnalise des checkboxes et boutons radio, y compris les etats visuels coche/decoche.
3
Etats de validation
Capture les changements de style des pseudo-classes :valid, :invalid, :required et la presentation des messages d'erreur.
4
Indicateurs de focus
Suit les changements de style :focus et :focus-visible essentiels pour l'accessibilite au clavier.
5
Style des placeholders
Detecte les changements du pseudo-element ::placeholder en couleur, opacite et proprietes de police.
6
Etats des boutons
Surveille les etats hover, active, disabled et par defaut des boutons pour la coherence visuelle.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Apres
Scénarios concrets
🎯
Le placeholder qui masque l'erreur
Un développeur modifie les styles globaux des textes d'aide et, par effet de bord, les messages d'erreur du formulaire d'inscription passent en gris clair au lieu de rouge. Vos visiteurs soumettent un email invalide, voient un texte sous le champ... qu'ils ne peuvent pas lire car il est gris clair sur fond blanc. Ils pensent que le site est cassé et quittent la page. Personne n'a le temps de vérifier chaque état d'erreur de chaque formulaire à chaque déploiement. Delta-QA compare les captures d'écran et met en évidence le changement de couleur du message — le texte devenu quasi invisible ressort dans le diff.
⚠️
Le champ de recherche qui rétrécit
Un développeur modifie la grille CSS du header pour ajouter un nouveau lien de navigation. La barre de recherche rétrécit de moitié pour faire de la place. Sur mobile, elle devient minuscule — inutilisable. Vos visiteurs ne trouvent plus vos produits car taper une requête dans un champ aussi petit est frustrant. Le développeur a vérifié que le nouveau lien s'affichait bien, pas que le champ de recherche avait rétréci à côté. Delta-QA compare les captures d'écran et met en évidence le rétrécissement de la barre — le changement de taille est clairement visible dans la superposition.
💡
Le focus invisible
Un développeur ajoute outline: none sur les inputs « pour faire plus propre ». Visuellement, quand un utilisateur clique dans un champ, plus rien n'indique quel champ est actif — le contour bleu a disparu. C'est aussi une violation d'accessibilité WCAG. Vérifier manuellement l'état focus de chaque champ sur chaque formulaire, c'est irréaliste. Delta-QA capture l'état focus de chaque champ et compare les captures d'écran : la disparition du contour bleu ressort immédiatement dans le diff visuel.
Pret a detecter chaque regression visuelle ?
Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.