SoCraTes 2014: Testing Rich-Web-UI

www.coremedia.comwww.coremedia.com© CoreMedia | 2014-08-09 | 1

SoCraTes 2014:Testing Rich-Web-UI

Mark Michaelis

Kudos to Martti Jeenicke

including Session Notes

© CoreMedia AG | 2014-08-09 | 2

User Interface

© CoreMedia | 10 April 2014 | 3© CoreMedia AG | 2014-08-09 | 3

UI-Example: CoreMedia Studio


Client-Server-Architecture

Studio-Server(WebApp)

Client (Browser)

ContentREST Service

Presentation

ExtJS

MVCRemoting

Backend Services

…Content Server

Search

AJAX Request

JSON

© CoreMedia AG | 2014-08-09 | 5

Testing UI-Components

© CoreMedia | 10 April 2014 | 6© CoreMedia AG | 2014-08-09 | 6© CoreMedia AG | 2014-08-09 | 6

Test-Pyramide (adopted from Mike Cohn)

UI

Service

Unit

Manual

http://gojko.net/2010/04/13/how-to-implement-ui-testing-without-shooting-yourself-in-the-foot-2/


SoCraTes 2014 Session Notes

Another pyramid introduced by Gojko Adzic:How to implement UI testing without shooting yourself in the foot (2010-04-13)




© CoreMedia AG | 2014-08-09 | 8

Technical Approach


Primary Design Principles

Simplicity

Bornto Fail

Succeed FastReusable

Extensible

Sweetspot

© CoreMedia AG | 2014-08-09 | 10

UI-Test-Evolution


UI-Test-EvolutionOld

@Test

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

}


UI-Test-EvolutionNew

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

}


UI-Test-EvolutionConditions/Matcher

@Test







}searchServiceWrapper

.indexed(doc)

.waitUntil(equalTo(true));


UI-Test-EvolutionUI-Wrapper

@Test







}@Inject DocumentPanel panel;

TextField field = panel.getTextField();

field.write(„lorem“);

panel.saveDocument();


UI-Test-EvolutionUI-Wrapper

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

}


UI-Test-EvolutionWrapped UI

http://studio/

Content Tags Language

#onlineheldenTitle

Save Cancel


UI-Test-EvolutionExtJS Components

Panel

Toolbar Toolbar

TabView

Tab Tab Tab

Property Field

Toolbar

Label

Textfield

Button


UI-Test-EvolutionWrapper: Mapping ExtJS to Java

Hierarchy in ExtJS Hierarchy in Wrapperns


GridView extends Base {

GridDragZone getDragZone();

Condition<WebElement> cellElement(row ,column);

Condition<WebElement> rowElement(row);

void dragRowFromTo(fromRow,toRow);

BooleanCondition empty();

}

Evolution eines TestsUI-Wrapper – Ein Beispiel aus dem Leben

© CoreMedia AG | 2014-08-09 | 20

Wrap what?


Wrap what?Hidden Complexity (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));


Wrap what?Hidden Complexity, DOM-Structure

<table cellspacing="0" class="x-toolbar-ct"><tbody> <tr>

<td class="x-toolbar-left" align="left">

<table cellspacing="0"><tbody>

<tr class="x-toolbar-left-row"></tr>

</tbody></table>

</td>

<td class="x-toolbar-right" align="right">

<table cellspacing="0" class="x-toolbar-right-ct"><tbody>

<tr>

<td>

<table cellspacing="0"><tbody>

<tr class="x-toolbar-right-row">

<td class="x-toolbar-cell" id="ext-gen317">

<table id="ext-comp-1314" cellspacing="0" class="x-btn x-btn-noicon" style="width: 75px;">

<tbody class="x-btn-small x-btn-icon-small-left">

<tr>

<td class="x-btn-tl"><i> </i></td>

<td class="x-btn-tc"></td>

<td class="x-btn-tr"><i> </i></td>

</tr>

<tr>

<td class="x-btn-ml"><i> </i></td>

<td class="x-btn-mc">

<em class="" unselectable="on">

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

…

© CoreMedia AG | 2014-08-09 | 23

Some Graphs


ResponsibilitiesWebDriver Wait Pattern


ResponsibilitiesCoreMedia‘s Wait-Pattern


TerminationWebDriver Wait Pattern


TerminationCoreMedia‘s Wait Pattern


What the Tester needs to knowWebDriver Wait Pattern

Everything…


What the Tester needs to knowCoreMedia‘s Wait Pattern



What are you using for testing Web-UIs? DalekJS Selenium FluentLenium Protractor (for AngularJS Apps) ember capybara Greenpepper instanbul-js (Code Coverage)

http://dalekjs.com/

http://www.seleniumhq.org/

https://github.com/FluentLenium/FluentLenium

https://github.com/angular/protractor

http://emberjs.com/

https://github.com/jnicklas/capybara

http://www.greenpeppersoftware.com/

http://gotwarlost.github.io/istanbul/



Further Reading: testingexperience.de No. 4, January 2014:

(German, registration required for download)

Entwickler entdecken UI-Testing, pp. 12

www.coremedia.com© CoreMedia | 2014-08-09 | 32

[email protected] +65.6562.8866

[email protected] +49.40.32 55 87.0

San [email protected] +1.415.371.0400

[email protected] +44.207.849.3317

[email protected] +1.703.945.1079

Software

SoCraTes 2014: Testing Rich-Web-UI