Visual Regression (Screenshot-Vergleich)

Ein klassischer HTTP-Monitor sagt "der Server antwortet mit 200 OK", aber er weiß nicht, dass die wichtigste CSS-Datei nicht geladen wurde und die Seite kaputt dargestellt wird. Die visuelle Prüfung (englisch visual regression) erstellt einen Schnappschuss der Seite und vergleicht ihn mit einem Basis-Schnappschuss (Baseline) - sie erkennt visuelle Änderungen sogar dann, wenn der Server meldet, dass alles in Ordnung ist.

Die visuelle Prüfung ist in den Tarifen Pro und Business verfügbar.

So funktioniert es

1. Beim ersten Aktivieren der visuellen Prüfung wird ein Basis-Schnappschuss (Baseline) erstellt - die Referenz, mit der später verglichen wird.
2. Bei jeder weiteren Prüfung erstellen wir einen neuen Schnappschuss und vergleichen ihn Pixel für Pixel mit der Baseline.
3. Überschreitet der Unterschied den eingestellten Schwellenwert (standardmäßig 5 %), wird der Monitor als geändert markiert und Sie erhalten eine Benachrichtigung.
4. Im Monitordetail sehen Sie die Baseline und den aktuellen Schnappschuss nebeneinander sowie die hervorgehobenen Stellen, an denen sie sich unterscheiden.

Wann Sie es verwenden sollten

• Nach dem Ausrollen einer neuen Version der Website - erkennt automatisch kaputte Schriften, CSS oder das Layout
• Für Marketing-Landingpages - damit Sie wissen, dass das GA-Tag und andere Elemente ihre Position nicht verlassen haben
• Für Online-Shops - die Kontrolle, dass die Schaltfläche "In den Warenkorb" weiterhin sichtbar ist
• Für Statusseiten - damit Sie wissen, dass Ihre eigene Statusseite korrekt dargestellt wird

Einrichtung

1. Wählen Sie beim Erstellen eines Monitors den Typ Visuelle Prüfung - der erste Schnappschuss wird automatisch als Baseline gespeichert
2. Im Monitordetail im Abschnitt Visuelle Prüfung sehen Sie den Referenz-Schnappschuss, den aktuellen Schnappschuss sowie die hervorgehobenen Unterschiede
3. Das Änderungslimit stellen Sie mit dem Schieberegler Limit der visuellen Änderung ein (0,5 bis 30 %, standardmäßig 5 %)
4. Aktualisieren Sie die Baseline nach jedem Ausrollen einer neuen Version mit der Schaltfläche Aktuellen als Referenz festlegen

Achten Sie auf Fehlalarme

• Datum und Uhrzeit auf der Seite - jede Prüfung stellt sie anders dar. Aktualisieren Sie nach dem Ausrollen einer solchen Änderung immer die Baseline.
• Werbung und Banner - sie wechseln zwischen den Schnappschüssen und lösen oft einen Fehlalarm aus. Am besten funktioniert die visuelle Prüfung auf Seiten ohne Werbung.
• Animationen - der erste und der nächste Schnappschuss können unterschiedlich sein. Die visuelle Prüfung wartet 1,5 Sekunden nach dem Laden, damit sich die Animation beruhigt.