35 cas de test

Composants Reels

Les composants reels combinent plusieurs proprietes CSS dans des systemes visuels complexes et interdependants. Un changement dans une propriete peut se propager dans tout le composant. Delta-QA teste les patterns UI complets pour capter les regressions que les verifications isolees manqueraient.

Ce que nous detectons

1

Widgets dashboard

Valide l'integrite visuelle des cartes de donnees, graphiques, affichages KPI et panneaux de metriques.

2

Cartes e-commerce

Teste les cartes produit, affichages de prix, composants de notation et style des boutons d'ajout au panier.

3

Tableaux kanban

Surveille les layouts en colonnes, l'empilement de cartes, les poignees de drag et les indicateurs de statut.

4

Grilles tarifaires

Valide les cartes de tiers tarifaires, listes de comparaison, plans mis en avant et style des boutons CTA.

5

Barres de navigation

Teste la navigation header, menus deroulants, etats hamburger mobile et indicateurs de lien actif.

6

Tableaux de donnees

Detecte les changements d'en-tetes de tableau, alternance de lignes, alignement de cellules et comportement responsive.

Exemple interactif

Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.

Avant
Apres

Scénarios concrets

🎯

Le dropdown qui s'ouvre derrière le tableau

Un développeur ajoute overflow: hidden sur un tableau pour corriger un bug de scroll horizontal. Conséquence : le menu déroulant d'actions sur chaque ligne s'ouvre mais reste clippé — seule la moitié supérieure est visible, les options « Supprimer » et « Archiver » sont coupées. Le développeur a corrigé son bug de scroll, il n'a pas vérifié que les menus déroulants fonctionnaient toujours visuellement. Delta-QA compare les captures avec le menu ouvert et détecte que le dropdown est coupé — la moitié manquante ressort dans le diff.

⚠️

La modal qui ne centre plus

Un développeur modifie le positionnement du body pour un nouveau composant sticky. Effet de bord : la modal de confirmation se retrouve décalée en haut à gauche au lieu d'être centrée. Sur mobile, elle est partiellement hors écran — vos visiteurs ne voient pas le bouton « Confirmer ». La livraison était urgente, on a testé le composant sticky mais pas les 5 modals du site. Delta-QA compare les captures d'écran et met en évidence le déplacement de la modal — sa nouvelle position décalée ressort clairement dans la superposition.

💡

Le carousel qui affiche deux slides

Un changement CSS modifie la largeur du conteneur parent du carousel produit. Au lieu d'afficher un slide à la fois, deux slides sont maintenant partiellement visibles — le deuxième est coupé au milieu. C'est visuellement cassé, vos clients voient une présentation bâclée. Le développeur a modifié le conteneur pour une autre raison, il ne savait même pas que le carousel en dépendait. Delta-QA compare les captures d'écran et détecte le deuxième slide qui apparaît partiellement — le contenu coupé ressort dans le diff.

Pret a detecter chaque regression visuelle ?

Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.