This document discusses testing user interfaces (UIs) for rich web applications. It presents an evolution of UI testing approaches, from low-level tests that rely on threads and waits to higher-level tests using page object patterns. It advocates wrapping UI components to abstract away technical details and create more readable, maintainable tests. The document also outlines principles for UI testing such as simplicity, extensibility and being designed to fail fast.

1. www.coremedia.comwww.coremedia.com© CoreMedia | 2012-11-29 | 1
SoCraTes 2014:
Testing Rich-Web-UI
Mark Michaelis
Kudos to Martti Jeenicke

2. © CoreMedia AG | 10 April 2014 | 2
User Interface

3. © CoreMedia | 10 April 2014 | 3© CoreMedia AG | 10 April 2014 | 3
UI-Example: CoreMedia Studio

4. © CoreMedia | 10 April 2014 | 4© CoreMedia AG | 10 April 2014 | 4
Client-Server-Architecture
Studio-Server
(WebApp)
Client (Browser)
Content
REST Service
Presentation
ExtJS
MVC
Remoting
Backend Services
…
Content
Server
Search
AJAX Request
JSON

5. © CoreMedia AG | 10 April 2014 | 5
Testing UI-Components

6. © CoreMedia | 10 April 2014 | 6© CoreMedia AG | 10 April 2014 | 6© CoreMedia AG | 10 April 2014 | 6
Test-Pyramide (adopted from Mike Cohn)
UI
Service
Unit
Manual

7. © CoreMedia | 10 April 2014 | 7© CoreMedia AG | 10 April 2014 | 7
SoCraTes 2014 Session Notes
 Another pyramid introduced by Gojko Adzic:
How to implement UI testing without shooting yourself in the
foot (2010-04-13)

8. © CoreMedia AG | 10 April 2014 | 8
Technical Approach

9. © CoreMedia | 10 April 2014 | 9© CoreMedia AG | 10 April 2014 | 9
Primary Design Principles
Simplicity
Born
to Fail
Succeed
Fast
Reusable
Extensible
Sweetspot

10. © CoreMedia AG | 10 April 2014 | 10
UI-Test-Evolution

11. © CoreMedia | 10 April 2014 | 11© CoreMedia AG | 10 April 2014 | 11
UI-Test-Evolution
Old
@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));
}

12. © CoreMedia | 10 April 2014 | 12© CoreMedia AG | 10 April 2014 | 12
UI-Test-Evolution
New
@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);
}

13. © CoreMedia | 10 April 2014 | 13© CoreMedia AG | 10 April 2014 | 13
UI-Test-Evolution
Conditions/Matcher
@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(equalTo(true));

14. © CoreMedia | 10 April 2014 | 14© CoreMedia AG | 10 April 2014 | 14
UI-Test-Evolution
UI-Wrapper
@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();

15. © CoreMedia | 10 April 2014 | 15© CoreMedia AG | 10 April 2014 | 15
UI-Test-Evolution
UI-Wrapper
@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();
@ExtJSObject(id = „docPanel“)
DocumentPanel extends ExtPanel {
@FindByExtJS(itemId=„save“) Button saveButton;
saveDocument() {
saveButton.click();
}

16. © CoreMedia | 10 April 2014 | 16© CoreMedia AG | 10 April 2014 | 16
UI-Test-Evolution
Wrapped UI
http://studio/
Content Tags Language
#onlinehelden
Title
Save Cancel

17. © CoreMedia | 10 April 2014 | 17© CoreMedia AG | 10 April 2014 | 17
UI-Test-Evolution
ExtJS Components
Panel
Toolbar Toolbar
TabView
Tab Tab Tab
Property Field
Toolbar
Label
Textfield
Button

18. © CoreMedia | 10 April 2014 | 18© CoreMedia AG | 10 April 2014 | 18
UI-Test-Evolution
Wrapper: Mapping ExtJS to Java
Hierarchy in ExtJS Hierarchy in Wrapperns

19. © CoreMedia | 10 April 2014 | 19© CoreMedia AG | 10 April 2014 | 19
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

20. © CoreMedia AG | 10 April 2014 | 20
Wrap what?

21. © CoreMedia | 10 April 2014 | 21© CoreMedia AG | 10 April 2014 | 21
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));

22. © CoreMedia | 10 April 2014 | 22© CoreMedia AG | 10 April 2014 | 22
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>&nbsp;</i></td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr"><i>&nbsp;</i></td>
</tr>
<tr>
<td class="x-btn-ml"><i>&nbsp;</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>
…

23. © CoreMedia AG | 10 April 2014 | 23
Some Graphs

24. © CoreMedia | 10 April 2014 | 24© CoreMedia AG | 10 April 2014 | 24
Responsibilities
WebDriver Wait Pattern

25. © CoreMedia | 10 April 2014 | 25© CoreMedia AG | 10 April 2014 | 25
Responsibilities
CoreMedia‘s Wait-Pattern

26. © CoreMedia | 10 April 2014 | 26© CoreMedia AG | 10 April 2014 | 26
Termination
WebDriver Wait Pattern

27. © CoreMedia | 10 April 2014 | 27© CoreMedia AG | 10 April 2014 | 27
Termination
CoreMedia‘s Wait Pattern

28. © CoreMedia | 10 April 2014 | 28© CoreMedia AG | 10 April 2014 | 28
What the Tester needs to know
WebDriver Wait Pattern
Everything…

29. © CoreMedia | 10 April 2014 | 29© CoreMedia AG | 10 April 2014 | 29
What the Tester needs to know
CoreMedia‘s Wait Pattern

30. © CoreMedia | 10 April 2014 | 30© CoreMedia AG | 10 April 2014 | 30
SoCraTes 2014 Session Notes
 What are you using for testing Web-UIs?
 DalekJS
 Selenium
 FluentLenium
 Protractor (for AngularJS Apps)
 ember
 capybara
 Greenpepper
 instanbul-js (Code Coverage)

31. © CoreMedia | 10 April 2014 | 31© CoreMedia AG | 10 April 2014 | 31
SoCraTes 2014 Session Notes
 Further Reading:
 testingexperience.de No. 4, January 2014:
(German, registration required for download)
Entwickler entdecken UI-Testing, pp. 12

32. www.coremedia.com© CoreMedia | 13. August 2014 | 32
Singapore
asia-info@coremedia.com
tel +65.6562.8866
Hamburg
info@coremedia.com
tel +49.40.32 55 87.0
San Francisco
usa-info@coremedia.com
tel +1.415.371.0400
London
uk-info@coremedia.com
tel +44.207.849.3317
Washington
info@coremedia.com
tel +1.703.945.1079