1
Proprietes Flexbox
Surveille flex-direction, justify-content, align-items, flex-wrap, gap et les changements d'ordre qui modifient l'agencement.
50 cas de test
Mise en page
Les changements de mise en page sont parmi les regressions visuelles les plus perturbantes. Un element decale, une grille cassee ou une marge effondree peuvent completement alterer l'experience utilisateur. Delta-QA analyse les relations spatiales entre elements pour capter chaque decalage.
Ce que nous detectons
2
Changements CSS Grid
Detecte les modifications de grid-template, les changements de dimensionnement, les reassignations de grid-area.
3
Position & empilement
Capture les changements de position (static, relative, absolute, fixed, sticky) et leur impact sur le placement.
4
Marges & paddings
Suit les changements d'espacement, y compris les scenarios de margin collapse qui causent des decalages inattendus.
5
Modele de boite & dimensionnement
Detecte les changements de width, height, contraintes min/max et box-sizing qui affectent les dimensions.
6
Float & clear
Identifie les changements de mise en page bases sur float et le comportement de clearfix.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Apres
Scénarios concrets
🎯
Le padding qui décale tout
Un développeur corrige un bug d'alignement sur le formulaire d'inscription et touche au padding global des inputs. Effet de bord : le formulaire de paiement se retrouve avec des champs plus grands, et le bouton « Payer » passe en dessous du fold. Sur mobile, c'est pire — le formulaire déborde de l'écran. Le QA a vérifié le formulaire d'inscription (celui qui était modifié), pas le formulaire de paiement. Delta-QA compare les captures d'écran de toutes les pages et surligne le décalage sur le formulaire de paiement — le bouton « Payer » qui disparaît du viewport est immédiatement visible dans le diff.
⚠️
Le flexbox qui inverse l'ordre
Un développeur refactorise le CSS de la page pricing et inverse accidentellement l'ordre d'affichage des offres. Les trois plans apparaissent maintenant Enterprise, Pro, Gratuit — de droite à gauche. Vos visiteurs voient l'offre la plus chère en premier, l'ancrage psychologique est inversé. La livraison était urgente, on a testé le strict minimum : les trois offres sont présentes, le clic fonctionne, on déploie. Delta-QA compare les captures d'écran et détecte que les blocs ont changé de position — l'inversion est clairement visible dans le diff.
💡
Le margin collapse silencieux
Un développeur ajoute overflow: hidden sur un conteneur pour régler un bug de débordement. Conséquence inattendue : le mécanisme de fusion des marges CSS se casse et l'espace entre chaque section double soudainement. La page s'allonge de 200px, les sections semblent déconnectées les unes des autres. L'équipe a fait confiance au pipeline de tests automatisés qui ne couvre pas le visuel. Delta-QA compare les captures d'écran et met en évidence le doublement de l'espace entre les sections — le décalage de toute la mise en page ressort dans le diff.
Pret a detecter chaque regression visuelle ?
Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.