Spring GDS 25. Jubiläum
Ein Logistikunternehmen, das in 190 Länder versendet, hat etwas gebaut, um an sich selbst zu liefern.
Visual Regression Testing fängt die Änderungen ab, die ein funktionaler Test nie sieht. Es macht einen Screenshot einer Seite oder Komponente, speichert ihn als Baseline und vergleicht dann jeden späteren Build Pixel für Pixel mit diesem Bild. Bewegt sich etwas, überlappt oder verschiebt die Farbe, markiert der Diff es. Ein Button, der noch klickt, aber jetzt halb aus dem Bild ragt, besteht einen funktionalen Test und fällt durch einen visuellen.
Der Grund, warum es das gibt: Die meisten UI-Brüche sind still. Eine CSS-Anpassung für eine Komponente blutet in drei weitere. Ein Schriftwechsel bringt ein Layout auf dem Smartphone aus der Spur. Die Logik bleibt intakt, also bleiben Unit- und End-to-End-Tests grün, und die Regression geht trotzdem live. Werkzeuge wie Percy, Chromatic und Playwrights eingebauter Snapshot-Vergleich sitzen in dieser Lücke, rendern die Oberfläche und zeigen, was sich geändert hat, damit ein Mensch es freigibt oder ablehnt.
Das Schwierige ist das Rauschen. Anti-Aliasing, dynamische Inhalte und Animation können falsche Diffs auslösen, die die echten begraben. Daher stimmen Teams Schwellen ab, maskieren volatile Regionen und frieren Timer ein, um das Signal sauber zu halten. Gut gemacht hält so ein Design System mit Hunderten Komponenten über jedes Release konsistent, ohne dass jemand jeden Screen von Hand prüft.
Wir verdrahten visuelle Prüfungen in dieselbe Pipeline wie alles andere. Bei einem Design System oder einem komponentenlastigen Frontend fängt ein Snapshot-Lauf bei jedem Pull Request das Bluten ab, bevor es eine echte Seite erreicht, und der Diff landet vor einem Reviewer statt vor einem Kunden.
Die Arbeit steckt im Abstimmen. Wir maskieren die Regionen, die sich aus legitimen Gründen ändern, setzen Schwellen, die echte Verschiebungen markieren, ohne falschen Alarm zu schlagen, und halten Baselines unter Prüfung, damit sie nicht still abdriften. Unsere Testautomatisierung deckt das Verhalten ab, die visuelle Regression die Erscheinung, und gemeinsam sorgen sie dafür, dass eine zuversichtliche Stiländerung nicht zum Support-Ticket wird. Wir halten die Suite ehrlich, indem wir Snapshots aussortieren, die ihren Platz nicht mehr verdienen.
Veröffentlichen Sie UI-Änderungen und wollen wissen, dass auf dem Bildschirm nichts bricht? Richten wir es ein.
Ein Logistikunternehmen, das in 190 Länder versendet, hat etwas gebaut, um an sich selbst zu liefern.
Eine Marke in ein funktionierendes Geschäft verwandeln.
Eine halbe Million Menschen. Eine App. Null Chaos.















