Using REST and UI Testing to Test Ajax Web Applications

Using REST and UI Testing
to Test an Ajax Web
Application
Presented by
Adam Sandman
Software Testing Professionals Conference
Spring 2018 | Newport Beach, CA

2 | 4/15/2018 STP | Software Test Professionals Conference | Spring 2018
Agenda
Presentation Tier of Modern Applications
 Page Lifecycle in an AJAX Web Application
Explanation of Testable Areas
Recommended Test Strategy
 Integrating DOM and REST Testing
Practical Tips and Tools
Questions

Takeaways
1. The value of testing an application from multiple
architectural tiers
2. The benefits of combined testing of the User Interface and
REST services
3. Tools, techniques and processes you can use to test the
UI and REST services

Web Presentation Tier
Modern Frameworks and the AJAX Page Lifecycle

Traditional Web Applications
<html>
<head>…. </head>
<body>
<h1>Products</h1>
<table id=“prd” style=“….”>
…..
</table>
</body>
</html>

The AJAX Web Application Model
{
products: [
{ id: 1, name: “product 1” },
{ id: 2, name: “product 2” },
{ id: 3, name: “product 3” }
]
}

Possible Web Frameworks
 First Generation
 Prototype, Mootools, jQuery, ASP.NET AJAX, ExtJS, YUI, GWT
 Second Generation
 AngularJS 1.0, Knockout, Backbone, Handlebars, Ember, Mustache
 Latest Generation
 React
 Angular 2.0+
 Vue

React – Components & Virtual DOM
<Table
cancelClick={props.dataCancelEdit}
data={props.data}
deleteClick={props.dataDelete}
editClick={props.dataSetEdit}
editId={props.dataEditingId}
editChange={props.dataChange}
…
- html
- head
- body
- h1: “Products”
- table id: “prd” style: “….”
- tr
…

Angular
<h1>Products</h1>
<table>
<tr *ngFor=“let product of products”>
<td>
{{ product.name }}
</td>
</tr>
</table>
export class ProductsComponent
implements OnInit {
products: Product[];
ngOnInit() {
this.products = this.svc.getProds();
}
}

OK So What Can We Test?
 JSON Data Returned from REST Calls
 Rendered Browser DOM
 JS Framework
 React
 Virtual DOM
 Component State
 Angular
 Components
 Services

®
Test JSON Data Returned
Advantages
• Well defined API and data
structures – resilient
• Unit testing of key modules
• Fast to load in test data
• Not impacted by browser
speed or rendering quirks
Disadvantages
• Does not test the end user
experience
• No testing of any client side
business login, validation
• Does not validate rendering,
templating of JSON

®
Test Rendered Browser DOM
Advantages
• Most realistic testing,
validates what the end user
experiences
• Finds issues due to browser
quirks, differences
• Can test for usability,
performance, responsive
design, etc.
Disadvantages
• Scenario testing only,
cannot test until entire page
is rendered
• Hard to test specific page
components in isolation
• Changes in DOM, can
potentially break tests –
need skill to write resilient
tests

®
Test ReactJS Virtual DOM
Advantages
• Can test elements of the
rendered page without
needing the entire page
• Easier to test specific
components with varying
data sets
• Removes browser speed,
quirks from tests
Disadvantages
• Ignores browser differences
• Not full reflection of user
experience
• Changes to markup in
templates will break tests,
so not fully resilient
• Does not catch DOM-based
performance issues

®
Test ReactJS Component State
Advantages
• Easier to test specific
components with varying
data sets
• Tests the client-side
business logic (vs. server-
side unit tests)
• Can test exception cases
• Resilient to most UI changes
Disadvantages
• Does not test rendering of
state/properties into HTML
• Tests tied directly to React,
limited reusability with
other JS frameworks
• Does not test end user
experience of application

Test Strategy & Practical Demo

Sample Test Coverage
Browser DOM
Virtual DOM
UI “Component” Tests
REST JSON Tests
Server Side Unit Tests
Testing Breadth
Resilience vs. Realism

Sample Application – DOM & REST

Sample Application – ReactJS
http://www.libraryinformationsystem.org/react-js

Sample Application – Angular JS
http://www.libraryinformationsystem.org/angular-1/

See It In Action!

Top Tools for REST Testing
Postman
SoapUI
Rapise
vREST
Parasoft
Groovy

Top Tools for Browser DOM Testing
Selenium (WebDriver)
Rapise
Ranorex
TestComplete
Tricentis
HP UFT
Squish

®
JS Framework Specific Tools
React
• Testing Component State
• TestUtils + Jasmine
• TestUtils + JEST
• TestUtils + Mocha
• Testing Virtual DOM
• Enzyme + Mocha
Angular
• Testing Services
• Jasmine
• Mocha
• Testing Components
• TestBed + Jasmine
• TestBed + Mocha

Wrap Up
 Modern web applications are complex and hard to test
 You need to test each of the different tiers
 Some tiers are easier to test than others
 You need to carefully plan your testing to have the best
coverage of the tiers with least effort

Thank you for attending this
workshop/session.
Please fill out an evaluation form.

Using REST and UI Testing to Test Ajax Web Applications

Recommended

More Related Content

What's hot (20)

Similar to Using REST and UI Testing to Test Ajax Web Applications (20)

More from Adam Sandman (20)

Recently uploaded (20)

Using REST and UI Testing to Test Ajax Web Applications