Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Layout-Testing
Christiane Helmchen & Bianca Niestroj
Nürnberg, den 20. Juni 2016
#dwx16
#Layouttesting
1
Christiane Helmchen
Entwicklerin mit Leidenschaft fürs Testen
@tiah15
2
Bianca Niestroj
Arbeitet im Marketing von punkt.de
@BiancaNiestroj
3
Developer Tester
Marketeer
Decision Maker
4
Layout-Testing
Visual Testing
RWD Testing
Automated Tests for Visual Responsive
Layouts
Visual Test-Driven Development for...
6
7
Was genau ist Layout-Testing?
Tool zur Steigerung der Qualität des sichtbaren Teils
einer webbasierten Software
8
Test(ing...
Testing-Pyramide
Unit-Tests
Integrations-
Tests
UI-
Tests
9
Testing-Pyramide
UI-
Tests
Aussehen
wird mit
Layout-Tests
überprüft
Verhalten/Funktionalität
wird mit Behaviour Driven
Dev...
Was geht?
Was bringt`s?
Wer braucht`s?
Layout-
Testing
11
Wer braucht`s?
Layout-
Testing
12
Developer/Tester
Marketeer
Decision Maker
Wer braucht´s?
13
Werbraucht‘s?
Werbraucht‘s?
14
Entwickler
Tester
Werbraucht‘s?
Unit-Tests
Integrations-
Tests
UI-
Tests
15
Werbraucht‘s?
16
Usability
Werbraucht‘s?
17
Werbraucht‘s?
18
Werbraucht‘s?
19
Werbraucht‘s?
20
Werbraucht‘s?
21
Werbraucht‘s?
22
Werbraucht‘s?
Extern gehostete Ressourcen
23
Strenge CD Vorgaben
Werbraucht‘s?
24
Was bringt´s?
Layout-
Testing
25
Voraussetzungen
Wasbringt‘s?
26
Wasbringt‘s?
27
Wasbringt‘s?
28
Wasbringt‘s?
29
(Selbst-)Vertrauen
Wasbringt‘s?
30
31
Wasbringt‘s?
Wasbringt‘s?
32
Erwartung Realität
Was geht?
Layout-
Testing
33
34
Wasgeht?
Ziel
Regressionsfehler während der
Entwicklung einer neuen
Webseite schnellstmöglich finden
Wasgeht?
Wie finde ich das pas...
Wie finde ich das passende Framework?
CSS Critic
Grunt PhotoBox
PhantomCSS
Snap and Compare
Specter
FBSnapshotTestCase
dpd...
Was brauche ich alles?
Wasgeht?
WebdriverIO
WebdriverCSS
Mocha
Webdriver
Screenshots
Test Framework
37
Ablauf
Wasgeht?
38
Installation
npm install mocha (besser global)
npm install webdriverio
npm install webdrivercss
Wasgeht?
Achtung: momentan...
Wasgeht?
Test-Beispiel
40
Konfiguration
Wasgeht?
41
Tipp: Testeigener screenshotRootPath führt
zu mehr Übersichtlichkeit
Test-Beispiel
Wasgeht?
42
Test-Beispiel
Wasgeht?
43
Test ausführen
Alle Tests innerhalb eines Ordners:
mocha path/to/tests/*.js --timeout 20s
Oder mit spezieller Config-Datei...
Vorteile
• Sehr einfach, Tests zu schreiben
• Copy & Paste-, CSS-Selektor-Kenntnisse reichen für einfache Tests
• Ausschli...
Vorteile
• Sehr einfach, Tests zu schreiben
• Copy & Paste-, CSS-Selektor-Kenntnisse reichen für einfache Tests
• Ausschli...
Nachteile
• Nicht mit gleichen Screenshots auf verschiedenen Betriebssystemen
testen
• Retina-Bildschirm vs. Nicht-Retina-...
Grenzen von Screenshotvergleichstests
• Aktuelles (z.B. heutiges Datum, zeitbegrenzte Inhalte)
• Zufall (z.B. Werbung)
• E...
Wasgeht?
Geht da noch mehr?
Ziel
Tests auf einem Live-System mit
häufigen redaktionellen
Änderungen
49
CSS Critic
Grunt PhotoBox
PhantomCSS
Snap and Compare
Specter
FBSnapshotTestCase
dpdxt
Wraith
BackstopJS
Fighting Layout B...
Installation
sudo npm install -g galenframework-cli
Wasgeht?
• Benötigt Java >= 1.7
• Passendes Betriebssystem
51
Konfiguration
galen config
Wasgeht?
52
Spec
Wasgeht?
53
Testsuite
Wasgeht?
54
Ausführen
galen test Tests/Galen/TestSuites/Monitoring/NonContent.test
55
Wasgeht?
56
Wasgeht?
Vorteile
• Zum größten Teil auch von nicht-Techies/Nicht-Entwicklern lesbar und
z.T. schreibbar
• Sehr sehr gute Dokumenta...
Nachteile
• Man kann unmöglich alles testen!!!
• Testschreiben dauert länger – nicht nur Copy & Paste
• Installieren in de...
Wann welches Framework?
Wasgeht?
59
Pixelvergleich
Gleichbleibender Datenstand
Mit möglichst wenig Aufwand
möglichst viel ...
Fazit
Wasgeht?
60
Wir freuen uns auf
Feedback!
@punkt_de
61
Linksammlung
• Frameworks:
• https://github.com/webdriverio/webdrivercss
• http://galenframework.com/
• Dokumentationsvide...
Nächste SlideShare
Wird geladen in …5
×

Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?

882 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?

  1. 1. Layout-Testing Christiane Helmchen & Bianca Niestroj Nürnberg, den 20. Juni 2016 #dwx16 #Layouttesting 1
  2. 2. Christiane Helmchen Entwicklerin mit Leidenschaft fürs Testen @tiah15 2
  3. 3. Bianca Niestroj Arbeitet im Marketing von punkt.de @BiancaNiestroj 3
  4. 4. Developer Tester Marketeer Decision Maker 4
  5. 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. 6
  7. 7. 7
  8. 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. 9. Testing-Pyramide Unit-Tests Integrations- Tests UI- Tests 9
  10. 10. Testing-Pyramide UI- Tests Aussehen wird mit Layout-Tests überprüft Verhalten/Funktionalität wird mit Behaviour Driven Development überprüft 10
  11. 11. Was geht? Was bringt`s? Wer braucht`s? Layout- Testing 11
  12. 12. Wer braucht`s? Layout- Testing 12
  13. 13. Developer/Tester Marketeer Decision Maker Wer braucht´s? 13 Werbraucht‘s?
  14. 14. Werbraucht‘s? 14 Entwickler
  15. 15. Tester Werbraucht‘s? Unit-Tests Integrations- Tests UI- Tests 15
  16. 16. Werbraucht‘s? 16
  17. 17. Usability Werbraucht‘s? 17
  18. 18. Werbraucht‘s? 18
  19. 19. Werbraucht‘s? 19
  20. 20. Werbraucht‘s? 20
  21. 21. Werbraucht‘s? 21
  22. 22. Werbraucht‘s? 22
  23. 23. Werbraucht‘s? Extern gehostete Ressourcen 23
  24. 24. Strenge CD Vorgaben Werbraucht‘s? 24
  25. 25. Was bringt´s? Layout- Testing 25
  26. 26. Voraussetzungen Wasbringt‘s? 26
  27. 27. Wasbringt‘s? 27
  28. 28. Wasbringt‘s? 28
  29. 29. Wasbringt‘s? 29
  30. 30. (Selbst-)Vertrauen Wasbringt‘s? 30
  31. 31. 31 Wasbringt‘s?
  32. 32. Wasbringt‘s? 32 Erwartung Realität
  33. 33. Was geht? Layout- Testing 33
  34. 34. 34 Wasgeht?
  35. 35. Ziel Regressionsfehler während der Entwicklung einer neuen Webseite schnellstmöglich finden Wasgeht? Wie finde ich das passende Framework? 35
  36. 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. 37. Was brauche ich alles? Wasgeht? WebdriverIO WebdriverCSS Mocha Webdriver Screenshots Test Framework 37
  38. 38. Ablauf Wasgeht? 38
  39. 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. 40. Wasgeht? Test-Beispiel 40
  41. 41. Konfiguration Wasgeht? 41 Tipp: Testeigener screenshotRootPath führt zu mehr Übersichtlichkeit
  42. 42. Test-Beispiel Wasgeht? 42
  43. 43. Test-Beispiel Wasgeht? 43
  44. 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. 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. 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. 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. 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. 49. Wasgeht? Geht da noch mehr? Ziel Tests auf einem Live-System mit häufigen redaktionellen Änderungen 49
  50. 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. 51. Installation sudo npm install -g galenframework-cli Wasgeht? • Benötigt Java >= 1.7 • Passendes Betriebssystem 51
  52. 52. Konfiguration galen config Wasgeht? 52
  53. 53. Spec Wasgeht? 53
  54. 54. Testsuite Wasgeht? 54
  55. 55. Ausführen galen test Tests/Galen/TestSuites/Monitoring/NonContent.test 55 Wasgeht?
  56. 56. 56 Wasgeht?
  57. 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. 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. 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. 60. Fazit Wasgeht? 60
  61. 61. Wir freuen uns auf Feedback! @punkt_de 61
  62. 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

×