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.
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.167 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

×