25 Testfälle

Sichtbarkeit & Deckkraft

Sichtbarkeitsregressionen gehören zu den heimtückischsten, weil sie der Pipeline vorgaukeln, alles sei in Ordnung: Das Element ist im DOM, die Unit-Tests sind grün, aber visuell ist es verschwunden, hinter einer anderen Komponente verdeckt oder von einem übergeordneten Container abgeschnitten. Genau das ist das Szenario eines Promo-Banners, das im Code noch vorhanden, aber durch ein an anderer Stelle hinzugefügtes overflow: hidden unsichtbar geworden ist, oder eines mobilen „Kaufen"-Buttons, der von einem Chat-Widget mit zu hohem z-index überdeckt wird. Auf Business-Oberflächen kann eine durch einen Kaskadeneffekt auf opacity 0 gesetzte Validierungsfehlermeldung eine kritische Operation scheitern lassen, ohne dass der Operator versteht warum. Übliche Ursachen sind Header-Überarbeitungen mit hinzugefügtem Overflow, schlecht koordinierte z-index-Stapel zwischen Teams, teilweise zurückgenommene A/B-Tests, die ein vergessenes display: none hinterlassen, Deckkraftvariationen, die für einen visuellen Effekt eingeführt aber zu breit propagiert werden, oder Konflikte zwischen Stylesheets, die in Produktion in einer anderen Reihenfolge geladen werden. Delta-QA bekämpft diesen blinden Fleck, indem es die im Browser gerenderten Screenshots vergleicht, nicht den rohen DOM-Baum. Wenn ein Element nicht mehr sichtbar ist, teilweise abgeschnitten wird, an Deckkraft verliert oder von einer anderen Komponente überdeckt wird, meldet das visuelle Testing dies klar. Das Tool erfasst auch interaktive Zustände, sodass sich überprüfen lässt, ob ein Dropdown-Menü, eine Modal oder ein Overlay nach jedem Deployment korrekt sichtbar bleibt, ohne jeden Nutzer-Pfad auf jeder Seite manuell reproduzieren zu müssen.

Was wir erkennen

1

Display-Umschaltung

Erkennt, wenn Elemente zwischen Display-Werten wechseln (none, block, flex, grid, inline) und damit ihre Präsenz im Layout beeinflussen.

2

Visibility-Eigenschaft

Erfasst visibility:hidden-Änderungen, bei denen Elemente unsichtbar werden, aber weiterhin Platz im Layout einnehmen.

3

Deckkraft-Änderungen

Überwacht Opacity-Variationen von vollständig transparent (0) bis vollständig undurchsichtig (1), einschließlich teilweiser Transparenz.

4

Z-Index-Neuordnung

Erkennt Stapelkontext-Änderungen, bei denen sich Elemente aufgrund von Z-Index-Modifikationen unterschiedlich überlagern.

5

Overflow & Clipping

Identifiziert Overflow-Verhaltensänderungen (visible, hidden, scroll, auto), die Inhalte verbergen oder enthüllen können.

Live-Beispiel

Sehen Sie genau, was Delta-QA erkennt. Vergleichen Sie beide Versionen nebeneinander.

Vorher
Nachher

Praxisszenarien

🎯

Das Promo-Banner, das verschwindet

Ein Entwickler überarbeitet den Header und fügt overflow: hidden auf dem übergeordneten Container hinzu. Das Promo-Banner „-20% mit Code SUMMER" ist noch im Code, aber visuell abgeschnitten — auf dem Bildschirm unsichtbar. Ihre Besucher sehen die Aktion nicht, Sie verlieren tagelang Umsatz. Das Team hat der Test-Pipeline vertraut — das Banner existiert im DOM, die Tests sind grün. Delta-QA vergleicht die Screenshots und erkennt das Verschwinden des Banners — der leere Bereich oben auf der Seite fällt im Diff sofort auf.

⚠️

Der z-index, der einen Button versteckt

Ein Entwickler integriert ein Chat-Widget mit z-index: 9999. Auf dem Handy positioniert sich das Widget genau über dem schwebenden „Kaufen"-Button am unteren Bildschirmrand. Der Button ist noch im Code, aber visuell hinter dem Chat versteckt — Ihre Kunden können nicht mehr kaufen. Der Tester hat auf dem Desktop geprüft, nicht auf dem Handy, wo sich die Elemente überlappen. Delta-QA vergleicht die mobilen Screenshots und erkennt, dass der „Kaufen"-Button vom Widget verdeckt wird — der verdeckte Bereich ist im Diff sichtbar.

💡

Die Deckkraft, die Text unlesbar macht

Ein Entwickler reduziert die Deckkraft des dunklen Overlays auf dem Hero-Bild, um „mehr vom Foto zu zeigen". Der weiße Text landet auf einem zu hellen Hintergrund — er wird quasi unlesbar. Ihre Besucher können die Hauptbotschaft der Startseite nicht mehr lesen. Die Änderung wirkte rein kosmetisch, der Entwickler hat sie gemergt mit dem Gedanken, es sieht besser aus. Delta-QA vergleicht die Screenshots und hebt den unlesbar gewordenen Text hervor — der Kontrastverlust zwischen Text und Hintergrund ist in der Überlagerung klar erkennbar.

Bereit, jede visuelle Regression zu erkennen?

Laden Sie Delta-QA herunter und erkennen Sie CSS-Änderungen in Ihren Webseiten — kein Code erforderlich.