Was ist visuelles Regressionstesten?
Visuelles Regressionstesten vergleicht Screenshots einer Benutzeroberfläche mit zuvor freigegebenen Baseline-Bildern, um unbeabsichtigte visuelle Änderungen zu erkennen. Es findet Fehler, die Code-Tests übersehen, etwa einen verrutschten Button, überlaufenden Text oder ein kaputtes Mobile-Layout.
So funktioniert es
Die Methode hat vier Schritte, die sich mit jeder Änderung wiederholen.
- Baseline: Screenshots der Seiten im freigegebenen Zustand aufnehmen.
- Vergleich: Nach einer Änderung dieselben Seiten in denselben Größen aufnehmen und Pixel für Pixel vergleichen.
- Schwellenwert: Eine Grenze für den Anteil geänderter Pixel festlegen, damit winzige Unterschiede nicht als Fehlschlag zählen.
- Freigabe: Ist die Änderung gewollt, wird das neue Bild zur Baseline; wenn nicht, behebst du den Bug.
Warum du es brauchst
Unit-Tests sagen dir, dass eine Funktion den richtigen Wert liefert, nicht dass die Seite richtig aussieht. Eine CSS-Änderung kann das Layout einer Seite zerstören, die niemand angefasst hat. Solche Nebenwirkungen sind häufiger, wenn Coding-Agenten die UI ändern, weil der Agent meist arbeitet, ohne den Bildschirm zu sehen.
Fehlalarme verringern
Ein verrauschter Test wird bald ignoriert, deshalb ist ein stabiles Setup wichtig.
- Animationen und Übergänge abschalten.
- Veränderliche Daten wie Datum, Uhrzeit und zufällige Inhalte einfrieren.
- Auf das Laden der Schriften warten und immer im selben Browser und Betriebssystem aufnehmen.
- In mehreren Größen testen, etwa Mobile, Tablet und Desktop.
Tools
Gängige Optionen sind die Assertion toHaveScreenshot von Playwright, Open-Source-Tools wie BackstopJS und gehostete Dienste wie Percy oder Chromatic. Alle beruhen auf derselben Idee: ein Baseline-Bild, ein neues Bild und ein Diff-Bild, das hervorhebt, was sich geändert hat.
Visueller Vergleich in AgentVera
Der Preview-Tab von AgentVera führt visuelle Vergleiche gegen den Dev-Server des Projekts und jedes Worktrees durch.
- Von den gewählten Seiten werden Ganzseiten-Screenshots in Mobile (375×812), Tablet (768×1024) und Desktop (1440×900) aufgenommen; bis zu 6 Größen lassen sich einstellen.
- Du legst eine Baseline fest; spätere Aufnahmen werden Pixel für Pixel verglichen, und geänderte Pixel sind rot markiert. Der Standard-Schwellenwert liegt bei 0,1 % der Pixel.
- Der Button „Test with agent“ öffnet in diesem Worktree einen Claude-Agenten mit dem AgentVera-Browser; er öffnet jede Seite bei jedem Breakpoint und sucht nach Überlauf, kaputtem Layout, Konsolenfehlern und toten Links.
FAQ
Ist visuelles Regressionstesten dasselbe wie Snapshot-Testing?
Ähnliche Idee, anderes Ziel. Snapshot-Tests vergleichen meist die HTML- oder Textausgabe einer Komponente; visuelle Regressionstests vergleichen echte Screenshots.
Warum liefern Pixelvergleiche falsche Fehlschläge?
Schriftdarstellung, Anti-Aliasing, Animationen und wechselnde Inhalte können ein paar Pixel verschieben. Ein Schwellenwert und eine stabile Umgebung dämpfen dieses Rauschen.
Welche Seiten sollte ich testen?
Beginne mit den meistgenutzten und empfindlichsten: Startseite, Anmeldung, Checkout oder Formular-Abläufe. Nimm jede in mehreren Bildschirmgrößen auf.