Das Dokument behandelt nicht-funktionales Testing von Weblayouts und hebt die Bedeutung von Layouts für die Usability und funktionale Qualität hervor. Es werden manuelle und automatisierte Testansätze vorgestellt, insbesondere die Verwendung des Galen-Frameworks zur automatisierten Überprüfung von Layouts anhand von Spezifikationen. Zudem wird auf die Vorteile von semantischem CSS und dessen Rolle bei der Verbesserung der Testbarkeit von Webanwendungen eingegangen.

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.