Die meisten Open-Source-Werkzeuge für visuelle Regression — BackstopJS, Wraith oder die Screenshot-Prüfungen von Playwright und Cypress — beruhen auf derselben Idee: einen Screenshot vorher und nachher aufnehmen und dann die Pixel zählen, die sich geändert haben. Die Engine ist fast immer dieselbe: die beiden Bilder Pixel für Pixel vergleichen.
Das ist einfach, robust und perfekt, um einen groben Layout-Bruch zu erkennen. Aber dieser Ansatz hat einen strukturellen Kompromiss, den kaum jemand misst. Wir haben es getan, mit Zahlen belegt — und in Fällen, die ihn gezielt offenlegen, ist das Ergebnis eindeutig.
Zwei Einstellungen, die man nicht verwechseln darf
Die Verwirrung ist überall, also klären wir das. Diese Art von Werkzeug hat zwei unterschiedliche Einstellungen:
- Die Toleranz pro Pixel: ab welchem Farbunterschied ein Pixel als „wirklich" geändert gilt. Das ist ein Regler für die Farbempfindlichkeit, Pixel für Pixel angewendet.
- Der Entscheidungsschwellenwert: sobald die unterschiedlichen Pixel gezählt sind, schaut man, welcher Prozentsatz des Bildes sich geändert hat, um zu entscheiden, ob der Test besteht oder durchfällt. Das Referenzwerkzeug BackstopJS setzt ihn standardmäßig auf 0,1 % der Pixel.
Unser Test folgt genau dieser Logik: wir zählen die unterschiedlichen Pixel (Werkzeug in seiner Standardempfindlichkeit), dann wenden wir den Entscheidungsschwellenwert von 0,1 % an, um bestanden oder durchgefallen zu sagen.
Das Schwellenwert-Dilemma
Dieser Prozent-Schwellenwert sperrt den Ganzbild-Vergleich in einen Kompromiss ein, den er nicht gewinnen kann:
- Mit einem Prozent-Schwellenwert (Standardeinstellung, 0,1 %) → man lässt die kleinen echten Änderungen durchrutschen. Ein Button, der die Farbe wechselt, ein Rand, der sich abrundet, ein Zellenstatus „OK" → „FEHLER": all das wiegt einen winzigen Bruchteil der Pixel. Unter 0,1 % wird der Test grün, obwohl sich die Seite sichtbar geändert hat. Eine echte Änderung bleibt unbemerkt.
- Ganz ohne Toleranz (das andere Extrem, die Standardeinstellung von Playwright) → man scheitert am geringsten Pixel Unterschied, einschließlich der bloßen Kantenglättung — jener halbtransparenten Pixel am Rand von Buchstaben und Formen, die von einer Darstellung zur nächsten leicht variieren. Das Ergebnis: Fehlalarme in Massen, und das Team ignoriert das Werkzeug am Ende.
Echte Werkzeuge bieten Schutzmechanismen — Zonen maskieren, Regionen ignorieren, zuschneiden. Sie funktionieren, aber man muss sie im Voraus, von Hand, Zone für Zone konfigurieren. Lokalisierte Empfindlichkeit ist nicht automatisch.
Der Test unter realen Bedingungen
Wir haben auf genau derselben Seite (von einem Browser gerendert, reproduzierbar eingefroren, Bildschirmbreite 1280 px, Vollseiten-Aufnahme) zwei Ansätze verglichen:
- Delta-QA: unser Vergleicher, der Element für Element vergleicht (er ordnet die Elemente zwischen den beiden Versionen zu und vergleicht Pixel nur auf der feinsten Ebene);
- der Ganzbild-Vergleich: wir vergleichen die beiden Screenshots Pixel für Pixel, dann wenden wir den Entscheidungsschwellenwert von 0,1 % an.
Fünf Fälle, ausgewählt, um den blinden Fleck offenzulegen:
| Fall | Änderung | Delta-QA (Element für Element) | Ganzbild-Vergleich (% geänderte Pixel, Urteil beim 0,1-%-Schwellenwert) |
|---|---|---|---|
| Verschiebung | ein Dreieck verschiebt sich auf der Seite | 2 Signale: verschwunden + erschienen am Element |
0,005 % → NICHT ERKANNT |
| Umordnung | Karten und Menü umgeordnet | 13 lokalisierte Signale (welche Karten, welche Einträge) | 0,63 % → durchgefallen, aber diffuser Block, ohne nähere Angabe |
| Feine Änderung | Rand abgerundet von 12 px auf 30 px | 1 Signal auf der betroffenen Karte | 0,011 % → NICHT ERKANNT |
| Lokalisierte Farbe | Kopfzeile einer Karte grün → violett | die richtige Kopfzeile (Intensität 0,996) + 2 schwache Eltern-Signale | 5,03 % → durchgefallen, aber diffuser Block, ohne nähere Angabe |
| Tabellenzelle | Status einer Zeile FAIL → WARN | 2 starke Signale auf den richtigen Zeilen | 0,036 % → NICHT ERKANNT |
In diesen fünf Fällen liegen drei echte Änderungen — eine Elementverschiebung, eine Randabrundung, ein Zellenstatus — unter dem Standard-Entscheidungsschwellenwert von 0,1 %. Ein mit Standardwerten konfiguriertes Werkzeug erklärt sie für „keine Änderung". Und doch sind das genau die Regressionen, die ein visueller Test erkennen soll.
Für die zwei Fälle, die der Pixel-für-Pixel-Vergleich „erkennt" (Umordnung, Farbe), sagt er nur eines: „X % der Pixel haben sich irgendwo geändert". Keine Ahnung, welches Element, noch welcher Art. Delta-QA hingegen benennt das genaue Element und qualifiziert die Änderung (verschoben, hinzugefügt, entfernt, geändert).
Warum die Elementebene alles ändert
Delta-QA vergleicht kein großes Bild. Es:
- baut den Baum der Seitenelemente neu auf;
- ordnet jedes Element zwischen den beiden Versionen zu (nach seinem Inhalt, dann seiner Position);
- vergleicht Pixel nur auf der feinsten Ebene und erkennt die eigenen Änderungen eines Blocks, indem es die Zonen seiner bereits geänderten Unterelemente ignoriert;
- lässt die Kantenglättung bei der Zählung wirklich unterschiedlicher Pixel außen vor.
Folge: Es kann sehr empfindlich sein (einen 1-px-Rand auf einem großen Block erkennen), ohne in den Glättungsvariationen zu ertrinken, weil dieses Rauschen außen vor bleibt und jedes Signal an ein bestimmtes Element gebunden ist. Eine Verschiebung ist kein „roter Block": es ist ein Element, das an der alten Stelle als verschwunden und an der neuen als erschienen gemeldet wird. Lokalisierte Empfindlichkeit ist automatisch, ohne im Voraus vorzubereitende Maske.
Methodik — und ihre Grenzen
Uns liegt Strenge am Herzen, also hier die Grauzone:
- Dieselbe Seite für beide. Beide Ansätze gehen von genau derselben gerenderten und eingefrorenen Seite aus — keine Darstellungsverzerrung.
- Zahlen gegen das Referenzwerkzeug geprüft. Unser Prüfstand berechnet den Farbunterschied auf dieselbe Weise wie das meistgenutzte Pixel-für-Pixel-Vergleichswerkzeug. Wir haben die 5 Fälle mit diesem offiziellen Werkzeug gegengeprüft: bei der deutlichen Farbänderung liefern beide 5,036 % gegen 5,034 % — nahezu identisch. In den anderen Fällen zählt das Referenzwerkzeug noch weniger Pixel (es ignoriert die Kantenglättung) — es ist also noch anfälliger, kleine Änderungen durchrutschen zu lassen. Die Zahlen in der Tabelle sind seine eigenen.
- Delta-QA über-meldet (und wir stehen dazu). Bei der Farbänderung gibt es 3 Signale aus: das echte (die Kopfzeile, Intensität 0,996) + 2 sehr schwache Eltern-Signale (0,005 und 0,001). Das ist gewollt: wir melden alles, und der Empfindlichkeitsregler der Oberfläche blendet diese schwachen Signale standardmäßig aus. Aber um es klar zu sagen: die rohe Zählung ist nicht „1 Änderung = 1 Signal".
- Ein einziger Testkontext. Diese Messungen werden bei einer einzigen Bildschirmgröße, ruhender Seite, auf kontrollierten Testseiten durchgeführt. Wir behaupten nichts über mehrere Bildschirmgrößen, interaktive Zustände (Hover, Fokus) oder wirklich verrauschte Seiten — andere Baustellen.
- Umordnung. Delta-QA hat die umgeordneten Karten als „geändert" statt „verschoben" eingestuft, aber nach Element lokalisiert — was immer noch weit über einem diffusen Block liegt.
Und seien wir fair: das ganze Bild zu vergleichen ist einfach, braucht nur eine Aufnahme pro Seite, bleibt hervorragend für einen groben Bruch, und seine Zonenmasken funktionieren. Das Problem ist nicht, dass es schlecht wäre — sondern dass es einen zwingt, zwischen dem Durchrutschenlassen des Feinen und dem Schreien über das Rauschen abzuwägen, und die Feinheit von Hand einzustellen.
Was man sich merken sollte
Wenn dein visueller Regressionstest auf einem Ganzbild-Vergleich mit einem Prozent-Schwellenwert in der Standardeinstellung beruht, lässt er wahrscheinlich Änderungen durchrutschen, die deine Nutzer sehen — Verschiebungen, lokalisierte Farben, Mikro-Stiländerungen. Den Schwellenwert zu senken fängt sie ein, weckt aber die Fehlalarme; Masken helfen, werden aber Zone für Zone, im Voraus konfiguriert.
Der Vergleich Element für Element ist keine Einstellung: es ist eine andere Architektur, die zugleich die Empfindlichkeit und die Präzision zurückgibt — mit, als Bonus, dem Namen des Elements und der Art der Änderung.
Weiterführende Lektüre
- Delta-QA vs BackstopJS: strukturell oder Pixel für Pixel?
- False Positives in visuellen Tests reduzieren
- Pixel für Pixel vs perzeptueller Vergleich
Reproduzierbarer Test: der „Ganzbild"-Vergleich wurde mit dem Open-Source-Referenzwerkzeug (dem pixelmatch-Paket, Node/npm) in seiner Standardempfindlichkeit erstellt, dann mit einem Entscheidungsschwellenwert von 0,1 % wie BackstopJS — auf genau derselben eingefrorenen Seite wie Delta-QA.