1
CSS-Transitions
Erfasst den berechneten Zustand von CSS-Transitions und erkennt Änderungen in Dauer, Timing-Funktion und Zieleigenschaften.
15 Testfälle
Animationen
Animationen, Übergänge und Mikrointeraktionen sind die perzeptuelle Schicht, die eine funktionale Oberfläche in eine lebendige Oberfläche verwandelt: ein Menü, das hereingleitet, ein Button, der auf Hover reagiert, ein Loader, der während eines Netzwerkaufrufs beruhigt. Wenn diese Schicht bricht, funktioniert die Anwendung weiterhin, wirkt aber tot oder lieblos, und das Vertrauen der Nutzer erodiert. Eine versehentlich entfernte 300ms-Transition lässt Inhalte „springen" statt zu gleiten, und benachbarte Elemente landen an Positionen, die von der Referenz abweichen. Ein Hover, der nicht mehr ausgelöst wird, weil ein transparentes Tracking-Element über die Buttons gelegt wurde, zerstört das gesamte visuelle Feedback der Seite. Ein aus einem anderen Projekt kopierter Loader bringt einen Bruch im Corporate Design mit, der inmitten eines kritischen Pfads auffällt. Diese Verhaltensweisen mit einem Menschen zu testen ist langsam, kaum reproduzierbar und unmöglich zu skalieren, wenn man Dutzende Bildschirme hat. Delta-QA behandelt diese Kategorie, indem es Übergänge zum Capture-Zeitpunkt in einem stabilen berechneten Zustand einfriert und die Snapshots dann mit den Referenzen vergleicht. Interaktive Zustände wie Hover werden ebenfalls erfasst, um zu validieren, dass Buttons wie vorgesehen ihr Erscheinungsbild ändern. Der visuelle Diff hebt durch entfernte Transitions verursachte Verschiebungen, Loader mit driftendem Stil, fehlende Animations-Indikatoren und Keyframes mit verändertem Rendering zwischen zwei Versionen hervor. Dieser Ansatz erlaubt es QA-Teams, eine Regression auf der Interaktionsschicht durch visuelles Testing zu erkennen, ohne jeden Pfad manuell aufzeichnen zu müssen.
Was wir erkennen
2
Keyframe-Animationen
Friert @keyframes am aktuellen Frame ein, um Animationszustände über Seitenversionen hinweg zu vergleichen.
3
Hover & interaktive Zustände
Erfasst :hover-, :active- und andere interaktive Zustandsvisuals zum Vergleich.
4
Transform & Origin
Erkennt Änderungen in Translate-, Rotate-, Scale-, Skew-Werten und Transform-Origin-Modifikationen.
Live-Beispiel
Sehen Sie genau, was Delta-QA erkennt. Vergleichen Sie beide Versionen nebeneinander.
Vorher
Nachher
Praxisszenarien
🎯
Der Übergang, der sofort wird
Ein Entwickler refaktoriert die Styles und entfernt versehentlich den 300ms-Übergang vom Dropdown-Menü. Ohne Übergang schiebt das Menü den Inhalt darunter abrupt zur Seite, statt ihn sanft gleiten zu lassen — die Seite „springt" visuell. Sichtbare Folge: Die Elemente unter dem Menü sind weiter nach unten verschoben als in der Referenzversion, weil der Browser das Layout nicht mehr sanft neu berechnen kann. Es ist ein CSS-Refactoring, niemand hat daran gedacht, die visuellen Interaktionen erneut zu testen. Delta-QA vergleicht die Screenshots des geöffneten Menüs und erkennt die Inhaltsverschiebungen unter dem Menü — das unterschiedliche Layout fällt im Diff auf.
⚠️
Der Loader, der seinen Stil ändert
Ein Entwickler kopiert Loader-Styles aus einem anderen Projekt, um die Komponenten zu „harmonisieren". Der neue Loader sieht visuell anders aus: größer, mit einer Akzentfarbe, die nicht zur Marke passt, und einem anderen Indikator-Stil (gepunktet statt durchgezogen). Er dreht sich, also funktioniert er — das Team dachte „passt schon, ist nur ein Loader". Delta-QA vergleicht die Screenshots und hebt die Unterschiede in Größe, Farbe und Form des Loaders hervor — die Komponente, die nicht mehr der Referenz entspricht, fällt im Diff auf.
💡
Der Hover, der nicht mehr funktioniert
Ein Entwickler fügt ein transparentes Element über den Buttons hinzu, um Analytics-Tracking zu verwalten. Folge: Der Hover löst nicht mehr aus — die Maus schwebt über dem unsichtbaren Element, nicht über dem Button. Visuell bleiben die Buttons beim Überfahren in ihrer Standardfarbe, die Website wirkt „leblos". Die Änderung betraf das Tracking, nicht die Buttons — niemand hat daran gedacht, das visuelle Hover-Feedback zu prüfen. Delta-QA erfasst den Hover-Zustand der Buttons und vergleicht die Screenshots: Der Button, der seine Farbe nicht mehr ändert, fällt im Diff auf.
Bereit, jede visuelle Regression zu erkennen?
Laden Sie Delta-QA herunter und erkennen Sie CSS-Änderungen in Ihren Webseiten — kein Code erforderlich.