Mit Hilfe von Layout-Testing kann das Design von Webanwendungen wie Webseiten dauerhaft überprüft werden. Talk von Christiane Helmchen und Bianca Niestroj auf der Developer Week in Nürnberg. #dwx2016

1. Layout-Testing
Christiane Helmchen & Bianca Niestroj
Nürnberg, den 20. Juni 2016
#dwx16
#Layouttesting
1

2. Christiane Helmchen
Entwicklerin mit Leidenschaft fürs Testen
@tiah15
2

3. Bianca Niestroj
Arbeitet im Marketing von punkt.de
@BiancaNiestroj
3

4. Developer Tester
Marketeer
Decision Maker
4

5. Layout-Testing
Visual Testing
RWD Testing
Automated Tests for Visual Responsive
Layouts
Visual Test-Driven Development for responsive Interface
Design
Pixel Tests
Screenshots Comparison
Visual Layout Testing
Was ist Layout-Testing
5

6. 6

7. 7

8. Was genau ist Layout-Testing?
Tool zur Steigerung der Qualität des sichtbaren Teils
einer webbasierten Software
8
Test(ing)
• Überprüfen
• Softwarebranche: Steigerung
der Softwarequalität
Layout
• Werbung
• Räumliche Anordnung von Texten
und Bildern und anderen visuellen
Elementen

9. Testing-Pyramide
Unit-Tests
Integrations-
Tests
UI-
Tests
9

10. Testing-Pyramide
UI-
Tests
Aussehen
wird mit
Layout-Tests
überprüft
Verhalten/Funktionalität
wird mit Behaviour Driven
Development überprüft
10

11. Was geht?
Was bringt`s?
Wer braucht`s?
Layout-
Testing
11

12. Wer braucht`s?
Layout-
Testing
12

13. Developer/Tester
Marketeer
Decision Maker
Wer braucht´s?
13
Werbraucht‘s?

14. Werbraucht‘s?
14
Entwickler

15. Tester
Werbraucht‘s?
Unit-Tests
Integrations-
Tests
UI-
Tests
15

16. Werbraucht‘s?
16

17. Usability
Werbraucht‘s?
17

18. Werbraucht‘s?
18

19. Werbraucht‘s?
19

20. Werbraucht‘s?
20

21. Werbraucht‘s?
21

22. Werbraucht‘s?
22

23. Werbraucht‘s?
Extern gehostete Ressourcen
23

24. Strenge CD Vorgaben
Werbraucht‘s?
24

25. Was bringt´s?
Layout-
Testing
25

26. Voraussetzungen
Wasbringt‘s?
26

27. Wasbringt‘s?
27

28. Wasbringt‘s?
28

29. Wasbringt‘s?
29

30. (Selbst-)Vertrauen
Wasbringt‘s?
30

31. 31
Wasbringt‘s?

32. Wasbringt‘s?
32
Erwartung Realität

33. Was geht?
Layout-
Testing
33

34. 34
Wasgeht?

35. Ziel
Regressionsfehler während der
Entwicklung einer neuen
Webseite schnellstmöglich finden
Wasgeht?
Wie finde ich das passende Framework?
35

36. Wie finde ich das passende Framework?
CSS Critic
Grunt PhotoBox
PhantomCSS
Snap and Compare
Specter
FBSnapshotTestCase
dpdxt
Wraith
BackstopJS
Fighting Layout Bugs
Selenium Visual Diff
Huxley
Needle
Wraith-Selenium
Applitools Eyes
Gemini
Praktisch für RWD
Bekannte
Programmiersprache
Kostenfrei
CI-Integration
Gute DokumentationVisualCeption
Detaillierter Vergleich
Galen
WebdriverCSS
Wasgeht?
36
Kann Selenium

37. Was brauche ich alles?
Wasgeht?
WebdriverIO
WebdriverCSS
Mocha
Webdriver
Screenshots
Test Framework
37

38. Ablauf
Wasgeht?
38

39. Installation
npm install mocha (besser global)
npm install webdriverio
npm install webdrivercss
Wasgeht?
Achtung: momentan ist WebdriverCSS offiziell
nicht mit WebdriverIO 3.x oder höher
kompatibel 39

40. Wasgeht?
Test-Beispiel
40

41. Konfiguration
Wasgeht?
41
Tipp: Testeigener screenshotRootPath führt
zu mehr Übersichtlichkeit

42. Test-Beispiel
Wasgeht?
42

43. Test-Beispiel
Wasgeht?
43

44. Test ausführen
Alle Tests innerhalb eines Ordners:
mocha path/to/tests/*.js --timeout 20s
Oder mit spezieller Config-Datei:
MOCHA_ENVIRONMENT="develop" mocha tests/*.js --timeout 20s
Ein bestimmter Test:
mocha path/to/tests/example.js --timeout 20s
Wasgeht?
44

45. Vorteile
• Sehr einfach, Tests zu schreiben
• Copy & Paste-, CSS-Selektor-Kenntnisse reichen für einfache Tests
• Ausschließen von Elementen und Flächen
Wasgeht?
45

46. Vorteile
• Sehr einfach, Tests zu schreiben
• Copy & Paste-, CSS-Selektor-Kenntnisse reichen für einfache Tests
• Ausschließen von Elementen und Flächen
• Gute Dokumentation
• Interaktionen vor dem Screenshot möglich (z.B. Klicken eines Buttons)
• Bildschirmbreiten können pro Test oder allgemein gesetzt werden
Wasgeht?
46

47. Nachteile
• Nicht mit gleichen Screenshots auf verschiedenen Betriebssystemen
testen
• Retina-Bildschirm vs. Nicht-Retina-Bildschirm
• In Verbindung mit Mocha: Strukturierung der Testdateien schwierig
• Gruppierung beim Ausführen der Tests nicht möglich
Wasgeht?
47

48. Grenzen von Screenshotvergleichstests
• Aktuelles (z.B. heutiges Datum, zeitbegrenzte Inhalte)
• Zufall (z.B. Werbung)
• Externes (z.B. Google Maps)
• Slider und Animation
• Lazy Loading
• Infinite Scrolling
Wasgeht?
48

49. Wasgeht?
Geht da noch mehr?
Ziel
Tests auf einem Live-System mit
häufigen redaktionellen
Änderungen
49

50. CSS Critic
Grunt PhotoBox
PhantomCSS
Snap and Compare
Specter
FBSnapshotTestCase
dpdxt
Wraith
BackstopJS
Fighting Layout Bugs
Selenium Visual Diff
Huxley
Needle
Wraith-Selenium
Applitools Eyes
Gemini
Kein Pixelvergleich
VisualCeption
Galen
WebdriverCSS
Wasgeht?
Wie finde ich das passende Framework?
50

51. Installation
sudo npm install -g galenframework-cli
Wasgeht?
• Benötigt Java >= 1.7
• Passendes Betriebssystem
51

52. Konfiguration
galen config
Wasgeht?
52

53. Spec
Wasgeht?
53

54. Testsuite
Wasgeht?
54

55. Ausführen
galen test Tests/Galen/TestSuites/Monitoring/NonContent.test
55
Wasgeht?

56. 56
Wasgeht?

57. Vorteile
• Zum größten Teil auch von nicht-Techies/Nicht-Entwicklern lesbar und
z.T. schreibbar
• Sehr sehr gute Dokumentation - mit Bildern und Videos!
• Textänderungen stören Tests nicht
• TDD – schreibe die Specs bevor das Design umgesetzt wurde
• Welcher Teil des Designs ist wirklich wichtig?
• Betriebssysteme unwichtig
• SpecLanguage und JS möglich
Wasgeht?
57

58. Nachteile
• Man kann unmöglich alles testen!!!
• Testschreiben dauert länger – nicht nur Copy & Paste
• Installieren in der CI-Kette funktioniert bisher nicht, da FreeBSD nicht
unterstützt wird
• BaseURL steht in der Testsuite statt in der Konfiguration, d.h. man muss
das Ausführen pro System erneut schreiben
Wasgeht?
58

59. Wann welches Framework?
Wasgeht?
59
Pixelvergleich
Gleichbleibender Datenstand
Mit möglichst wenig Aufwand
möglichst viel testen
Regressionstests
Galen
Datenstand (Inhalte) weniger
wichtig
Spezifische Eigenschaften von
wenigen Elementen testen
TDD – Tests vor Umsetzung

60. Fazit
Wasgeht?
60

61. Wir freuen uns auf
Feedback!
@punkt_de
61

62. Linksammlung
• Frameworks:
• https://github.com/webdriverio/webdrivercss
• http://galenframework.com/
• Dokumentationsvideos von Ivan Shubin, dem Entwickler von Galen:
https://www.youtube.com/watch?v=qP8NmRM1OsI&list=PLyhyM1XhqdgWQ1DevSn-Zhxbvee3AQs_j
• Bilder
• Bildquelle: http://www.tinti.eu/sites/default/files/fehlersuchbild_1.jpg
• Bildquelle: http://antje-heimsoeth.com/wp-content/uploads/2015/10/Antje-Heimsoeth-Vortrag-Mut-1920.jpg
• Statistikquelle: https://www.vocatus.de/files/pdf/Vocatus-2005-01-PA-Website-Prozessoptimierung-und-
Abbrecheranalysen.pdf
• Eigene Bilder
62