Style des champs de saisie
Détecte les changements d'apparence des inputs texte : bordures, fonds, paddings et propriétés de police.
Les formulaires concentrent une part disproportionnée de la valeur d'une application : inscription, paiement, recherche, validation d'opérations bancaires, saisie de tickets dans un ERP. Une régression visuelle sur un champ peut faire chuter un taux de conversion ou bloquer un opérateur métier au milieu d'un processus critique. Le risque ne porte pas seulement sur l'apparence du champ au repos, mais aussi sur ses états dérivés : focus, hover, disabled, error, success, ainsi que les placeholders et les textes d'aide associés. Quand un développeur supprime un outline pour « faire plus propre », c'est l'accessibilité WCAG qui est touchée et l'utilisateur clavier qui ne sait plus dans quel champ il tape. Quand le style global des messages d'aide est modifié, les erreurs de validation peuvent passer du rouge au gris clair et devenir illisibles. Les régressions classiques viennent d'un changement de grille CSS qui rétrécit la barre de recherche, d'un reset qui efface les styles natifs des checkboxes et radios, ou d'une mise à jour de framework UI qui modifie subtilement les bordures et les hauteurs d'input. Delta-QA capture les formulaires dans leurs différents états et compare ces captures à la baseline visuelle. L'analyse perceptuelle met en évidence les changements de couleur de message, les indicateurs de focus disparus, les champs dont les dimensions ont changé, les placeholders altérés et les états d'erreur qui ne ressortent plus visuellement. Cette couverture évite de devoir tester manuellement chaque scénario de saisie sur chaque formulaire à chaque déploiement, et garantit que les parcours critiques de conversion ou d'opération métier restent visuellement cohérents entre versions.
Détecte les changements d'apparence des inputs texte : bordures, fonds, paddings et propriétés de police.
Surveille le style personnalisé des checkboxes et boutons radio, y compris les états visuels coché/décoché.
Capture les changements de style des pseudo-classes :valid, :invalid, :required et la présentation des messages d'erreur.
Suit les changements de style :focus et :focus-visible essentiels pour l'accessibilité au clavier.
Détecte les changements du pseudo-élément ::placeholder en couleur, opacité et propriétés de police.
Surveille les états hover, active, disabled et par défaut des boutons pour la cohérence visuelle.
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
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.
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.
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.
Téléchargez Delta-QA et détectez les changements CSS dans vos pages web — sans code.