DDEV-Addon für visuelle Regression Tests mit BackstopJS

BackstopJS macht Screenshots von Webseiten und vergleicht diese mit Referenzbildern. Damit wird es leicht, unbeabsichtigte Veränderungen schnell zu bemerken. Auch für Updates setze ich das Tool gerne ein. Um die Benutzung zu vereinfachen habe ich ein Addon für DDEV gebaut, das BackstopJS in DDEV Projekten bereitstellt.

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.

Neuen Kommentar schreiben

Bild eines gelben Schilds, auf dem 'Blogger fütternewCommentn verboten' steht.