Simon Praetorius5d ago

Wer hat Lust, bei größeren Umbauten an Websites alle Seiten durchzuklicken? Genau, niemand. Für statische Elemente bietet sich Visual Regression Testing an.

Da mich die aktuellen Lösungen für meinen Anwendungsfall #typo3 Upgrade nicht wirklich überzeugt haben, bin ich in ein Rabbithole gerutscht. Das Ergebnis: Der Visual Regression Tester.

https://github.com/s2b/visual-regression-tester

XML-Sitemap(s) werden mit Playwright gecrawlt, Live-Screenshot wird mit Dev verglichen. Das klappt in der Praxis ziemlich gut. 1/2

GitHub - s2b/visual-regression-tester: Collects and compares screenshots of websites

Collects and compares screenshots of websites. Contribute to s2b/visual-regression-tester development by creating an account on GitHub.

GitHub
Show threadcweiske4d ago

@s2b Ich nutze #sitediff für den Vergleich auf HTML-Ebene, und #BackstopJS für den visuellen Vergleich.

Im Gegensatz zu deinem Tool können beide das HTML vor dem Vergleich nochmal modifizieren, um z.B. Cookiebanner zu entfernen.

https://github.com/evolvingweb/sitediff
https://github.com/garris/BackstopJS

GitHub - evolvingweb/sitediff: SiteDiff makes it easy to see differences between two versions of a website.

SiteDiff makes it easy to see differences between two versions of a website. - evolvingweb/sitediff

GitHub
Show threadSimon Praetorius4d ago
@cweiske Vorheriges Verändern geht mit Playwright auch, mache ich zum Beispiel, um lazyloading zu deaktivieren. Aber ja, es gibt Alternativen zu meinem Tool.
Show threadAlexander Schnitzler4d ago
@s2b @cweiske Wie genau deaktivierst du lazy loading? lazy-Attribut wegwerfen?
Show threadcweiske
@alexanderschnitzler @s2b Bei #BackstopJS kann man im `onReady` die "lazy"-Attributwerte durch "eager" ersetzen: https://github.com/garris/BackstopJS/issues/57
Leider lädt die Seite dann noch lange weiter, ist also nicht "ready". Man kann dann das Screenshotten um einige Sekunden verzögern, allerdings klappt das nicht zuverlässig.
Das Problem habe ich noch nicht abschliessend gelöst.
Lazyload and font icons · Issue #57 · garris/BackstopJS

It seems like backstopJS cannot process font-icons? I am also struggling with images that are lazy loaded. They are not shown at all (https://github.com/aFarkas/lazysizes). This is the page I am te...

GitHub
Jun 24 at 7:34amWeb
Show threadSimon Praetorius3d ago
@cweiske Das in Kombination mit „networkidle“ anstatt „ready“ funktioniert bei mir relativ zuverlässig. Es gibt aber immer noch einige Seiten, wo man mit manuellen Timeouts nachhelfen muss. https://github.com/s2b/visual-regression-tester/blob/main/src/VisualRegressionPage.ts#L183 @alexanderschnitzler
visual-regression-tester/src/VisualRegressionPage.ts at main · s2b/visual-regression-tester

Collects and compares screenshots of websites. Contribute to s2b/visual-regression-tester development by creating an account on GitHub.

GitHub
Show threadcweiske3d ago
@s2b @alexanderschnitzler BackstopJS liefert bei mir niemals ein "networkidle" - timed immer nach 30s oder 1 Minute aus.