Warum Visual Regression Tests?

Während funktionale Tests prüfen, ob etwas funktioniert, prüfen visuelle Tests, wie etwas aussieht.

Typische UI-Probleme, die funktionale Tests oft nicht erkennen:

• Ein Button verschiebt sich 20px nach unten

• Ein Text läuft über ein Element

• Ein Bild fehlt

• Abstände oder Farben wurden versehentlich geändert

• Die mobile Ansicht bricht an einer Stelle um

Diese Art von Fehlern sind optischer Natur – und klassische Screenshot-Vergleiche führen oft zu vielen False Positives (z. B. Pixelverschiebungen).

Warum Applitools Eyes?

Applitools ist mittlerweile eine vollständige KI-Testplattform, die mehrere Bereiche des Testens abdeckt. In meinem Beispiel nutze ich das Tool Applitools Eyes, das visuelle Modul der Plattform.

Applitools Eyes ist auf visuelle UI-Tests spezialisiert.
Es prüft nicht, ob ein Button funktioniert, sondern ob er richtig aussieht und an der richtigen Stelle ist.

Das System erstellt Screenshots, vergleicht diese mit einer Baseline und erkennt:

• Relevante visuelle Änderungen
• Unwichtiges Rendering-Rauschen (z. B. 1-Pixel-Unterschiede)
• Layout-Verschiebungen und Strukturänderungen
• Unterschiedliche Darstellungen auf verschiedenen Geräten oder Viewports

Kurz gesagt:

Eyes erkennt echte visuelle Fehler und ignoriert unwichtige Pixelabweichungen. Das spart enorm viel Zeit bei Regressionstests und macht die UI-Qualität messbar.

Mein Setup: Playwright + Applitools

Ich habe für meinen Test Playwright verwendet – ein modernes, schnelles Browser-Automation-Framework. In Kombination mit Applitools entsteht ein zuverlässiger Visual-Regression-Workflow.

Setup-Teil – beforeEach

Im Setup-Block initialisiere ich Applitools Eyes, damit jeder Test mit der Visual-AI-Engine ausgeführt wird.
Dazu wird ein VisualGridRunner erstellt und die Browsergröße festgelegt.
Damit ist Applitools bereit, Screenshots aufzunehmen und mit der gespeicherten Baseline zu vergleichen.

Testteil („Homepage Visual Test“)

In diesem Test öffne ich eine neue visuelle Session, lade meine Website und lasse Applitools einen Screenshot der gesamten Seite erstellen. Dieser wird automatisch mit der Baseline verglichen, um visuelle Änderungen oder Layoutfehler zu erkennen.
So zeigt Applitools zuverlässig an, ob sich etwas an der Oberfläche verändert hat:

Hier nochmal Schritt für Schritt:

1.  Visuelle Session starten und anschließend mit Playwright die Website öffnen

Der Browser wird automatisiert gestartet und https://walter-test-engineering.de/ geladen.

2. Applitools macht einen Screenshot

Target.window() erstellt ein Bild der gesamten Seite.

3. KI vergleicht den Screenshot mit der Baseline

Beim ersten Lauf wird eine Baseline erstellt.

Jeder weitere Lauf:

• vergleicht die Seite mit der Baseline
• markiert Änderungen farblich
• zeigt nur relevante Unterschiede
• schlägt ein Update der Baseline vor, falls die Änderung gewollt war

4. Dashboard zeigt alle Unterschiede

Nach jedem Test erscheint ein Link im Terminal, über den du ins Applitools-Dashboard gelangst. Dazu gleich mehr :).

Hier siehst du:

• die aktuelle Version
• die Baseline
• markierte Unterschiede
• Möglichkeit zum Freigeben („Approve“) oder Ablehnen der Änderung

Abschluss des Tests – afterEach

Nach jedem Testlauf schließe ich die Applitools-Session sauber ab.
eyes.close() wertet das Ergebnis aus und sendet die Screenshots zur Analyse an Applitools.
Falls der Test vorher abgebrochen wurde, sorgt eyes.abortIfNotClosed() dafür, dass die Session trotzdem korrekt beendet wird. So wird sichergestellt, dass alle Visual-Tests zuverlässig gespeichert und ausgewertet werden.

Was passiert eigentlich, wenn sich nun eine Seite ändert?

Wenn sich etwas an deiner Website oder Software verändert (z. B. Layout, Farben, Bilder), passiert Folgendes:

1. Du führst den Test erneut aus

   npx playwright test
   

2. Applitools erkennt eine visuelle Änderung
3. Der Test schlägt mit DiffsFoundError fehl
4. Du öffnest das Dashboard und prüfst die Unterschiede
5. Wenn alles korrekt ist → Baseline aktualisieren
6. Beim nächsten Lauf ist der Test wieder grün

So entdeckst du sofort unerwartete Fehler nach einem Update oder Deployment.

Mein Beispiel: Applitools erkennt bewusst eingebaute Änderungen

Um zu demonstrieren, wie zuverlässig Applitools visuelle Abweichungen erkennt, habe ich auf meiner Website walter-test-engineering.de absichtlich eine kleine Änderung vorgenommen:
Ich habe zwei zusätzliche Such-Icons eingebaut.

Beim nächsten Testlauf passierte genau das, was man von einem Visual-AI-Tool erwartet:

• Der Test schlug mit einem DiffsFoundError fehl

• Im Applitools Dashboard wurden die neuen Icons klar markiert

• Ich konnte sofort sehen, wo und wie sich das Layout verändert hat

• Nach einer kurzen visuellen Prüfung konnte ich die Änderung bewusst freigeben (Approve)

Damit zeigt Applitools sehr beeindruckend, wie selbst kleine visuelle Anpassungen — wie das Hinzufügen eines Icons — zuverlässig erkannt werden. Genau solche feinen Unterschiede gehen bei klassischen Screenshot-Vergleichen oft unter, aber die visuelle KI von Applitools findet sie problemlos.

Warum ich Applitools für echte Projekte nutze

Für meine Testautomatisierungsprojekte ist Applitools extrem wertvoll, weil man visuelle Fehler sonst kaum automatisch testen kann.

Vorteile in der Praxis:

• Weniger manuelle UI-Prüfungen
• Frühzeitige Erkennung von Layout-Fehlern
• Fehlalarme werden von der KI reduziert
• Perfekt für CI/CD-Pipelines
• Funktioniert mit Playwright, Selenium, Cypress uvm.

Fazit: Visuelle Tests sind unverzichtbar

Falls du bereits Automatisierung für Funktionstests machst, solltest du visuelle Tests unbedingt ergänzen. Gerade bei modernen, dynamischen Websites sind Layout-Fehler extrem häufig – und Applitools Eyes erkennt sie zuverlässig, ohne dich mit unwichtigen Änderungen zu nerven.

Mit nur wenigen Zeilen Code hast du:

• volle visuelle Abdeckung deiner UI
• automatische Erkennung von Änderungen
• reproduzierbare, vergleichbare Screenshots
• ein professionelles Dashboard für Review & Freigabe

Weiterführende Links

• https://eyes.applitools.com/
• https://playwright.dev/