Visueller Websitevergleich nach einem Contao Update

Moin!

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.

Ich habe mir deshalb letzte Woche Gedanken gemacht, wie wir das in Zukunft sauber und reproduzierbar lösen können. Ziel war klar: kein Bauchgefühl, sondern ein messbarer Vorher/Nachher-Vergleich zwischen altem und neuem Stand (z. B. 4.13 → 5.7), damit ich schneller sehe, wo Handlungsbedarf ist.

Dafür gibt es ein paar starke (kostenpflichtige) Dienste. Wenn du SaaS nutzen willst, sind z. B. diese Lösungen etabliert:

• Percy (BrowserStack)
• Applitools Visual AI
• Chromatic

Diese Tools bieten zwar noch einiges mehr (was ich nicht brauche), wollen aber auch monatlich Geld haben. Es geht aber auch günstiger – selbstgehostet bzw. lokal laufend. Unsere Lösung ist bewusst schlank: Playwright + pixelmatch.

Für die Aufnahmen nutzen wir Playwright, für den Bildvergleich pixelmatch, für 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:

1. Vor dem Update Snapshot ziehen (LIVE oder alter Stand).
2. Nach dem Update Snapshot ziehen (DEV/Stage auf 5.7).
3. Beide Stände mit identischer Viewport-Breite, identischem Scroll-Verhalten und stabilisierten Rendering-Bedingungen aufnehmen.
4. Mit pixelmatch pro URL die Differenz berechnen.
5. Ergebnisliste nach Abweichung absteigend sortieren und zunächst die auffälligen Seiten prüfen.

Der Knackpunkt ist 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.

Was du damit im Agenturalltag konkret gewinnst:

• Du siehst Fehler früher (bevor der Kunde sie entdeckt).
• Du weißt sofort, welche Seiten wichtig sind: hohe Prozentzahl = zuerst prüfen.
• Du sparst Zeit, weil du nicht jede Seite manuell aufrufen musst

Es hat natürlich eine ganze Weile gedauert, bis die Systeme so gearbeitet haben, wie ich mir das vorgestellt habe. Aber für die Zukunft erhoffe ich mir bei jedem Update eine kleine Zeitersparnis, sodass ich die Einrichtungszeit irgendwann wieder drin habe.

Hier noch ein paar typische Fehler, die du vermeiden solltest:

• Unterschiedliche Cookie-/Consent-Zustände zwischen LIVE und DEV.
• Unterschiedliche Bildgrößen durch spätes Nachladen.

Nutzt du visuelle Vergleichssysteme für Contao Major-Updates?

Erstma’,
Dennis

PS: LASR, SOLO und SIRIUS haben ein kleines Update bekommen. Bei Neuinstallationen wird nun direkt Contao 5.7 (statt wie bisher 5.3) installiert.