Downloaden Sie, um offline zu lesen
Hochgeladen vonpunkt.de GmbH
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Das Dokument bietet eine Übersicht über Layout-Testing, einen Prozess zur Verbesserung der Sichtqualität von webbasierten Softwareanwendungen, und beleuchtet die Vorteile und Herausforderungen verschiedener Testframeworks. Es benennt auch die Zielgruppen für Layout-Testing und diskutiert spezifische Tools und deren Vor- und Nachteile für Entwickler, Tester und Marketing-Entscheidungsträger. Zudem werden technische Details zur Implementation und Durchführung von Tests sowie relevante Ressourcen und Links bereitgestellt.
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
- 1. Layout-Testing Christiane Helmchen &Bianca Niestroj Nürnberg, den 20. Juni 2016 #dwx16 #Layouttesting 1
- 2. Christiane Helmchen Entwicklerin mitLeidenschaft fürs Testen @tiah15 2
- 3. Bianca Niestroj Arbeitet imMarketing von punkt.de @BiancaNiestroj 3
- 4.
- 5. Layout-Testing Visual Testing RWD Testing AutomatedTests 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.
- 7.
- 8. Was genau istLayout-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.
- 10. Testing-Pyramide UI- Tests Aussehen wird mit Layout-Tests überprüft Verhalten/Funktionalität wird mitBehaviour Driven Development überprüft 10
- 11. Was geht? Was bringt`s? Werbraucht`s? Layout- Testing 11
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. Ziel Regressionsfehler während der Entwicklungeiner neuen Webseite schnellstmöglich finden Wasgeht? Wie finde ich das passende Framework? 35
- 36. Wie finde ichdas 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 ichalles? Wasgeht? WebdriverIO WebdriverCSS Mocha Webdriver Screenshots Test Framework 37
- 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.
- 41. Konfiguration Wasgeht? 41 Tipp: Testeigener screenshotRootPathführt zu mehr Übersichtlichkeit
- 42.
- 43.
- 44. Test ausführen Alle Testsinnerhalb 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 mitgleichen 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 nochmehr? Ziel Tests auf einem Live-System mit häufigen redaktionellen Änderungen 49
- 50. CSS Critic Grunt PhotoBox PhantomCSS Snapand 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.
- 53.
- 54.
- 55.
- 56.
- 57. Vorteile • Zum größtenTeil 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 kannunmö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 GleichbleibenderDatenstand 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.
- 61. Wir freuen unsauf 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