QS-Tag 2015 - Web Layout Testing mit Galen und webmate

228 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
228
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • D.h.: “Newsletter-Box” im Fachkonzept  Seitenelement “Newsletter-Box” in visuellem Konzept  Beschriftung “Newsletter-Box” in Mock-Up  “m-newsletterbox” in CSS
  • QS-Tag 2015 - Web Layout Testing mit Galen und webmate

    1. 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. 2. testfabrik.com Layout-Testen von Webanwendungen Software-QS-Tag 2015 Michael Mirold (mmirold@testfabrik.com)
    3. 3. Layout betrachtet nicht Inhalte Layout betrachtet nicht Funktion 3 / 28
    4. 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. 5 / 28
    6. 6. 6 / 28
    7. 7. 7 / 28
    8. 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. 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. 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. 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. 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. 13. Beispiel: Layout-Test der webmate Landing Page Wichtig: Call-to-Action sollte immer sichtbar sein!
    14. 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. 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. 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. 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. 18. Schritt 1,5: Galen HTML Report Wie funktioniert Galen? Alles OK
    19. 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. 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. 21. Galen Test HTML Report
    22. 22. Galen Test HTML Report (2) Klick öffnet Screenshot
    23. 23. Galen Test HTML Report (3): Fehler Screenshot
    24. 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. 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. 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. 27. DEMO 27 / 28
    28. 28. 28 / 28
    29. 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. 30. testfabrik.com We Automate Web Testing.

    ×