Was macht BackstopJS und warum ist es hilfreich?
Mit BackstopJS kann man automatisiert Screenshots von Webseiten anfertigen und diese mit Referenzbildern vergleichen, die vorher oder von einer Referenzseite angefertigt wurden.
Damit findet man schnell Veränderungen an einer Seite. Das kann bei der Entwicklung hilfreich sein, um ungewünschte Nebeneffekte schnell zu bemerken.
Besonders gerne setze ich BackstopJS aber für Major-Versionsupdates (bei TYPO3) ein, gerade bei umfangreichen Projekten mit mehreren Tausend Seiten. In der Regel erstelle ich dafür eine Kopie vom Projekt für das Update. Dann lasse ich BackstopJS anhand einer aus der Sitemap erstellten Liste an URLs Referenzbilder der aktuellen Seite machen. Anschliessend lasse ich BackstopJS diese Referenzbilder mit Screenshots der Update-In-Progress-Seite machen. Es ist erstaunlich, wie viele auch kleinere Abweichungen damit gefunden werden, die dem blossen Auge gerne entgehen, z.B. leicht geänderte Breadcrumbs.
Man muss die Config von BackstopJS in der Regel etwas tunen, damit False Positives reduziert werden. Auch lazy loading von Bildern und anderen Inhalten ist immer etwas tricky. Hat man das aber einmal erledigt, dann ist es ein zuverlässiges und hilfreiches Tool.
Installation des BackstopPlugins in DDEV
Um die Einrichtung von BackstopJS in DDEV-Projekten zu vereinfachen habe ich ein kleines Addon gebaut. Die Installation ist simpel:
ddev get mmunz/ddev-backstopjs
ddev restart
Ein erster Test
Das Addon bringt erstmal keine BackstopJS Konfiguration mit.
Für einen ersten Test erstellen wir deshalb eine minimale BackstopJS Konfiguration mit:
backstop init
ddev backstop init
Das Kommando erstellt die Konfiguration tests/backstop/backstop.json.
Anschliessend können Referenzbilder der dort hinterlegten URL erstellt (reference) und verglichen werden (test).
Da die selbe URL verglichen wird, sehen wir hier keine Unterschiede.
ddev backstop reference
ddev backstop test
Der generierte Test-Report kann im Browser angesehen werden, indem man ihn lokal öffnet:
open tests/backstop/backstop_data/html_report/index.html
Komplexere Konfiguration
Man kann nun die Konfiguration von BackstopJS den eigenen Wünschen anpassen.
Eine etwas modularere Konfiguration die ich für meine Projekte nutze findet man unter https://github.com/mmunz/backstopjs-config.
Kommentare (0)
Bisher keine Kommentare vorhanden.