On 2015-11-04 I gave a presentation (in German) on the topic of Web Layout Testing with Galen Framework and webmate at the Software QS-Tage conference in Nuremberg. In the talk I have put much emphasis on the importance of having a consistent conceptual model during all phases of development to bridge the gap between requirement analysis, development, and testing.

1. Hier soll der Titel reinNon-Functional Testing
www.qs-tag.de
Veranstalter: imbus AG www.qs-tag.de
Web-Layout - eine wichtige nicht-funktionale
Eigenschaft und wie man sie testet
Michael Mirold
Testfabrik AG

2. testfabrik.com
Layout-Testen von Webanwendungen
Software-QS-Tag 2015
Michael Mirold (mmirold@testfabrik.com)

3. Layout betrachtet
nicht Inhalte
Layout betrachtet
nicht Funktion
3 / 28

4. Web-Layout als Nicht-Funktionale Eigenschaft
• Layout beeinflusst Usability
• Layout teilweise sogar funktionale Qualität (“Seite unbenutzbar”)
• Layout-Probleme bestimmen gefühlte Qualität (“die scheinen nicht
zu testen”)
Dennoch: Layout meist nicht explizit getestet
4 / 28

5. 5 / 28

6. 6 / 28

7. 7 / 28

8. Status Quo: Layout-Testen in der Webentwicklung
• meist im Rahmen manueller Tests (ad-hoc / explorativ / scripted)
• basiert oft auf Mock-Ups und Prototypen, z.B. Photoshop-Vorlagen
• abhängig von Intuition / Erfahrung des Testers
• keine Layout-Testcases
 Fehler werden häufig übersehen
 manuelle Layout-Tests schlecht reproduzierbar
 kleine Abweichungen oft nicht erkennbar
8 / 28

9. Spezifikationsbasiertes automatisiertes Testen
• Große semantische Lücke zwischen Spezifikation und
Implementierung im Web-Layout
• Keine klassische “Design-Phase” im (Software-Enginnering-)Sinne
Low-Fi Mockups
(Papier, Balsamiq, etc.)
Hi-Fi Mockups
(Photoshop, Axure,
etc.)
HTML + CSS
• viel Raum für Interpretation
• viel Raum für Fehler
• wenig Substanz für automatisiertes Testen
• CSS immer noch sehr “low-level”
9 / 28

10. Schmerzlinderung durch semantisches CSS
• Idealerweise: konsistente Verwendung von Konzepten / Begriffen
in
• Fachkonzept
• visuellem Konzept
• Mock-Ups und Prototypen
• Dann: Aufgreifen fachlicher Konzepte / Namen in HTML und CSS
 konsistente Verwendung von CSS-Klassennamen und IDs
Fachkonzept
Beschreibung der
“Newsletter-Box”
Visuelles Konzept
Definition des Seiten-
elements “Newsletter-
Box”
Mock-Up
Beschriftung
“Newsletter-Box” in
Mock-Up
CSS
Benennung CSS-Klasse
“m-newsletterbox”
10 / 28

11. Bessere Testbarkeit durch semantisches CSS
• Test-Designer kennt nun relative Positionen der Web-Elemente
• Test-Designer kann Tests formulieren:
• “m-newsletterbox liegt genau unter l-navbar-main”
• “m-newsletterbox liegt auf gleicher Höhe wie m-loginbox”
• “m-loginbox ist immer sichtbar”
• Liegt ein visuelles Feinkonzept (mit Pixelangaben) vor, sind weitergehende
Tests möglich
• “m-newsletterbox ist 200px breit in der Desktopvariante”
• “m-loginbox ist immer 50px vom rechten Rand des Viewports entfernt”
Wie können diese Tests realisiert werden?
11 / 28

12. Spezifikationsbasiertes automatisiertes Layout Testen
• Open Source Layout-Test-Framework
• “Galen Specs”: Sprache zur Beschreibung von Webseiten-Layouts
• Galen testet Gültigkeit der Beschreibung für Webseite
• Verwendet Selenium zur Browser-Fernsteuerung
Galen Framework
http://galenframework.com
12 / 28

13. Beispiel: Layout-Test der webmate Landing Page
Wichtig: Call-to-Action sollte
immer sichtbar sein!

14. Schritt 1: User schreibt “Galen Spec”
Wie funktioniert Galen?
@objects
body css body
top-navbar css #top.wmlp-l-navbar
masthead xpath //div[@class='wmlp-l-masthead']
masthead-actionbtn css .wmlp-l-masthead .wmlp-m-action
= Main section =
top-navbar:
inside body 0px top
width 100% of screen/width
masthead:
below top-navbar 0px top
width 100% of screen/width
@on desktop
height 400px
@on mobile
height 250px
masthead-actionbtn:
visible
Objekt-Definitionen: Zuordnung von Name (z.B.
“top-navbar”) zu DOM-Objekt via CSS-Selektor,
Id oder XPath
Specs: Layout-Regeln für DOM-Elemente
Der obere Rand des “masthead” (DIV-Element mit
CSS-Klasse “wmlp-l-masthead”) soll sich genau (“0px”)
unter der “top-navbar” (DOM-Element mit der Id “top” und
der CSS-Klasse “wmlp-l-navbar”) befinden.
Wenn bei Testausführung das Tag “mobile” gesetzt ist,
soll die Höhe des “masthead”-Elements exakt 250px betragen.
Der “Call-to-Action-Button” (Element mit CSS-Klasse “wmlp-m-action”
unterhalb eines Elements mit CSS-Klasse “wmlp-l-masthead”) soll
stets sichtbar sein.
webmate.gspec

15. Galen Spec Sprach-Features
• Vielzahl möglicher Tests bzw. “specs”, z.B.
• near: ist Element in der Nähe eines anderen Elements?
• on: befindet sich ein Element “auf” einem anderen?
• text: ist der Text eines Elements korrekt?
Beispiele: http://galenframework.com
15 / 28

16. Galen Spec Sprach-Features (2)
• centered: ist Element zentriert in anderem Element?
• color-scheme: Ist Hintergrund-Farbe des Elements in richtigem Bereich?
• image: sieht ein Element ähnlich aus wie ein Bild?
Beispiele: http://galenframework.com
16 / 28

17. Schritt 1,5: Ausführung der “Galen Spec”
Wie funktioniert Galen?
~/D/t/galen ❯❯❯ ./galen check webmate.gspec
--include="desktop"
--url=https://webmate.io
--size 1600x800
--htmlreport=webmatereport
========================================
Test: webmate.gspec
========================================
check webmate.gspec --include=desktop --
url=https://webmate.io --size 1600x800
= Main section =
top-navbar:
inside body 0px top
width 100% of screen/width
masthead:
below top-navbar 0px top
width 100% of screen/width
height 400px
masthead-actionbtn:
visible
• Spec kann mit “./galen check” getestet werden
• mit “--include” können Tags festgelegt werden
• mit “--htmlreport” Erstellung eines HTML-Reports
Konsoleoutput während der
Testausführung
Hier: Keine Fehler
Konsole

18. Schritt 1,5: Galen HTML Report
Wie funktioniert Galen?
Alles OK

19. Schritt 2: User schreibt “Galen Test”
Wie funktioniert Galen?
@@ parameterized
| deviceName | tags | size |
| Mobile | mobile | 320x600 |
| Tablet | tablet | 640x480 |
| Desktop | desktop | 1600x800 |
@@ parameterized
| browser |
| firefox |
| chrome |
| safari |
webmate Landing Page on a ${deviceName} device
${browser} https://webmate.io ${size}
check webmate.gspec --include "${tags}”
webmate Pricing Page on a ${deviceName} device
${browser} https://webmate.io/pricing ${size}
check webmate_pricing.gspec --include "${tags}"
Tests können parametrisiert werden, z.B. mit
Browser, Browsergröße und so genannten “Tags”
Test-Spezifikation besteht aus “Tests” definiert durch:
• Test-Name (wird später in Reports verwendet)
• Test-Ziel (legt URLs, Browser und Größen fest)
• “Page-Action” (Aufruf der Galen-Spec)
webmate.test

20. Schritt 3: User startet Galen Test
Wie funktioniert Galen?
~/D/t/galen ❯❯❯ ./galen test webmate.test
--htmlreport=webmatereport
[...]
========================================
Test: webmate Landing Page on chrome with Tablet size
(640x480)
========================================
Starting ChromeDriver 2.19.346063
(38b35413bd4a486d436a9749e090454bc9ff6708) on port 11187
Only local connections are allowed.
check webmate.gspec --include "tablet”
= Main section =
top-navbar:
inside body 0px top
width 100% of screen/width
masthead:
below top-navbar 0px top
width 100% of screen/width
masthead-actionbtn:
-> visible
-> : "masthead-actionbtn" is not visible on page
[...]
Fehlgeschlagene Spec: Action-Button in
Tablet-Größe nicht sichtbar
Konsole
• Test kann mit “./galen test” getestet werden
• mit “--htmlreport” Erstellung eines HTML-Reports

21. Galen Test HTML Report

22. Galen Test HTML Report (2)
Klick öffnet Screenshot

23. Galen Test HTML Report (3): Fehler Screenshot

24. Galen Framework: Weitere Features
• Anbindung an Selenium Grid
• Ausführung von WebDriver-Skripten vor Test
• Setzen von Cookies vor Test
• Strukturierung von Tests in Test-Gruppen
24 / 28

25. Alternative: Prototypbasiertes automatisiertes Testen
• Idee: Reduzierung des Testaufwands auf eine Instanz (z.B. einen
Browser)
• Finde Layout-Unterschiede zwischen zwei Instanzen einer Webseite
automatisch:
• gleiche Webseite in verschiedenen Browsern: Cross-Browser-Test
• verschiedene Versionen (letzte Woche vs. aktuell): Regressions-Test
• verschiedene Online-Tools, z.B.
• nur Cross-Browser:
• crossbrowsertesting.com
• browsera.com
• Cross-Browser + Regressionstest
• webmate.io
25 / 28

26. Vollautomatisches Layout-Testing mit
Cross-Browser-
Testing
Regressions-
Testing
User wählt
Test-URLs
User wählt
Referenzbrowser
+ Vergleichsbrowser
User wählt
Referenz-URLs
User wählt
Vergleichs-URLs
webmate
extrahiert Layout-
Information
webmate
vergleicht Layout
webmate
präsentiert
Abweichungen
1 2
1 2
3
4
5
26 / 28

27. DEMO
27 / 28

28. 28 / 28

29. Zusammenfassung
• Manuelles Layout-Testen fehleranfällig und mühsam
• Semantisches CSS kann (automatisierte) Testbarkeit von
Webanwendungen stark verbessern
• Mit Galen Framework können Layout-Tests automatisiert werden
• Mit webmate kann der Aufwand für Layout-Tests stark reduziert
werden
29 / 28

30. testfabrik.com
We Automate Web Testing.