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)

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

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

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

×