BackstopJS: Vergleich von Webseiten-Screenshots
BackstopJS ist eine Software, welche es ermöglicht Änderungen von Webseiten anhand von Screenshots zu ermitteln. Nehmen wir zuerst ein Beispiel aus der Praxis.
Sie haben eine TYPO3-Aktualisierung von Version 6.2 auf 8.7 durchgeführt. Dabei soll sich die Webseite an sich nicht ändern. Lediglich das System hinter der Webseite ändert sich. Die Ausgabe muss identisch bleiben.
Nun kann der Entwickler die wichtigsten Seiten in zwei Browser-Fenstern öffnen und miteinander vergleichen. Das gestaltet sich jedoch als recht mühselig, besonders wenn es sich um eine responsive Webseite handelt. Hier müssten Sie die unterschiedlichen Browser-Größen zusätzlich untersuchen. Wesentlich schneller geht das mit BackstopJS.
Was ist BackstopJS?
BackstopJS ist ein Node.js-Modul, welches dazu dient visuelle Merkmale von Webseiten und Applikationen zu vergleichen. In der Fachsprache werden diese Tests visuelle Regressions-Tests genannt.
Wesentliche Merkmale der Software sind:
- Rendern der Webseite via Chrome Headless, PhantomJS oder SlimerJS
- Nutzeraktionen können via ChromyJS oder CasperJS simuliert werden
- Ergebnisse können direkt im Browser oder der Kommandozeile (CLI) angesehen werden
- kann global oder auch lokal je Projekt verwendet werden
- Einfache Handhabung
Installation von BackstopJS
Wie bereits erwähnt ist BackstopJS ein Node.js-Modul. Das bedeutet, dass für die Installation von BackstopJS zunächst Node.js installiert sein muss. Aber auch diese Installation ist sehr einfach. Für Windows steht Beispielsweise eine setup.exe zur Verfügung, welche lediglich ausgeführt werden muss.
Nach der Installation von node.js können Sie den bereits mitgelieferten Node Paket Manager (npm) nutzen, um BackstopJS zu installieren. Öffnen Sie hierfür Ihre Kommandozeile und führen Sie den folgenden Befehl aus:
npm install backstopjs -g
Die Konsole zeigt Ihnen an, wenn die Installation erfolgreich war. Der Parameter -g sorgt dafür, dass das Modul global installiert. Dadurch können Sie das Modul in jedem beliebigen Ordner ausführen.
Diese zwei Schritte reichen aus, um BackstopJS zu installieren. Nun können wir mit den ersten Tests fortfahren.
Testen und Vergleichen von Screenshots
Konfiguration via backstop.json
Um einen Test durchführen zu können, legen Sie einen neuen Ordner an. In diesem Ordner erstellen Sie eine neue Datei mit dem Namen backstop.json. In ihr nehmen Sie die Konfigurationen für Ihren Test vor. Für den Einstieg haben wir Ihnen hier mal einen Beispielinhalt zusammengetragen.
{
"id": "rev_clickstorm",
"viewports": [
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet_v",
"width": 568,
"height": 1024
},
{
"name": "tablet_h",
"width": 1024,
"height": 768
}
],
"scenarios": [
{
"label": "clickstorm",
"url": "http://my-test-domain.local/",
"referenceUrl": "https://www.clickstorm.de/"
}
],
"paths": {
"bitmaps_reference": "bitmaps_reference",
"bitmaps_test": "bitmaps_test",
"engine_scripts": "engine_scripts",
"html_report": "html_report",
"ci_report": "ci_report"
},
"casperFlags": [],
"engine": "phantomjs",
"report": ["browser"],
"debug": false
}
Kurz zur Erklärung. In dem ersten Teil legen wir die verschiedenen Größen der Browser-Fenster fest. Diese können je nach Projekt variieren. Im Anschluss definieren wir die Szenarien. Hier sind die URLs anzugeben, welche untersucht werden sollen.
Als Besonderheit haben wir hier eine Referenz-URL eingetragen. Dies ist ein lokaler Entwicklungsstand, welcher mit der Online-Version verglichen werden soll.
Anschließend wird definiert, wo die Ergebnisse gespeichert werden sollen. Die Ordner werden von BackstopJS automatisch angelegt.
Zum Schluss definieren wir noch, was als Engine PhantomJS genutzt werden soll. Mit der Chrome Headless Version hatten wir derzeit noch Probleme. PhantomJS können Sie auch ganz einfach via npm installieren.
npm install phantomjs -g
Wenn Sie in einem Ordner noch keine Konfigurationsdatei angelegt haben, können Sie dies auch von BackstopJS erstellen lassen. Nutzen Sie dafür die Kommandozeile und führen Sie backstop init aus. Nun finden Sie in dem Ordner eine backstop.json mit Beispielinhalten.
Ist die backstop.json angelegt, kann mit Testen begonnen werden.
BackstopJS Tests durchführen
Das Testen könnte einfacher nicht sein. Geben Sie in Ihre Kommandozeile diesen Befehl ein:
backstop test
Wenn Sie unsere backstop.json als Grundlage nutzen, öffnet sich nach der Durchführung automatisch ein Browser-Fenster. Hier sehen Sie nun die Ergebnisse des Tests. Da dies unser erster Durchgang war, ist ein Vergleich nicht möglich. Nehmen Sie eine Änderung an der Webseite vor und führen Sie den Befehl erneut aus. Nun sollten Sie die Unterschiede erkennen können.
Die Unterschiede werden im 3. Screenshot farbig hervorgehoben. Scrollen Sie weiter runter, um alle Szenarien und Browsergrößen zu sehen.
Um die Referenz-URL in unserer backstop.json als Grundlage für den Vergleich zu nutzen, führen wir vor dem Testen den folgenden Befehl aus:
backstop reference
Beim erneuten Aufruf von backstop test wird nun nicht mit der vorigen Version verglichen, sondern mit der angegebenen Referenz.
Ausblick
Dieses Tutorial sollte Ihnen lediglich den Einstieg in BackstopJS ermöglichen. Mit der Software ist wesentlich mehr möglich, u.a. automatisierte Tests oder simulierte Nutzerinteraktionen via JavaScript. Ein weiteres Tool, welches automatisiert die Performance einer Webseite messen kann, ist blackfire.io. Auch hierzu haben wir einen Blog-Beitrag verfasst.
Haben Sie selbst bereits Erfahrungen mit BackstopJS oder einer ähnlichen Software gemacht? Teilen Sie uns diese gerne in unseren Kommentaren mit oder nehmen Sie Kontakt zu uns auf.
