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

Softwerkskammer Hamburg
Testen von Rich-Web-UIs
Mark Michaelis
Kudos to Martti Jeenicke
© CoreMedia | 2014-10-21 | 1 www.coremedia.com

Dev@CoreMedia
 Entwickler sind für QA verantwortlich
 keine dedizierte QA-Abteilung
 5 Topic-Teams
 Git als VCS
 Feature-Entwicklung auf Branches

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

Frontend Beispiel: CoreMedia Studio

Anwendungsarchitektur
Studio-Server
(WebApp)
Client (Browser)
Content
REST Service
Presentation
Remoting
ExtJS
MVC
AJAX Request
Backend Services
JSON
…
Content
Server
Search

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

Technischer Rahmen
 Test-Setup durch viele Applikationsschichten:
 Content-Server
 Search-Server
 Web-Application-Server (Tomcat, Websphere)
 Browser/UI
 Selenium/WebDriver als Basis-Technologie

Framework-Design Prinzipien
Simplicity
Born
to Fail
Succeed
Fast
Extensible
Reusable

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);
}

Mitte: Warte-Pattern
für Server als auch UI
@Test
}
searchServiceWrapper
.indexed(doc)
.waitUntil(is(true));

Mitte: UI-Wrapper
Verwendung
@Test
}
@Inject DocumentPanel panel;
TextField field = panel.getTextField();
field.write(„lorem“);
panel.saveDocument();

Mitte: UI-Wraper
Entwicklung
@Test
@ExtJSObject(id = „docPanel“)
DocumentPanel extends ExtPanel {
@FindByExtJS(itemId=„save“) Button saveButton;
}
saveDocument() {
saveButton.click();
@Inject DocumentPanel panel;
TextField field = panel.getTextField();
field.write(„lorem“);
panel.saveDocument();
}

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));

Warte, warte nur
ein Weilchen…

WebDriver Wait Pattern
Unklare Verantwortlichkeiten

Joala Wait-Pattern
Klare Verantwortlichkeiten

Wait Pattern
Vergleich

Wait-Pattern
Terminierung in Joala

Was der Tester wissen muss…
WebDriver

Was der Tester wissen muss…
Joala

Test-Pyramide (nach Mike Cohn)
Manual
UI
Service
Unit

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

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

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

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.

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 &
}

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

Referenzen (2)
 conceptsandtraining/modernie_selenium
modern.ie VBox-VM-Setup
 Modern.IE : Interoperabilität, Browser & Cross Platform Testing

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

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)

CONTENT | CONTEXT | CONVERSION
Mark Michaelis
about.me/michaelismark

Wait-Pattern
Terminierung in WebDriver

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie SokaHH: Testen von Rich-Web-UI (German)

Ähnlich wie SokaHH: Testen von Rich-Web-UI (German) (20)

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

Hinweis der Redaktion