Entwickler gut beraten: UI-Tests die Spaß machen · © CoreMedia | 2012-11-29 | 1 Entwickler gut...

www.coremedia.com © CoreMedia | 2012-11-29 | 1

Entwickler gut beraten: UI-Tests die Spaß machen Mark Michaelis

Martti Jeenicke

Über Uns

Wer sind wir?

Mark Michaelis QA Architect

Martti Jeenicke Agile Coach

Was macht CoreMedia?

Enterprise Web Content Management

Produkt-Haus

Headquarter in Hamburg

Produkt-entwicklung

Produktentwicklung

Traditionell Engineering lastig

Agile Entwicklung (hauptsächlich Scrum)

Komponenten-Teams (Scrum im Großen)

Interaction und Frontend Design zunehmend wichtig

Besonders für Backend-UIs

Frontend

Frontend Beispiel: CoreMedia Studio

Redaktionstool als Rich Web Application

Ersatz für Desktop Anwendungen

Komponenten-Ansatz

Plug-in-basiert

Ajax (XHR)

Viele Technologien

Hohe Komplexität

Anwendungsarchitektur

Studio Server (Web-App) Client (Browser)

Presentation

Remoting

Ajax Request

Content REST Service

Ext JS

Ext Core ExtJS

Backend Server

Content Server Search …

Testen von UI-Komponenten

Technischer Rahmen

Test-Setup durch viele Applikationsschichten:

Content-, Search-Server

Web-Application-Server

Browser/UI

Testen von Plug-ins im Redaktionstool (CoreMedia Studio)

Wir sind durch einige UI-Test-Frameworks gegangen

WinRunner, QF-Tests, Sahi, ….

heute: Selenium/WebDriver als Basis-Technologie

Organisatorischer Rahmen

UI-Tests sind Teil der Defintion of Done von Teams

UI-Tests sind Teil unserer CI-Chain (Selenium Grid)

Scrum im Großen

Lernkurve ist bereits für UI steil

Koordination vieler Teams über eine Community of Practice

Testen muß Spaß machen

Für Entwickler ist Testen häufig lästig

„Nur Doku schreiben ist schlimmer“

Ohne Spaß weniger Akzeptanz von DoD Richtlinien

Tests müssen einfach zu verstehen sein

Tests können sehr (zeit-)aufwändig sein (und müssen trotzdem Spaß machen)

Was hindert uns daran Spaß zu haben?

Thread.sleep(1000);

Hm, Test ist noch rot

Thread.sleep(1001);

… immer noch …

Thread.sleep(2000);

… komisch …

Unser UI-Test im Jenkins war rot

Und was hast Du gemacht?

Nach einem Neustart war er grün…

Oder auch…

Der Test war rot. Ich habe 2 Tage versucht den Tests zu reparieren.

Und, läuft er jetzt wieder?

Es war doch die Funktionalität, die kaputt war

Was macht keinen Spaß?

Flackernde Tests

„Thread.sleep()“

Broken Window

Tests statt Produkt fixen

UI-Änderungen machen alles in den Tests „Kaputt“

Schlechte Kosten-Nutzen-Relation von Tests

Schlechte Debug-Unterstützung

Unverständliche Tests (für Entwickler)

Organisatorischer Ansatz

Entwickler mit ins Boot holen

„Mach kaputt, was Dich kaputt macht!“

Verbindung von Code und Test-Framework ist wichtig

Teams bauen gemeinsam ein Test Framework

Als Basis für schnell geschriebenen Tests

Flexibel für UI-Änderungen

Enge Feedbackschleife mit den Entwicklern

z.B. Konzept von Webdrivers Expected Conditions ist bei Team-Vorstellung durchgefallen

Technischer Ansatz

Primäre Design Prinzipien

Simplicity

Born to Fail

Succeed Fast

Reusable

Extensible

Nur Einfaches wird akzeptiert

Testen mit schlafwandlerischer Sicherheit

Simplicity

Born to Fail

Succeed Fast

Reusable

Extensible

Tests müssen scheitern können

gutes Reporting

wohldefiniertes Ende

Simplicity

Born to Fail

Succeed Fast

Reusable

Extensible

Im Erfolgsfall muss es schnell gehen

In IDE muss es schnell gehen

Simplicity

Born to Fail

Succeed Fast

Reusable

Extensible

Konzepte allgemein wiederverwendbar = Joala

Wiederverwendung über Team-Grenzen

Simplicity

Born to Fail

Succeed Fast

Reusable

Extensible

Test-Framework muss erweiterbar sein

Erweiterbar wie Produkt

Design Prinzipien

Simplicity

Born to Fail

Succeed Fast

Reusable

Extensible

Open Source by CoreMedia

powered by

Jangaroo

Joalas Freunde

seit 4.11 vollständig

Evolution eines Tests

Evolution eines Tests Aus Alt…

Was macht der nachfolgende Test… 15 sec.

void testDocUpdate() {

doc = cms.createDoc();

date1 = doc.getDate();

while (!searchServer.isIndexed(doc)) {

Thread.sleep(1000);

browser.open(„http://.../studio?id=“ + doc.getId());

Thread.sleep(2000);

browser.getElement(„text“).click();

browser.getElement(„text“).sendKeys(„lorem“);

browser.getElement(„save“).click();

Thread.sleep(500);

date2 = doc.getDate();

assertTrue(date2.after(date1));

Test, vor 10 Jahren geschrieben, Entwickler inzwischen weg

Geht das besser?

Evolution eines Tests … mach Neu!

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

Beispiel-UI

Beispiel-UI in ExtJS

Unter der Lupe

Evolution eines Tests Test-Name

} Alle fehlgeschlagenen Tests

Testname Dauer Alter

>>> …StoryTest.scenario_document_change_updates_date 34.07 1

Jenkins Logo by C. Lowell & Frontside

Evolution eines Tests Gherkin für mehr Lesbarkeit

Given document D exists

And document D is opened

When I change document D

Then modification date of document D is updated.

Evolution eines Tests Referenzen

Evolution eines Tests Conditions/Matcher

// required to open document

while (!searchServer.isIndexed(doc)) {

Thread.sleep(1000);

// … open document

searchServiceWrapper

.indexed(doc)

.assumeThat(equalTo(true)); // assumeTrue()

searchServiceWrapper

.indexed(doc)

.assumeThat(equalTo(true)); // assumeTrue()

Evolution eines Tests UI-Wrapper als Ersatz für…

browser.getElement(„text“).click();

browser.getElement(„text“).sendKeys(„lorem“);

browser.getElement(„save“).click();

Evolution eines Tests UI-Wrapper

@Inject DocumentPanel panel;

TextField field = panel.getTextField();

field.write(„lorem“);

panel.saveDocument();

Evolution eines Tests UI-Wrapper einfach geschrieben

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

Evolution eines Tests Wrapper: Für Entwickler

Hierarchie in ExtJS Hierarchie in Wrappern

GridView extends Base {

GridDragZone getDragZone();

Condition<WebElement> cellElement(row ,column);

Condition<WebElement> rowElement(row);

void dragRowFromTo(fromRow,toRow);

BooleanCondition empty();

Evolution eines Tests UI-Wrapper – Ein Beispiel aus dem Leben

Was Wrapper wrappen

Evolution eines Tests UI-Wrapper verstecken Komplexität, JavaScript

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

Evolution eines Tests UI-Wrapper verstecken Komplexität, DOM-Struktur

</tbody></table>

<button type="button" id="ext-gen318" style="" class=" x-btn-text">Bestätigen</button> </em>

Zusammen- fassung

Zusammenfassung

UI-Test machen Spaß

näher am Produkt

schneller schreiben

Fehler werden schnell gefunden

Grüne Radiator Views

Entwickler gut beraten

Ideen von Entwickler aufgesammelt und weiterverteilt

Wissensinseln abgebaut

Teams sprechen dieselbe Sprache

Teams helfen Teams (CoP)

Weiterentwicklung durch alle

CONTENT | CONTEXT | CONVERSION

Mark Michaelis mark.michaelis@coremedia.com

Martti Jeenicke martti.jeenicke@coremedia.com

http://bit.ly/xdde12-uitestfun

Bonusmaterial

Bonusmaterial für eine nachfolgende Diskussion

im Download enthalten für weitere Informationen

Expected Conditions

Verantwortlichkeiten WebDriver Wait Pattern

Verantwortlichkeiten Joala Wait-Pattern

Terminierung WebDriver Wait Pattern

Terminierung Joala Wait Pattern

Verwendung im Test WebDriver Wait Pattern

Verwendung im Test Joala Wait Pattern

BDD-Logging

BDD-Logging mit Spring-AOP

STORY: .......... Story 776 Open Collection View

SCENARIO: ....... show document

..... given a folder has been created

..... given a document has been created in the folder

..... when the document is shown in the collection view in thumbnail mode

..... then the collection view is in repository mode

..... then the collection view is in thumbnail mode

..... then the folder is the current folder

..... then the document is selected in the repository thumbnails view

Entwickler gut beraten: UI-Tests die Spaß machen · © CoreMedia | 2012-11-29 | 1 Entwickler gut...

Documents

Transcript of Entwickler gut beraten: UI-Tests die Spaß machen · © CoreMedia | 2012-11-29 | 1 Entwickler gut...

Roland Weigelt UI / UX-Grundlagen für Entwickler · UI / UX-Grundlagen für Entwickler ...und andere Nicht-Designer Roland Weigelt.NET Developer Group Braunschweig

Descompensación Cetoacidótica en el Enfermo Diabéticoredgdps.org/gestor/upload/file/IX Curso residentes... · bolus ev 0,15 UI/kg (10 UI) mantenimiento 0,10 UI/kg/h (6-8 UI/h)

Bluetooth inkl. MwSt Visual Studio€¦ · NET-Tools für professionelle Entwickler: Windows, HTML5/Web und XAML. • Hunderte von UI-Controls für alle .NET-Plattformen, einschl.

ui 92 / 05.12

Tutoriat - UI Prototyping | Strukturprototypen

Wir beraten persönlich. - eureos gmbh l Wir beraten ...

ui 73 / 10.10

ui 84 / 09.11

SharePoint für Entwickler

App Entwickler

Grundlagen des UI Designs

WEB›DEVELOPER›/›FRONTEND›ENTWICKLER›(M/W) · ››Konzipierung,›Entwicklung›und›Implementierung›› von›Single-Page›Applications ››Entwicklung›von›UI›Prototypen,›Web›Frontend››

gut beraten … Handbuch zur Erstellung von Gemeindekonzeptionen€¦ · Gut beraten: Handbuch zur Erarbeitung eines Gemeindekonzeptes Inhaltsverzeichnis „gut beraten … – Handbuch

Datenblatt DB DE MINI MCR-2-UI-UI · MINI MCR-2-UI-UI 106006_de_00 PHOENIX CONTACT 6 Allgemeine Daten Grenzfrequenz (3 dB) 30 Hz (über DIP-Schalter) 5 kHz (über DIP-Schalter) Übertragungsfehler

Software… was gibt's denn da zu dokumentieren? agiler Ansatz, interdisziplinäres Team (Entwickler, UI-Experten, Informationsentwickler, Übersetzer, QM-Leute) Software-Doku-Normen

ArcGIS für Entwickler - Esri Deutschland · ArcGIS für Entwickler. ArcGIS für Entwickler. Lars Schmitz Esri Deutschland GmbH, Kranzberg. 2. #geodev. 3. ArcGIS Platform. Desktop

DANN BIST DU BEI UNS RICHTIG! Wir suchen einen … · im Bereich UI / UX Design ... - Fachliche Dokumentation von Konzepten und Begleitung der Tester und Entwickler im ... Die financial.com

UI-Transformator UI-transformer mit Kühlkanal with cooling ... · tuo ui 150/65 s 2500 va 96 % 202 121 137 261 tuo ui 150/77 s 3000 va 96 % 202 133 149 261 tuo ui 150/92 s 3400 va

ui 85 / 10.11

ui 103 / 05.13