Display-Umschaltung
Erkennt, wenn Elemente zwischen Display-Werten wechseln (none, block, flex, grid, inline) und damit ihre Präsenz im Layout beeinflussen.
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.
Erkennt, wenn Elemente zwischen Display-Werten wechseln (none, block, flex, grid, inline) und damit ihre Präsenz im Layout beeinflussen.
Erfasst visibility:hidden-Änderungen, bei denen Elemente unsichtbar werden, aber weiterhin Platz im Layout einnehmen.
Überwacht Opacity-Variationen von vollständig transparent (0) bis vollständig undurchsichtig (1), einschließlich teilweiser Transparenz.
Erkennt Stapelkontext-Änderungen, bei denen sich Elemente aufgrund von Z-Index-Modifikationen unterschiedlich überlagern.
Identifiziert Overflow-Verhaltensänderungen (visible, hidden, scroll, auto), die Inhalte verbergen oder enthüllen können.
Sehen Sie genau, was Delta-QA erkennt. Vergleichen Sie beide Versionen nebeneinander.
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.
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.
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.
Laden Sie Delta-QA herunter und erkennen Sie CSS-Änderungen in Ihren Webseiten — kein Code erforderlich.