Anzeige
Anzeige
How-To
Artikel merken

Layout-Testing mit dem Galen-Framework: Stresstest fürs Layout

Die Anforderungen moderner Websites sind enorm gestiegen. Automatisierte Testverfahren wie das Galen-Framework helfen dabei, den Überblick zu bewahren und Fehler ausfindig zu machen.

6 Min. Lesezeit
Anzeige
Anzeige

(Screenshot: Galen)

Als Webentwickler zu arbeiten heißt, täglich Neues zu lernen. Die Designs zeitgemäßer Websites müssen immer mehr Bildschirmgrößen und Geräte unterstützen, die Layouts werden komplexer und neue Techniken kommen zum Einsatz. Außerdem nimmt die Abstraktion zu, nicht zuletzt aufgrund neuer Web-Technologien, Frameworks und Präprozessoren. Mit der Komplexität steigt aber auch die Fehleranfälligkeit, sodass Entwickler Websites kaum noch mit vertretbarem Arbeitsaufwand testen können. Doch unschöne Layout-Fehler soll schließlich nicht erst der Kunde finden.

Anzeige
Anzeige

Umso erstaunlicher ist es, dass die Entwicklung von Testwerkzeugen nicht mit der allgemeinen Entwicklung Schritt gehalten hat. Viele testen ihre Webprojekte immer noch manuell. Doch so langsam setzt sich die Erkenntnis durch, dass systematische und automatisierte Testmethoden gewinnbringend sind. Lange Zeit fehlten einfache und gute Testwerkzeuge. Mittlerweile hat sich aber einiges getan. Ein guter Einstieg in das automatisierte Layout-Testing bietet das Open-Source-Framework Galen.

Die Testmethoden

Grob gesagt gibt es drei Arten von Testmethoden, die Entwickler getrennt oder in Kombination nutzen können. Die erste sind die Spezifikationstests. Sie prüfen die Layouts anhand vorher festgelegter Regeln. Das bedeutet jedoch, dass Entwickler die Optik ihrer Website in einer eigenen Syntax separat definieren müssen – dies ist also erst einmal mit einem gewissen Mehraufwand verbunden. Die Spezifikationstests ähneln in ihrer analytischen Art methodisch den funktionalen Testtechniken und sind daher gut für ein Test-Driven-Development (TDD) geeignet. Das Galen-Framework arbeitet in erster Linie spezifikationsbasiert, macht sich aber auch die beiden folgenden Methodenarten zu eigen.

Anzeige
Anzeige

Galen liefert detaillierte HTML-Reportings und zeigt darin beispielsweise, welche Elemente einer Website fehlerhaft sind. (Screenshot: Galen)

Die zweite Art, der Cross-Browser-Test, prüft eine Website auf unerwünschte Unterschiede in verschiedenen Browsern und Browser-Versionen. Da Galen zur Ausführung die Testumgebung Selenium nutzt, können die Tests nicht nur verschiedene Browser berücksichtigen, sondern auch über verschiedene Geräte hinweg erfolgen. So lässt sich Galen mittels Selenium Grid beispielsweise an BrowserStack [1] oder Sauce Labs [2] anbinden.

Anzeige
Anzeige

Der Regressionstest über Pixelvergleiche, die dritte Methodenart, prüft eine Website in Bezug auf verschiedene Software-Versionen durch den Vergleich von Bildern. So können Webdesigner im Verlauf der Entwicklung die Teile einer Webseite aufspüren, die sich unbeabsichtigt verändern. Dazu gleichen sie aktuelle Entwürfe der Webseite mit einem zuvor erstellten Referenzbild ab. Neben diesen drei Layout-Testmethoden unterstützt das Galen-Framework auch funktionales Testen.

Die Installation

Galen lässt sich einfach über den Node.js Paket-Manager npm installieren. Die Voraussetzung ist Java 1.8. Alternativ ist eine manuelle Installation über ein Shellscript möglich. Wer über den Browser Chrome testen möchte, muss zudem den ChromeDriver [3] installieren. Jedes Projekt hat seine eigene Konfigurationsdatei, welche sich mit dem Befehl „galen config“ automatisch erzeugen lässt. Hier können Entwickler beispielsweise den Standard-Browser oder Selenium-Server angeben. Für’s erste ist eine Anpassung der Standardkonfiguration aber nicht notwendig.

Anzeige
Anzeige

Galen Specs Language

Das Galen-Framework hat eine eigene Sprache, die „Galen Specs Language“. Sie ist recht intuitiv und beschreibt die Objekte einer Webseite sowie ihre Relation zueinander. Eine Regel könnte umgangssprachlich etwa lauten: „Die Hauptnavigtion ist im Viewport horizontal zentriert“.

Als Vorlage für die folgende Beispiel-Webseite dient das Bootstrap-Beispielprojekt „Cover“ [4].

Beispiel-Datei speichern unter homepage.gspec:

@objects
 header css div.masthead
 brand css h3.masthead-brand
 cover css div.cover
= Header =
 @on all
  brand: 
  inside header 40px top
 @on mobile
  brand:
  centered horizontally inside header
= Content =
 @on all
  cover:
  inside screen 0px right left

Listing 1

Im ersten Teil sind die später zu bearbeitenden Objekte definiert: In der ersten Spalte befindet sich der Name, in der zweiten die Auswahlmethode (id, css oder xpath) und in der dritten Spalte das Objekt. In diesem Beispiel sind Header-Bereich, Logo und Cover mittels CSS-Selektoren definiert. Die darauf folgende Sektion heißt „Header“ und ist in zwei Gleichheitszeichen eingeschlossen. Sektionen dienen im Wesentlichen dazu, die Regeln zu strukturieren. Das Schlüsselwort „@on“ leitet, gefolgt von einem Viewport, die Testsequenz für eine bestimmte Bildschirmgröße ein. Danach folgt die Regel, in Galen „Spec“ genannt.

Anzeige
Anzeige

Es gibt verschiedene einfache Specs, etwa „near“, „width“, „inside“ oder „height“. In diesem Beispiel soll der obere Außenabstand des Logos etwa genau 40 Pixel betragen. Außerdem soll das Logo in der mobilen Ansicht im Header zentriert stehen. Danach wird für das Cover eine weitere Sektion angelegt und bestimmt, dass dieses bei allen Bildschirmgrößen eine Breite von 100 Prozent einnehmen soll. Da dies aber nur in der mobilen Ansicht der Fall ist, erzeugt dies später in der Desktop-Version einen Fehler. Neben einfachen Regeln zur Beschreibung von Objekten, erweitert die Galen Extra Library [5] die Spec Language mit vielen weiteren komplexeren Ausdrücken.

Die Ansicht der Testergebnisse in Galen: Alle Tests waren erfolgreich bis auf den Test des Covers in der Desktop-Ansicht. Die Detailansicht der Fehleranalyse liefert diverse Informationen – einschließlich einer Heatmap. (Screenshot: Galen)

Die Galen-Test-Suite-Syntax

Nun kommt die Galen-Test-Suite „Syntax“ zum Einsatz. Hier definieren Entwickler die Testsequenzen, die beschreiben, unter welchen Bedingungen Galen eine zuvor erstellte Spezifikationsdatei testen soll. Möglich sind zum Beispiel Angaben über den Browser, die Viewport-Größe oder Time-outs, die auf dynamische Inhalte warten. Unter „testsuit.test“ liegt die folgende kleine Test-Suite:

Test-Suite anlegen

Homepage on a small mobile device
 https://getbootstrap.com/examples/cover/ 320x600
 check homepage.gspec --include "mobile,all"
Homepage on a tablet device
 https://getbootstrap.com/examples/cover/ 640x480
 check homepage.gspec --include "tablet,all"
Homepage on a desktop device
 https://getbootstrap.com/examples/cover/ 1024x800
 check homepage.gspec --include "desktop,all"

Listing 2

In diesem Beispiel gibt es drei Testdurchläufe, die die Spezifikation jeweils in einer anderen Viewport-Größe testen. Die Tests erfolgen durch die Anweisung „galen test testsuit.test –htmlreport .“. Die Ergebnisse sind direkt zu sehen. Es gibt aber auch einen übersichtlichen HTML-Report (siehe Bild links).

Anzeige
Anzeige

Cross-Browser-Testing mit parametrisierten Testsequenzen

Im vorangegangenen Beispiel war kein Browser angegeben, deshalb testete Galen standardmäßig im Firefox. Soll der Test in mehreren Browsern laufen, kommt Selenium zum Einsatz. Mit Galen können Entwickler Testsequenzen parametrisieren und so prägnante Tests schreiben, ohne sich unnötig zu wiederholen. Die Überarbeitung von „testsuit.test“ sieht wie folgt aus:

testsuit.test überarbeiten

@@ parameterized
 | browser |
 | firefox |
 | chrome |
@@ parameterized
 | deviceName | tags | size |
 | Mobile | mobile | 320x600 |
 | Tablet | tablet | 640x480 |
 | Desktop | desktop | 1024x800 |
Homepage on ${deviceName} device in ${browser} browser
 selenium ${browser} https://getbootstrap.com/examples/cover/ ${size}
 check homepage.gspec --include "${tags}, all"

Listing 3

In diesem Beispiel testet Galen die Seite jeweils mit dem Firefox und Chrome in allen drei Viewport-Größen. Es gibt also sechs Testausführungen.

Bildvergleiche: Bei geringsten Abweichungen schlägt Galen Alarm

Galen unterstützt auch das Testen mit Bildvergleichen. Sinnvoll ist diese Testmethode dann, wenn Entwickler Teile einer Webseite auf Veränderungen überwachen wollen. Sie können dann von bestimmten Bereichen der Seite Referenzbilder erstellen und immer wieder mit aktuellen Screenshots vergleichen. Bei Abweichungen schlägt Galen Alarm. Diese Methode spürt daher besonders gut unbeabsichtigte Änderungen im Code auf.

Anzeige
Anzeige

Referenzbild erstellen

galen dump homepage.gspec
 --url https://getbootstrap.com/examples/cover/
 --size 1024x768
 --export dumps

Listing 4

Galen erstellt mit dem oben genannte Code Screenshots von der gesamten Webseite sowie den einzelnen Objekten und legt diese im Ordner „dumps“ ab. Eine Übersicht der Bereiche liefert das Werkzeug auf der erzeugten Seite page.html gleich mit.

Um einen bestimmten Bereich der Seite zu überwachen, müssen Entwickler die Spezifikationsdatei erweitern. In der Beispielanwendung geschieht dies unter „homepage.gspec“ und durch die folgende Erweiterung der Sektion „Header“:

Sektion „Header“ erweitern

@on desktop
 header:
 image file dumps/objects/header.png

Listing 5

Kommt es im weiteren Verlauf der Entwicklung zu Pixel-Veränderungen im Header, meldet Galen einen Fehler. Standardmäßig kennt Galen dabei keine Toleranz. Das lässt sich jedoch in der Konfigurationsdatei ändern.

Anzeige
Anzeige

Fazit

Mit modernen Testwerkzeugen können Entwickler automatisiert und somit immer komfortabler und schneller testen. In welchem Fall das trotzdem noch recht aufwendige Testen gerechtfertigt ist, muss jeder von Fall zu Fall entscheiden. Für die automatisierten Tests eignen sich vor allem komplexe und langlebige Projekte sowie solche, bei denen hohe Qualität und Konsistenz an erster Stelle stehen – etwa aufgrund eines sehr strikten Corporate Designs.

Wer sich in das Galen-Framework einlesen möchte, dem sei die wirklich sehr ausführliche und übersichtliche Dokumentation [6] empfohlen. Wer es lieber visuell mag, findet gute Video-Tutorials in dem Youtube-Kanal des Galen-Entwicklers Ivan Shubin [7].

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige