1
Transitions CSS
Capture l'état calculé des transitions CSS, détectant les changements de durée, fonction de timing et propriétés ciblées.
15 cas de test
Animations
Les animations, transitions et micro-interactions sont la couche perceptive qui transforme une interface fonctionnelle en interface vivante : un menu qui glisse, un bouton qui réagit au survol, un loader qui rassure pendant un appel réseau. Quand cette couche se casse, l'application fonctionne toujours mais elle paraît morte ou bâclée, et la confiance des utilisateurs s'érode. Une transition de 300ms supprimée par mégarde fait « sauter » le contenu au lieu de le faire glisser, et les éléments adjacents se retrouvent décalés à des positions différentes de la référence. Un hover qui ne se déclenche plus parce qu'un élément transparent de tracking analytique a été superposé aux boutons casse tout le feedback visuel sur la page. Un loader copié-collé d'un autre projet introduit une rupture de charte graphique qui dénote au milieu d'un parcours critique. Tester ces comportements avec un humain est lent, peu reproductible et impossible à passer à l'échelle quand on a des dizaines d'écrans. Delta-QA traite cette catégorie en figeant les transitions à un état calculé stable au moment de la capture, puis en comparant les snapshots aux références. Les états interactifs comme le hover sont également capturés pour valider que les boutons changent d'apparence comme prévu. Le diff visuel met en évidence les décalages provoqués par une transition supprimée, les loaders dont le style a dérivé, les indicateurs d'animation qui n'apparaissent plus et les keyframes dont le rendu a changé entre deux versions. Cette approche permet aux équipes QA de détecter une régression sur la couche d'interaction sans avoir à filmer chaque parcours manuellement.
Ce que nous détectons
2
Animations keyframe
Fige les @keyframes à leur image courante pour comparer les états d'animation entre versions.
3
États hover & interactifs
Capture les instantanés visuels des états :hover, :active et autres états interactifs pour comparaison.
4
Transform & origine
Détecte les changements de valeurs translate, rotate, scale, skew et les modifications de transform-origin.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Après
Scénarios concrets
🎯
La transition qui devient instantanée
Un développeur refactorise les styles et supprime accidentellement la transition de 300ms sur le menu déroulant. Sans transition, le menu pousse le contenu en dessous d'un coup au lieu de le faire glisser progressivement — la page « saute » visuellement. Conséquence visible : les éléments sous le menu se retrouvent décalés plus bas que dans la version de référence, car le navigateur n'a plus le temps de recalculer le layout en douceur. C'est un refactoring CSS, personne n'a pensé à retester les interactions visuelles. Delta-QA compare les captures d'écran du menu ouvert et détecte les décalages de contenu sous le menu — la mise en page différente ressort dans le diff.
⚠️
Le loader qui change de style
Un développeur copie-colle les styles d'un loader depuis un autre projet pour « harmoniser » les composants. Le nouveau loader est visuellement différent : plus grand, avec une couleur d'accent qui ne correspond pas à la charte, et un style d'indicateur différent (pointillé au lieu de plein). Ça tourne, donc fonctionnellement ça marche — l'équipe s'est dit « c'est bon, c'est un loader ». Delta-QA compare les captures d'écran et met en évidence les différences de taille, de couleur et de forme du loader — le composant qui ne ressemble plus à la référence ressort dans le diff.
💡
Le hover qui ne fonctionne plus
Un développeur ajoute un élément transparent par-dessus les boutons pour gérer du tracking analytique. Conséquence : le hover ne se déclenche plus — la souris survole l'élément invisible, pas le bouton. Visuellement, les boutons restent dans leur couleur par défaut au survol, le site paraît « mort ». Le changement concernait le tracking, pas les boutons — personne n'a pensé à vérifier le feedback visuel au survol. Delta-QA capture l'état hover des boutons et compare les captures : le bouton qui ne change plus de couleur ressort dans le diff.
Prêt à détecter chaque régression visuelle ?
Téléchargez Delta-QA et détectez les changements CSS dans vos pages web — sans code.