Softwerkskammer Hamburg 
Testen von Rich-Web-UIs 
Mark Michaelis 
Kudos to Martti Jeenicke 
© CoreMedia | 2014-10-21 | 1 w...
Dev@CoreMedia
Dev@CoreMedia 
 Entwickler sind für QA verantwortlich 
 keine dedizierte QA-Abteilung 
 5 Topic-Teams 
 Git als VCS 
...
Dev@CoreMedia - Pipelines 
 verschiedene Pipeline-Patterns 
 pro Team ca. 4 Pipelines, jeweils mit UI-Tests: 
 Story-Me...
Produkt
Frontend Beispiel: CoreMedia Studio 
© CoreMedia | 2014-10-21 | 6 www.coremedia.com
Anwendungsarchitektur 
Studio-Server 
(WebApp) 
Client (Browser) 
Content 
REST Service 
Presentation 
Remoting 
ExtJS 
MV...
Lebenszyklus 
 Versionen derzeit: 
 mehrere Versionen im Extended Support (bis zu RD 2005) 
 2 in Maintenance-Phase 
 ...
Testen von 
UI-Komponenten
Technischer Rahmen 
 Test-Setup durch viele Applikationsschichten: 
 Content-Server 
 Search-Server 
 Web-Application-...
Framework-Design Prinzipien 
Simplicity 
Born 
to Fail 
Succeed 
Fast 
Extensible 
Reusable 
© CoreMedia | 2014-10-21 | 11...
UI-Tests 
schichtweise
Oben: Manuell reproduzierbare Tests 
@Test 
void scenario_document_change_updates_date() { 
Reference<Document> doc = ref(...
Mitte: Warte-Pattern 
für Server als auch UI 
@Test 
void scenario_document_change_updates_date() { 
Reference<Document> d...
Mitte: UI-Wrapper 
Verwendung 
@Test 
void scenario_document_change_updates_date() { 
Reference<Document> doc = ref(); 
gi...
Mitte: UI-Wraper 
Entwicklung 
@Test 
void scenario_document_change_updates_date() { 
@ExtJSObject(id = „docPanel“) 
Docum...
Unten: Generiertes JavaScript 
Code, den keiner sieht… 
self = Ext.getCmp(„panel“); 
key = „itemId“; value = „save“; 
btn ...
Warte, warte nur 
ein Weilchen…
WebDriver Wait Pattern 
Unklare Verantwortlichkeiten 
© CoreMedia | 2014-10-21 | 19 www.coremedia.com
Joala Wait-Pattern 
Klare Verantwortlichkeiten 
© CoreMedia | 2014-10-21 | 20 www.coremedia.com
Wait Pattern 
Vergleich 
© CoreMedia | 2014-10-21 | 21 www.coremedia.com
Wait-Pattern 
Terminierung in Joala 
© CoreMedia | 2014-10-21 | 22 www.coremedia.com
Was der Tester wissen muss… 
WebDriver 
© CoreMedia | 2014-10-21 | 23 www.coremedia.com
Was der Tester wissen muss… 
Joala 
© CoreMedia | 2014-10-21 | 24 www.coremedia.com
Test-Pyramide
Test-Pyramide (nach Mike Cohn) 
Manual 
UI 
Service 
Unit 
© CoreMedia | 2014-10-21 | 26 www.coremedia.com
Test-Pyramide (nach Mike Cohn) 
Manual 
UI 
Service 
Unit 
 600 UI-Tests 
 200 Integration 
 2000 System 
 10000 JUnit...
Infrastruktur
Infrastruktur – Das Grid 
 1 zentrales Se-Grid 
 Wartung durch eines der Topic-Teams 
(das Team mit dem größten Se-Know-...
Infrastruktur – Erfahrungen 
 Virtuelle Windows-Nodes mit rdesktop sind potentiell gefährlich 
 nur per Skript aufgesetz...
Infrastruktur – Firefox & Xvfb 
 Xvfb installieren 
 CentOS, required: libXfont und xorg-x11-fonts 
 Ubuntu, required: ...
Infrastruktur – Firefox & Xvfb 
Skript-Skizze 
function start_wm() { 
openbox & 
# remember PID 
} 
function start_seleniu...
Links
Referenzen (1) 
 The Forgotten Layer of the Test Automation Pyramid 
Mike Cohn, 2009 
 TestPyramid 
Martin Fowler, 2012 ...
Referenzen (2) 
 conceptsandtraining/modernie_selenium 
modern.ie VBox-VM-Setup 
 Modern.IE : Interoperabilität, Browser...
Weitere Informationen 
 SoCraTes 2014: Testing Rich-Web-UI 
Mark Michaelis 
 Death to sleeps! Raise of Conditions! | Min...
Erfahrung
Erfahrung 
 UI-Tests sind heute deutlich weniger Thema in der Test- 
Ergebnis-Analyse 
 Analyse der Infrastruktur ist ni...
CONTENT | CONTEXT | CONVERSION 
Mark Michaelis 
about.me/michaelismark 
© CoreMedia | 2014-10-21 | 39 www.coremedia.com
Bonusmaterial
Wait-Pattern 
Terminierung in WebDriver 
© CoreMedia | 2014-10-21 | 41 www.coremedia.com
Nächste SlideShare
Wird geladen in …5
×

SokaHH: Testen von Rich-Web-UI (German)

780 Aufrufe

Veröffentlicht am

Slides from Softwerkskammer Hamburg (SokaHH) Meetup in October 2014.

It explains in detail the Wait-Pattern introduced for UI-Tests at CoreMedia as well as the Selenium Grid infrastructure chosen to run the tests with focus on Firefox running in xvfb/openbox.

Veröffentlicht in: Software
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
780
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
17
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Pipeline-Patterns: z. B. „schnelle“ Pipelines ohne Integrations-/UI-Tests und „Full-Pipelines“.
    Story-Merge: Alle Sprint-Story-Branches werden gemergt und damit ein Testsystem aufgesetzt und Tests gefahren
    Single-Story: benötigt insbesondere für große oder konfliktträchtige Stories
    Fixes-Merge: Bugfix-Branches werden hier gemergt und darauf die volle CI gestartet
    Master: „Kopie“ des Master-Systems, für mehr Kontrolle vom Team aus.
    Release-Pipeline: Enthält einen für gut befundenen Master-Stand + Fix-Commits
  • unsere UI-Test-Sprache in Anlehnung an Gherkin (siehe Cucumber, JBehave)
    Vorteil: Im Fehlerfall leicht manuell nachzustellen.
    Vorteil zu Cucumber: Steps und Implementierung in Java – und meist in einer Klasse
  • Globaler Timeout
    Warte-Pattern für Server und UI identisch
    API in Anlehnung an JUnit
  • Komplexität in Wrappern versteckt
    Tests zu schreiben wird damit zum Kinderspiel
  • Wrapper-Entwicklung ebenfalls einfach gestaltet
  • Test- und Wrapper-Entwickler sehen dies JavaScript nicht – nur bei Debugging-Ausgabe
  • Hannoveraner wissen, was ich meine…
  • z. B. Expression:
    SUT-Kontakt
    Soll-/Ist-Vergleich
    explizite Behandlung von Exception-Ignore
    siehe http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp
    siehe https://code.google.com/p/selenium/source/browse/java/client/src/org/openqa/selenium/support/ui/ExpectedConditions.java

  • Expression:
    einziger Kontakt zur SUT
    signalisiert:
    Erfolg
    Unbehebbarer Fehler
    Behebbarer Fehler (z. B. durch Warten)
    Keine Exception wird “verschluckt”. Condition wird über alle Exceptions informiert, Expression schlägt nur vor, dass man sie ignorieren könnte.
    Matcher:
    bekannte API: Hamcrest
    Soll-/Ist-Vergleich
    Condition:
    ggf. Wiederholung
    Caching Expression-Ergebnisse für Fehlerreports
    Überprüfung Timeout
  • ExpressionEvaluationException: Vorschlag von Expression an Condition, dass eine Wiederholung zum Erfolg führen könnte.
    Exception: Unbehebbarer Fehler
  • Grün: Test-Autor
    Blau: Wrapper-Autor
    ggf. in Personalunion
  • Balance wichtig: Zu viele UI-Tests sind teuer in Erstellung und vor allem Pflege
  • Balance wichtig: Zu viele UI-Tests sind teuer in Erstellung und vor allem Pflege
    Manuelle Tests ergänzt etwa durch Test-Fest, etc.
  • SokaHH: Testen von Rich-Web-UI (German)

    1. 1. Softwerkskammer Hamburg Testen von Rich-Web-UIs Mark Michaelis Kudos to Martti Jeenicke © CoreMedia | 2014-10-21 | 1 www.coremedia.com
    2. 2. Dev@CoreMedia
    3. 3. Dev@CoreMedia  Entwickler sind für QA verantwortlich  keine dedizierte QA-Abteilung  5 Topic-Teams  Git als VCS  Feature-Entwicklung auf Branches © CoreMedia | 2014-10-21 | 3 www.coremedia.com
    4. 4. Dev@CoreMedia - Pipelines  verschiedene Pipeline-Patterns  pro Team ca. 4 Pipelines, jeweils mit UI-Tests:  Story-Merge-Pipeline  Single-Story-Pipeline  Fixes-Merge-Pipeline  Master-Pipeline  weiterhin:  Master-Pipeline  Release-Pipeline © CoreMedia | 2014-10-21 | 4 www.coremedia.com
    5. 5. Produkt
    6. 6. Frontend Beispiel: CoreMedia Studio © CoreMedia | 2014-10-21 | 6 www.coremedia.com
    7. 7. Anwendungsarchitektur Studio-Server (WebApp) Client (Browser) Content REST Service Presentation Remoting ExtJS MVC AJAX Request Backend Services JSON … Content Server Search © CoreMedia | 2014-10-21 | 7 www.coremedia.com
    8. 8. Lebenszyklus  Versionen derzeit:  mehrere Versionen im Extended Support (bis zu RD 2005)  2 in Maintenance-Phase  Erstes Release Oktober 2012  Erstes Release September 2014  1 in Entwicklungs-Phase © CoreMedia | 2014-10-21 | 8 www.coremedia.com
    9. 9. Testen von UI-Komponenten
    10. 10. Technischer Rahmen  Test-Setup durch viele Applikationsschichten:  Content-Server  Search-Server  Web-Application-Server (Tomcat, Websphere)  Browser/UI  Selenium/WebDriver als Basis-Technologie © CoreMedia | 2014-10-21 | 10 www.coremedia.com
    11. 11. Framework-Design Prinzipien Simplicity Born to Fail Succeed Fast Extensible Reusable © CoreMedia | 2014-10-21 | 11 www.coremedia.com
    12. 12. UI-Tests schichtweise
    13. 13. Oben: Manuell reproduzierbare Tests @Test void scenario_document_change_updates_date() { Reference<Document> doc = ref(); given_document_D_exists(doc); given_document_D_is_opened(doc); when_I_change_document_D(doc); then_modification_date_of_document_D_is_updated(doc); } © CoreMedia | 2014-10-21 | 13 www.coremedia.com
    14. 14. Mitte: Warte-Pattern für Server als auch UI @Test void scenario_document_change_updates_date() { Reference<Document> doc = ref(); given_document_D_exists(doc); given_document_D_is_opened(doc); when_I_change_document_D(doc); then_modification_date_of_document_D_is_updated(doc); } searchServiceWrapper .indexed(doc) .waitUntil(is(true)); © CoreMedia | 2014-10-21 | 14 www.coremedia.com
    15. 15. Mitte: UI-Wrapper Verwendung @Test void scenario_document_change_updates_date() { Reference<Document> doc = ref(); given_document_D_exists(doc); given_document_D_is_opened(doc); when_I_change_document_D(doc); then_modification_date_of_document_D_is_updated(doc); } @Inject DocumentPanel panel; TextField field = panel.getTextField(); field.write(„lorem“); panel.saveDocument(); © CoreMedia | 2014-10-21 | 15 www.coremedia.com
    16. 16. Mitte: UI-Wraper Entwicklung @Test void scenario_document_change_updates_date() { @ExtJSObject(id = „docPanel“) DocumentPanel extends ExtPanel { Reference<Document> doc = ref(); @FindByExtJS(itemId=„save“) Button saveButton; given_document_D_exists(doc); given_document_D_is_opened(doc); when_I_change_document_D(doc); then_modification_date_of_document_D_is_updated(doc); } saveDocument() { saveButton.click(); @Inject DocumentPanel panel; TextField field = panel.getTextField(); field.write(„lorem“); panel.saveDocument(); } © CoreMedia | 2014-10-21 | 16 www.coremedia.com
    17. 17. Unten: Generiertes JavaScript Code, den keiner sieht… self = Ext.getCmp(„panel“); key = „itemId“; value = „save“; btn = (self.find && self.find(key, value)[0]) || (self.buttons && self.buttons.filter( function(b){return b[key] && b[key]==value})[0]) || (self.items && self.items.filter(key, value).get(0)); © CoreMedia | 2014-10-21 | 17 www.coremedia.com
    18. 18. Warte, warte nur ein Weilchen…
    19. 19. WebDriver Wait Pattern Unklare Verantwortlichkeiten © CoreMedia | 2014-10-21 | 19 www.coremedia.com
    20. 20. Joala Wait-Pattern Klare Verantwortlichkeiten © CoreMedia | 2014-10-21 | 20 www.coremedia.com
    21. 21. Wait Pattern Vergleich © CoreMedia | 2014-10-21 | 21 www.coremedia.com
    22. 22. Wait-Pattern Terminierung in Joala © CoreMedia | 2014-10-21 | 22 www.coremedia.com
    23. 23. Was der Tester wissen muss… WebDriver © CoreMedia | 2014-10-21 | 23 www.coremedia.com
    24. 24. Was der Tester wissen muss… Joala © CoreMedia | 2014-10-21 | 24 www.coremedia.com
    25. 25. Test-Pyramide
    26. 26. Test-Pyramide (nach Mike Cohn) Manual UI Service Unit © CoreMedia | 2014-10-21 | 26 www.coremedia.com
    27. 27. Test-Pyramide (nach Mike Cohn) Manual UI Service Unit  600 UI-Tests  200 Integration  2000 System  10000 JUnit  600 JooUnit  1 Team (von 5):  25 Einzeltests  5 Stories, 30 Steps  20 explorativ © CoreMedia | 2014-10-21 | 27 www.coremedia.com
    28. 28. Infrastruktur
    29. 29. Infrastruktur – Das Grid  1 zentrales Se-Grid  Wartung durch eines der Topic-Teams (das Team mit dem größten Se-Know-How)  10 Xvfb+Firefox Nodes  8 IE Nodes basierend auf modern.ie Konzept angelehnt an conceptsandtraining/modernie_selenium © CoreMedia | 2014-10-21 | 29 www.coremedia.com
    30. 30. Infrastruktur – Erfahrungen  Virtuelle Windows-Nodes mit rdesktop sind potentiell gefährlich  nur per Skript aufgesetzte Systeme schaffen Stabilität  Firefox + Xvfb läuft “wartungsfrei” seit vielen Monaten © CoreMedia | 2014-10-21 | 30 www.coremedia.com
    31. 31. Infrastruktur – Firefox & Xvfb  Xvfb installieren  CentOS, required: libXfont und xorg-x11-fonts  Ubuntu, required: xfonts-*  alte Xvfb-Version (z. B. CentOS) benötigt Patch für Bug #337703  Openbox – benötigt, etwa um Fenster maximieren zu können  Optional: xwud, um auf Framebuffer-Images zugreifen zu können  gtk2-engines: Benötigt für Openbox, falls der Fehler Xlib: extension "RANDR" missing on display ":105“ auftritt. © CoreMedia | 2014-10-21 | 31 www.coremedia.com
    32. 32. Infrastruktur – Firefox & Xvfb Skript-Skizze function start_wm() { openbox & # remember PID } function start_selenium_node() { start_wm start_selenium # java –jar …, not in background! kill_wm } function start_selenium_node() { bash xvfb [options] xvfb_subcommand & } © CoreMedia | 2014-10-21 | 32 www.coremedia.com
    33. 33. Links
    34. 34. Referenzen (1)  The Forgotten Layer of the Test Automation Pyramid Mike Cohn, 2009  TestPyramid Martin Fowler, 2012  WebDriver: Advanced Usage — Selenium Documentation, Explicit and Implicit Waits  Joala u. a. Referenzimplementierung Warte-Pattern  Jangaroo u. a. JooUnit © CoreMedia | 2014-10-21 | 34 www.coremedia.com
    35. 35. Referenzen (2)  conceptsandtraining/modernie_selenium modern.ie VBox-VM-Setup  Modern.IE : Interoperabilität, Browser & Cross Platform Testing © CoreMedia | 2014-10-21 | 35 www.coremedia.com
    36. 36. Weitere Informationen  SoCraTes 2014: Testing Rich-Web-UI Mark Michaelis  Death to sleeps! Raise of Conditions! | Minds Mark Michaelis  Selenium Server as Windows Service via NSSM | Minds Mark Michaelis  Meetup Softwerkskammer HH: Collected Thoughts on Testing Pyramid | Minds Mark Michaelis  The Calm after the Storm | Minds Olaf Kummer  Haste makes waste | Minds Olaf Kummer  Entwickler entdecken UI-Testing Mark Michaelis, Testing Experience DE 4/2014, S. 12ff © CoreMedia | 2014-10-21 | 36 www.coremedia.com
    37. 37. Erfahrung
    38. 38. Erfahrung  UI-Tests sind heute deutlich weniger Thema in der Test- Ergebnis-Analyse  Analyse der Infrastruktur ist nicht mehr notwendig  keine „Heisenbugs“ mehr  Nichtsdestotrotz: Auch im jüngsten Sprint mussten wir Maßnahmen beschließen, um mit „Wacklern“ umzugehen.  (Zu)viel Investition in UI-Tests verführt: “Ich schreibe lieber einen UI-Test, als…” (Entwickler-Zitat) © CoreMedia | 2014-10-21 | 38 www.coremedia.com
    39. 39. CONTENT | CONTEXT | CONVERSION Mark Michaelis about.me/michaelismark © CoreMedia | 2014-10-21 | 39 www.coremedia.com
    40. 40. Bonusmaterial
    41. 41. Wait-Pattern Terminierung in WebDriver © CoreMedia | 2014-10-21 | 41 www.coremedia.com

    ×