Screenshot-Vergleich

Beim Screenshot-Vergleich werden zwei oder mehr Aufnahmen nebeneinandergestellt oder übereinandergelegt, um sichtbare Unterschiede zwischen Versionen, Zuständen und Umgebungen zu erkennen.

Related workflow terms: Vorher-Nachher-Screenshot, Visuelle Regressionstests.

Manueller und automatisierter Vergleich

Am einfachsten werden zwei Bilder nebeneinander geöffnet. Das reicht für einen schnellen Abgleich von Design und Live-Seite oder für einen Vorher-Nachher-Zustand.

Bei vielen Seiten und feinen Abständen, Farben oder Schriftunterschieden stößt das Auge an Grenzen. Der gleiche manuelle Vorgang bei jedem Pull Request oder Deployment ist außerdem nicht tragfähig.

Automatische Software erfasst eine Baseline und ein neues Bild mit gleichen Einstellungen. Ein Pixelvergleich erzeugt ein Diff-Bild, in dem geänderte Bereiche kontrastreich markiert werden. Selbst Verschiebungen um einen Pixel werden sichtbar.

Typische Einsatzbereiche

• QA und Tests: unbeabsichtigte visuelle Regressionen in Seiten, Komponenten und Breakpoints finden.
• Designprüfung: implementierte Oberfläche mit freigegebenem Entwurf abgleichen.
• Browser-Vergleich: Chrome, Firefox, Safari und Edge auf einheitliche Darstellung prüfen.
• Responsive Audit: Verhalten in verschiedenen Viewport-Breiten gegenüberstellen.
• Deployment-Prüfung: Bilder vor und nach einem Release sichern.

So funktioniert ein visueller Diff

1. Baseline erfassen: bekannten guten Zustand in festem Viewport und fester Konfiguration aufnehmen.
2. Neue Version erfassen: denselben Zustand mit identischen Parametern aufnehmen.
3. Bilder ausrichten: gleiche Abmessungen herstellen; manche Tools gleichen kleine Verschiebungen aus.
4. Pixel vergleichen: etwa direkt, wahrnehmungsbasiert oder über Structural Similarity (SSIM).
5. Diff erzeugen: abweichende Pixel farbig hervorheben.

Die Empfindlichkeit ist einstellbar. Ein strenger Wert meldet jede Subpixelabweichung, ein lockerer blendet kleinere Renderingunterschiede aus.

Ein guter Ablauf speichert neben den Bildern URL, Viewport, Browser, Farbschema und Datum. Ohne dieses Rezept lässt sich der Vergleich später schwer erklären oder wiederholen.

Häufige Fehler

• Unterschiedliche Viewports vergleichen. Dann wird jede responsive Verschiebung gemeldet. Maße müssen übereinstimmen.
• JPG verwenden. Verlustartefakte erzeugen falsche Diffs; nutze PNG.
• Dynamische Inhalte ignorieren. Maskiere Zeitstempel, Anzeigen, Animationen und nutzerspezifische Daten.
• Schwellenwert zu locker setzen. Beginne streng und lockere nur für nachweislich variable Bereiche.