25 cas de test

Visibilite & Opacite

Les changements de visibilite peuvent faire apparaitre ou disparaitre du contenu de maniere inattendue. Qu'il s'agisse d'un message d'erreur cache qui ne s'affiche plus, ou d'un element devenu invisible a cause d'un conflit CSS, Delta-QA capture chaque changement d'etat de visibilite.

Ce que nous detectons

1

Bascule display

Detecte quand des elements changent de valeur display (none, block, flex, grid, inline) affectant leur presence dans le layout.

2

Propriete visibility

Capture les changements visibility:hidden ou les elements deviennent invisibles mais occupent toujours l'espace.

3

Changements d'opacite

Surveille les variations d'opacite de totalement transparent (0) a totalement opaque (1), y compris la transparence partielle.

4

Reordonnancement z-index

Detecte les changements de contexte d'empilement ou les elements se chevauchent differemment suite aux modifications de z-index.

5

Overflow & rognage

Identifie les changements de comportement overflow (visible, hidden, scroll, auto) qui peuvent masquer ou reveler du contenu.

Exemple interactif

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

Avant
Apres

Scénarios concrets

🎯

Le bandeau promo qui disparaît

Un développeur retravaille le header et ajoute un overflow: hidden sur le conteneur parent. Le bandeau promo « -20% avec le code SUMMER » est toujours dans le code, mais visuellement il est coupé — invisible à l'écran. Vos visiteurs ne voient pas la promotion, vous perdez des ventes pendant des jours. L'équipe a fait confiance au pipeline de tests — le bandeau existe dans le DOM, les tests passent au vert. Delta-QA compare les captures d'écran et détecte la disparition du bandeau — l'espace vide en haut de page ressort immédiatement dans le diff.

⚠️

Le z-index qui cache un bouton

Un développeur intègre un widget de chat avec un z-index de 9999. Sur mobile, le widget se positionne pile au-dessus du bouton « Acheter » flottant en bas de l'écran. Le bouton est toujours dans le code mais visuellement caché derrière le chat — vos clients ne peuvent plus acheter. Le testeur a vérifié sur desktop, pas sur mobile où les éléments se chevauchent. Delta-QA compare les captures d'écran mobile et détecte que le bouton « Acheter » est recouvert par le widget — la zone masquée ressort dans le diff.

💡

L'opacité qui rend le texte illisible

Un développeur réduit l'opacité de l'overlay sombre sur la hero image pour « laisser voir plus la photo ». Le texte blanc se retrouve sur un fond trop clair — il devient quasiment illisible. Vos visiteurs ne peuvent plus lire le message principal de la page d'accueil. Le changement paraissait cosmétique, le développeur l'a mergé en se disant que ça rendait mieux. Delta-QA compare les captures d'écran et met en évidence le texte devenu illisible — la perte de contraste entre le texte et le fond ressort clairement dans la superposition.

Pret a detecter chaque regression visuelle ?

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