sokahh: testen von rich-web-ui (german)

www.coremedia.com© CoreMedia | 2014-10-21 | 1

Softwerkskammer Hamburg

Testen von Rich-Web-UIsMark Michaelis

Kudos to Martti Jeenicke

Dev@CoreMedia

© CoreMedia | 2014-10-21 | 3 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

Produkt


Frontend Beispiel: CoreMedia Studio


Anwendungsarchitektur

Studio-Server(WebApp)

Client (Browser)

ContentREST Service

Presentation

ExtJS

MVCRemoting

Backend Services

…Content Server

Search

AJAX Request

JSON


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

Testen vonUI-Komponenten


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

Bornto Fail

Succeed Fast

Reusable

Extensible

UI-Testsschichtweise


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-Patternfür Server als auch UI

@Test







}

searchServiceWrapper

.indexed(doc)

.waitUntil(is(true));


Mitte: UI-WrapperVerwendung

@Test







}

@Inject DocumentPanel panel;

TextField field = panel.getTextField();

field.write(„lorem“);

panel.saveDocument();


Mitte: UI-WraperEntwicklung

@Test







}

@Inject DocumentPanel panel;

TextField field = panel.getTextField();

field.write(„lorem“);

panel.saveDocument();

@ExtJSObject(id = „docPanel“)

DocumentPanel extends ExtPanel {

@FindByExtJS(itemId=„save“) Button saveButton;

saveDocument() {

saveButton.click();

}


Unten: Generiertes JavaScriptCode, 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 PatternUnklare Verantwortlichkeiten


Joala Wait-PatternKlare Verantwortlichkeiten


Wait PatternVergleich


Wait-PatternTerminierung in Joala


Was der Tester wissen muss…WebDriver


Was der Tester wissen muss…Joala

Test-Pyramide


Test-Pyramide (nach Mike Cohn)

UI

Service

Unit

Manual


Test-Pyramide (nach Mike Cohn)

UI

Service

Unit

Manual

10000 JUnit

600 JooUnit

200 Integration

2000 System

600 UI-Tests

1 Team (von 5):

25 Einzeltests

5 Stories, 30 Steps

20 explorativ

Infrastruktur


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.ieKonzept angelehnt an conceptsandtraining/modernie_selenium

https://github.com/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ürBug #337703

Openbox – benötigt, etwa um Fenster maximieren zu können

Optional: xwud, um auf Framebuffer-Images zugreifen zukönnen

gtk2-engines: Benötigt für Openbox, falls der FehlerXlib: extension "RANDR" missing on display ":105“

auftritt.

https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=337703

http://openbox.org/


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 &

}

Infrastruktur – Firefox & XvfbSkript-Skizze


Referenzen (1)

The Forgotten Layer of the Test Automation PyramidMike Cohn, 2009

TestPyramidMartin Fowler, 2012

WebDriver: Advanced Usage — Selenium Documentation, Explicit and Implicit Waits

Joalau. a. Referenzimplementierung Warte-Pattern

Jangaroou. a. JooUnit

http://www.mountaingoatsoftware.com/blog/the-forgotten-layer-of-the-test-automation-pyramid

http://martinfowler.com/bliki/TestPyramid.html

http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp#explicit-and-implicit-waits

https://github.com/CoreMedia/joala

http://www.jangaroo.net/


Referenzen (2)

conceptsandtraining/modernie_seleniummodern.ie VBox-VM-Setup

Modern.IE : Interoperabilität, Browser & Cross Platform Testing

https://github.com/conceptsandtraining/modernie_selenium

https://www.modern.ie/


Weitere Informationen

SoCraTes 2014: Testing Rich-Web-UIMark Michaelis

Death to sleeps! Raise of Conditions! | MindsMark Michaelis

Selenium Server as Windows Service via NSSM | MindsMark Michaelis

Meetup Softwerkskammer HH: Collected Thoughts on Testing Pyramid | MindsMark Michaelis

The Calm after the Storm | MindsOlaf Kummer

Haste makes waste | MindsOlaf Kummer

Entwickler entdecken UI-TestingMark Michaelis, Testing Experience DE 4/2014, S. 12ff

http://de.slideshare.net/MarkMichaelis2/2014-0809so-crates14testingrichwebui

http://minds.coremedia.com/2013/06/03/death-to-sleeps-raise-of-conditions/

http://minds.coremedia.com/2013/05/22/selenium-server-as-windows-service-via-nssm/

http://minds.coremedia.com/2013/03/20/meetup-softwerkskammer-hh-collected-thoughts-on-testing-pyramid/

http://minds.coremedia.com/2013/01/28/the-calm-after-the-storm/

http://minds.coremedia.com/2012/11/29/haste-makes-waste/

http://www.testingexperience.de/

Erfahrung


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 Michaelisabout.me/michaelismark

http://about.me/michaelismark

Bonusmaterial


Wait-PatternTerminierung in WebDriver

sokahh: testen von rich-web-ui (german)

Software