Gerade im Zusammenspiel mit Responsive Design ist es wichtig, das Layout auf verschiedenen Browsern und Umgebungen zu testen. Das ist aufwändig für jeden Tester und Entwickler. Browser A mit URL X starten, Browserfenster vergrößern, noch mehr vergrößern, wieder verkleinern – und dazwischen immer prüfen, ob sich Website gemäß “Responsive Design” richtig verhält. Dann das Gleiche mit Browser B, C, D, E. Zuerst im Webbrowser am Desktop, dann am Browser im Handy oder Tablet. Doch es geht auch einfacher!

Ein ausführlicher Artikel des Autors zu diesem Thema findet sich in der Mai-Ausgabe des JavaSPEKTRUMs.

Responsive Design

Eine Differenzermittlung von Bildern ist zwar möglich, aber auf Dauer sehr schwierig. Kleine Änderungen im Code führen oft zu großen Veränderungen im Screenshot.

Hier hilft das Galen Framework: Beschreibe wie in TDD deine Anforderungen in einer DSL und lasse sie prüfen. Dabei setzt die Galen-DSL darauf, die Beziehungen zwischen den Elementen zu beschreiben. Für die Ausführung wird Selenium genutzt. So können die Tests auch im Selenium-Stack bei einem Dienstleister wie Saucelabs ausgeführt werden.

Selenium Grid

In Galen spezifiert man mit der Spec-DSL nötigen Anforderungen:

Galen Spec Beispiel 1

Dabei ist die Kernidee, zu beschreiben, wie die Elemente in Beziehung stehen und somit die Anforderungen zu testen. Im oberen Beispiel sieht man zunächst ein Beispiel für die Element-Definition, gefolgt von den konkreten Layoutspezifikationen. Diese werden mit ‚@‘ eingeleitet, einem optionalem Beschreibungstext mit Pipe als Abschluss und der Auflistung der Tags:

Galen Spec Beispiel 2

Damit lassen sich für unterschiedliche Gerätegrößen verschiedene Anforderungen abbilden. Üblicherweise nehmen Elemente auf kleinen Geräten die gesamte Bildschirmbreite ein und auf Desktop-Browsern können zusätzliche Informationen wie z.B. Subnavigation eingeblendet werden. Tags werden Galen zur Testausführung mitgegeben:

Galen.checkLayout(
          getDriver(), 
          fullSpecPath, 
          Arrays.asList("fullhd", "desktop"), 
          null, new Properties(), null);

Neben der DSL hat Galen eine Report-Funktion, die auch Fehler in Tests visuell kennzeichnet:

Galen Report

Pro Testfall werden alle Spezifikationen nochmals visuell hervorgehoben:

Galen Detaillierter Testfallreport

Ein ausführlicher Artikel dazu findet sich im aktuellem JavaSpektrum. Ein Beispiel für JUnit und TestNG liegt auf GitHub.