Visuelle Regressionstests mit Playwright und pixelmatch
Kennst du das Problem nach einem Contao-Update: Technisch ist alles grün, aber im Frontend sehen einzelne Seiten plötzlich anders aus? Genau diese stillen visuellen Unterschiede sind im Agenturalltag nervig: Sie fallen oft erst spät auf, kosten Korrekturrunden und machen Abnahmen unnötig zäh.
Die Lösung: kein Bauchgefühl, sondern ein messbarer Vorher/Nachher-Vergleich zwischen altem und neuem Stand (z. B. 4.13 → 5.7), damit du schneller siehst, wo Handlungsbedarf ist.
SaaS-Dienste
Wenn du auf einen fertigen Dienst setzen willst, sind diese Lösungen etabliert:
Diese Tools bieten noch einiges mehr, wollen aber auch monatlich Geld haben. Es geht günstiger — selbstgehostet bzw. lokal laufend.
Die schlanke Alternative: Playwright + pixelmatch
Für die Aufnahmen kommt Playwright zum Einsatz, für den Bildvergleich pixelmatch, für das PNG-Handling pngjs. Damit bekommst du pro Seite eine konkrete visuelle Abweichung in Prozent statt „sieht irgendwie anders aus". Das Gute: ChatGPT und Claude können dir beim Setup der Skripte, bei Selektor-Strategien und beim Feinschliff der Auswertung helfen.
So läuft der Vergleich in der Praxis:
- Vor dem Update Snapshot ziehen (LIVE oder alter Stand).
- Nach dem Update Snapshot ziehen (DEV/Stage auf dem neuen Stand).
- Beide Stände mit identischer Viewport-Breite, identischem Scroll-Verhalten und stabilisierten Rendering-Bedingungen aufnehmen.
- Mit pixelmatch pro URL die Differenz berechnen.
- Ergebnisliste nach Abweichung absteigend sortieren und zunächst die auffälligen Seiten prüfen.
Der Knackpunkt: Reproduzierbarkeit
Setz feste Browser-Parameter (z. B. 1360px Breite), minimiere Zufallsfaktoren (Animationen, Lazyload-Effekte soweit möglich) und arbeite mit einer klaren URL-Quelle (Sitemap). Dann bekommst du bei jedem Lauf vergleichbare Zahlen.
Typische Fehler, die du vermeiden solltest:
- Unterschiedliche Cookie-/Consent-Zustände zwischen LIVE und DEV.
- Unterschiedliche Bildgrößen durch spätes Nachladen.
Was du im Agenturalltag konkret gewinnst
- Du siehst Fehler früher — bevor Kund:innen sie entdecken.
- Du weißt sofort, welche Seiten wichtig sind: hohe Prozentzahl = zuerst prüfen.
- Du sparst Zeit, weil du nicht jede Seite manuell aufrufen musst.
Bis so ein System zuverlässig läuft, dauert es eine Weile. Dafür spart es bei jedem folgenden Update Zeit, sodass sich die Einrichtung nach und nach amortisiert.
Visuelle Tests prüfen das Layout — ob Formulare nach dem Update noch funktionieren, klärst du mit automatisierten Formular-Tests via Cypress.