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.
Hier soll der Titel reinNon-Functional Testing
www.qs-tag.de
Veranstalter: imbus AG www.qs-tag.de
Web-Layout - eine wichti...
testfabrik.com
Layout-Testen von Webanwendungen
Software-QS-Tag 2015
Michael Mirold (mmirold@testfabrik.com)
Layout betrachtet
nicht Inhalte
Layout betrachtet
nicht Funktion
3 / 28
Web-Layout als Nicht-Funktionale Eigenschaft
• Layout beeinflusst Usability
• Layout teilweise sogar funktionale Qualität ...
5 / 28
6 / 28
7 / 28
Status Quo: Layout-Testen in der Webentwicklung
• meist im Rahmen manueller Tests (ad-hoc / explorativ / scripted)
• basie...
Spezifikationsbasiertes automatisiertes Testen
• Große semantische Lücke zwischen Spezifikation und
Implementierung im Web...
Schmerzlinderung durch semantisches CSS
• Idealerweise: konsistente Verwendung von Konzepten / Begriffen
in
• Fachkonzept
...
Bessere Testbarkeit durch semantisches CSS
• Test-Designer kennt nun relative Positionen der Web-Elemente
• Test-Designer ...
Spezifikationsbasiertes automatisiertes Layout Testen
• Open Source Layout-Test-Framework
• “Galen Specs”: Sprache zur Bes...
Beispiel: Layout-Test der webmate Landing Page
Wichtig: Call-to-Action sollte
immer sichtbar sein!
Schritt 1: User schreibt “Galen Spec”
Wie funktioniert Galen?
@objects
body css body
top-navbar css #top.wmlp-l-navbar
mas...
Galen Spec Sprach-Features
• Vielzahl möglicher Tests bzw. “specs”, z.B.
• near: ist Element in der Nähe eines anderen Ele...
Galen Spec Sprach-Features (2)
• centered: ist Element zentriert in anderem Element?
• color-scheme: Ist Hintergrund-Farbe...
Schritt 1,5: Ausführung der “Galen Spec”
Wie funktioniert Galen?
~/D/t/galen ❯❯❯ ./galen check webmate.gspec
--include="de...
Schritt 1,5: Galen HTML Report
Wie funktioniert Galen?
Alles OK
Schritt 2: User schreibt “Galen Test”
Wie funktioniert Galen?
@@ parameterized
| deviceName | tags | size |
| Mobile | mob...
Schritt 3: User startet Galen Test
Wie funktioniert Galen?
~/D/t/galen ❯❯❯ ./galen test webmate.test
--htmlreport=webmater...
Galen Test HTML Report
Galen Test HTML Report (2)
Klick öffnet Screenshot
Galen Test HTML Report (3): Fehler Screenshot
Galen Framework: Weitere Features
• Anbindung an Selenium Grid
• Ausführung von WebDriver-Skripten vor Test
• Setzen von C...
Alternative: Prototypbasiertes automatisiertes Testen
• Idee: Reduzierung des Testaufwands auf eine Instanz (z.B. einen
Br...
Vollautomatisches Layout-Testing mit
Cross-Browser-
Testing
Regressions-
Testing
User wählt
Test-URLs
User wählt
Referenzb...
DEMO
27 / 28
28 / 28
Zusammenfassung
• Manuelles Layout-Testen fehleranfällig und mühsam
• Semantisches CSS kann (automatisierte) Testbarkeit v...
testfabrik.com
We Automate Web Testing.
Nächste SlideShare
Wird geladen in …5
×

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

350 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
  • Als Erste(r) kommentieren

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

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.

×