Visuelle Regressionstests

Visuelle Regressionstests sind eine automatisierte Testmethode, die unbeabsichtigte Änderungen am Erscheinungsbild einer Benutzeroberfläche aufdeckt. Sie nehmen Screenshots von Seiten oder Komponenten auf, vergleichen sie mit freigegebenen Referenzbildern (Baselines) und markieren jede Abweichung oberhalb eines festgelegten Schwellenwerts zur Prüfung.

Funktionale Tests prüfen, ob eine Schaltfläche funktioniert. Visuelle Tests prüfen, ob sie noch richtig aussieht: Position, Farbe, Größe, Schrift und Abstände. Eine CSS-Änderung in einer gemeinsam genutzten Datei kann Layouts auf vielen Seiten verschieben, und visuelle Tests machen solche Nebenwirkungen vor dem Release sichtbar. Teams führen sie in der Continuous Integration aus, oft mit Playwright, Cypress-basierten Plugins oder spezialisierten Diensten für visuelle Tests.

So funktionieren visuelle Regressionstests

1. Jede Seite oder Komponente wird in einem kontrollierten Browser in festen Viewport-Größen gerendert.
2. Screenshots werden aufgenommen und nach der Prüfung als Baselines gespeichert.
3. Bei jeder Änderung wird unter denselben Bedingungen erneut aufgenommen.
4. Die neuen Bilder werden mit den Baselines verglichen, und es entstehen Differenzbilder.
5. Eine prüfende Person akzeptiert beabsichtigte Änderungen, die zu neuen Baselines werden, oder behebt Fehler.

Wo visuelle Regressionstests eingesetzt werden

• Designsysteme und Komponentenbibliotheken.
• Marketing-Websites mit vielen Vorlagen.
• Web-Apps mit häufigen CSS- oder Abhängigkeits-Updates.
• Browserübergreifende Prüfungen in Chromium, Firefox und WebKit.

Pixelvergleich und wahrnehmungsbasierter Vergleich

Ein Pixelvergleich prüft die Farbwerte an jeder Position und zählt die Abweichungen. Er ist exakt, reagiert aber empfindlich auf Kantenglättung und Schriftdarstellung. Ein wahrnehmungsbasierter Vergleich, etwa auf Basis von SSIM, misst Struktur- und Kontraständerungen so, wie ein Mensch sie bemerken würde, und verringert damit Fehlalarme. Viele Werkzeuge kombinieren einen Pixelvergleich mit einer Toleranz und maskierten Bereichen.

Häufige Fehler

• Baselines auf einem Betriebssystem erzeugen und auf einem anderen vergleichen, wodurch sich die Schriftdarstellung ändert.
• Datumsangaben, Werbung oder Animationen im aufgenommenen Bereich lassen.
• Abweichungen ungeprüft akzeptieren, wodurch Fehler zu Baselines werden.
• Nur eine Viewport-Größe testen.

Immer wieder dieselben Screenshots?

Für manuelle visuelle Prüfungen ohne Testsuite nimmt Website Capture in Temposhot eine URL-Liste in festen Gerätegrößen auf, und Compare Images hebt Unterschiede zwischen zwei Aufnahmen hervor. Siehe Website-Screenshot-Automatisierung.

Häufige Fragen

Ersetzen visuelle Regressionstests funktionale Tests?

Nein. Sie prüfen das Erscheinungsbild. Das Verhalten prüfen weiterhin funktionale Tests.

Wie reduziere ich Fehlalarme?

Frieren Sie dynamische Inhalte ein, verwenden Sie für jeden Lauf dieselbe Umgebung und maskieren Sie Bereiche, die sich absichtlich ändern.

Quellen

• Visuelle Vergleiche in Playwright
• Structural Similarity Index in der Wikipedia (englisch)

Weiterführende Ressourcen

• Bilder vergleichen: zwei Screenshots im Browser vergleichen.
• Optionen für Website Capture: Einstellungen für Gerät und Warten.
• Läufe und Ergebnisse: einen Aufnahmelauf auswerten.