1. Testing Single-page Web App
Akshay Mathur
Siddharth Saha
Nikita Mundhada

2. Ground Rules
• Post on FB and Tweet now
• Disturb Everyone during the
session
– Not by phone rings
– Not by local talks
– By more information and
questions
2@akshaymathu @sid_chilling @nikitascorner

3. Let’s Know Each Other
• Do you code?
• Do you test?
• OS?
• Programing Language?
• HTML DOM, CSS Selectors, JQuery ?
• Why are you attending?
3@akshaymathu @sid_chilling @nikitascorner

4. Akshay Mathur
• Managed development, testing and release
teams in last 14+ years
– Currently Principal Architect at ShopSocially
• Founding Team Member of
– ShopSocially (Enabling “social” for retailers)
– AirTight Neworks (Global leader of WIPS)
4@akshaymathu @sid_chilling @nikitascorner

5. Siddharth Saha
• CS graduate from NIT Rourkela
• 3+ years in Software Product industry
• Worked in Telecom (Drishti Soft) and Social
Shopping (ShopSocially) Domains
• Currently Junior Application Architect at
ShopSocially
5@akshaymathu @sid_chilling @nikitascorner

6. Nikita Mundhada
• CS graduate from PICT Pune
• 2 years in Software Product industry
• Worked
– at Amdocs as a Java Developer
– at ShopSocially as a Full Stack Developer
• Going back to college
– For MS at Georgia Institute of Technology
6@akshaymathu @sid_chilling @nikitascorner

7. Agenda
• Problem Statement
– What are single page apps and how are they different
– Why other tools fail testing dynamic DoM in browser
• Introduction to Server Side Javascript and Related
Technologies
– Headless Browser, NodeJS, PhantomJS, CasperJS, Splinter
• Demonstrations and Code Walkthroughs
– Invoking UI test suite, in the browser from Python console,
using Splinter
– Testing UI from command line, without opening the
browser, using CasperJS
7@akshaymathu @sid_chilling @nikitascorner

8. Traditional Web Apps
Dynamic on Server

9. The Evolution of Web
9
@akshaymathu @sid_chilling
@nikitascorner

10. Traditional Apps
• Action items are implemented as hyperlinks to
URLs
• Different web page is requested from server
for next step of workflow
• Browser’s address bar is the only progress
indicator
• Tooltips are available for in-context help
10@akshaymathu @sid_chilling @nikitascorner

11. Page Construction
• On Server:
– Dynamic portion of the page executes and brings
the data
– HTML gets constructed using PHP, ASP, JSP etc.
• On Client:
– Browser renders the HTML DOM
– No major change happens in HTML DOM after
rendering
• Light use of Javascript
11@akshaymathu @sid_chilling @nikitascorner

12. Traditional Testing Tools Work Fine
• Get a copy of HTML DOM just before it is
being rendered by web browser
• Do not execute Javascript
• For recognizing DOM elements:
– Old: Use window coordinates
– New: Use Object’s xPath
• Use UI elements/Events for interactions
12@akshaymathu @sid_chilling @nikitascorner

13. Modern Apps
Dynamic on Client

14. Modern Apps
• Javascript event handlers are attached to on-
screen actions
• Only required portion of page gets updated as
needed
• Loading indicator appears whenever user
need to wait
• Rich in-context interaction, in form of light-
box popups
14@akshaymathu @sid_chilling @nikitascorner

15. Page Construction
• On Server:
– Minimal HTML rendering
– Typically no (or minimum) data-driven components
– Separate calls for data
• On Client:
– Data requested from Server using AJAX calls
– HTML DOM changes dynamically
– Workflow implemented in browser
• Heavy use of Javascript
– Jquery, BackboneJS etc.
15@akshaymathu @sid_chilling @nikitascorner

16. Traditional Testing Tools Fail
• Changed HTML DOM is not available to the
tool
• xPaths of existing elements change
16@akshaymathu @sid_chilling @nikitascorner

17. Requirements for New Age Tools
• Should have complete control over HTML
DOM and the Javascript on the page
– Should be able to fire DOM events as user does
– Should be able run Javascript on the page as it
happens in the browser on user’s action
– Should be able to get changed DOM as needed
• Should use selectors rather than xPaths
• Should not depend too much on screen
painting
17@akshaymathu @sid_chilling @nikitascorner

18. 18@akshaymathu @sid_chilling @nikitascorner

19. Javascript Runtime Environment
Outside the Brower

20. NodeJS
• Technology that allows to use Javascript on
server side or in command line environment
– A complete app-server and web-framework can
be written using NodeJS
• Even-driven and Asynchronous programming
– High performance
– Low response time
20@akshaymathu @sid_chilling @nikitascorner

21. Headless Browser
• Browser without Graphical User Interface
– Implements everything same as web browsers
• HTTP Request and Response handling
• Rendering Engine
• HTTP DOM and Events
• Javascript Runtime Environment
• Used for website testing, screen capture and
page automation from command line
21@akshaymathu @sid_chilling @nikitascorner

22. Headless Browsers
• Phantom JS
– Headless browser implementing Webkit
• Similar to Chrome, Safari
• Slimer JS
– Upcoming headless browser implementing Gecko
• Similar to Firefox
22@akshaymathu @sid_chilling @nikitascorner

23. Testing Tools

24. Casper JS
• Tool built on top of Headless Browsers
– Same code works for PhantomJS and SlimerJS
• Eases the process of defining a full navigation
scenario
• Provides syntactic sugar for common tasks:
– Filling Forms
– Clicking and following links
– Logging events
– Finding DOM elements
– …
24@akshaymathu @sid_chilling @nikitascorner

25. Splinter
• Open source tool for testing web applications
using Python
• An abstraction layer on top of existing
browser automation tools:
– Selenium
– PhantomJS
– Zope
25@akshaymathu @sid_chilling @nikitascorner

26. 26@akshaymathu @sid_chilling @nikitascorner

27. Demonstrations
• Important points to note
– The UI under test is sensitive to screen size
– The test includes interacting with the elements in
an iFrame
– The DOM in the iFrame changes dynamically
without loading the complete page
27@akshaymathu @sid_chilling @nikitascorner

28. ShopSocially
• Provides social apps to online retailers
– Most of apps are embed-able on web pages
• Execute in iFrame
• Do not reload page for better user experience
28@akshaymathu @sid_chilling @nikitascorner

29. Testing with Browser UI
Splinter Demonstration and Code
Siddharth Saha

30. Splinter
• Open source tool for testing web applications
using Python
• An abstraction layer on top of existing
browser automation tools:
– Selenium
– PhantomJS
– Zope
30@akshaymathu @sid_chilling @nikitascorner

31. Splinter
• Simple Python APIs
• Multiple webdrivers
– Chrome, Firefox, PhatomJS, Zope
– One code to rule them all
• CSS and Xpath Selectors
• Support for iframe and alerts
• Executes JavaScript
31@akshaymathu @sid_chilling @nikitascorner

32. Do with Splinter
• Browser Navigation
• Finding elements
• Mouse interactions
• Interacting with elements and forms
• Cookies manipulation
• Execute JavaScript
• Deal with HTTP status codes
• Interact with iframes, alerts and prompts
32@akshaymathu @sid_chilling @nikitascorner

33. @akshaymathu @sid_chilling @nikitascorner 33

34. Choosing Browser
from splinter import Browser
browser = Browser(„chrome‟)
B = Browser(user_agent =
„Mozilla/5.0 (iPhone; U;)‟)
34@akshaymathu @sid_chilling @nikitascorner

35. Navigation
browser.visit(
„http://shopsocially.com‟
)
browser.back()
browser.forward()
@akshaymathu @sid_chilling @nikitascorner 35

36. Finding DOM Element
browser.find_by_id(„my_id‟)
browser.find_by_name(„my_name‟)
browser.find_by_tag(„h1‟)
36@akshaymathu @sid_chilling @nikitascorner

37. Mouse Interactions
browser.find_by_tag(„div‟).first.
click()
browser.find_by_id(„my_id‟).
right_click()
browser.find_by_name(„my_name‟).
double_click()
browser.find_by_tag(„h1‟).
mouse_over()
37@akshaymathu @sid_chilling @nikitascorner

38. Interacting with Form Elements
browser.fill(„query‟,
„Siddharth‟)
browser.choose(„some-radio‟,
„radio-value‟)
browser.select(„my-dropdown‟,
„my-fav-value‟)
38@akshaymathu @sid_chilling @nikitascorner

39. Executing Javascript
browser.execute_script(
“$(„body‟).css(„bgcolor‟, „#ccc‟);
$(„#some_el‟).hide();”
)
39@akshaymathu @sid_chilling @nikitascorner

40. Dealing with iFrames
with
browser.get_iframe(„iframe_id‟)
as iframe:
iframe.fill(„query‟, „sid‟)
40@akshaymathu @sid_chilling @nikitascorner
• iFrame is another browser object
– Supports all the functionality of a browser

41. 41@akshaymathu @sid_chilling @nikitascorner

42. Testing without Browser UI
CasperJS Demonstration and Code
Nikita Mudada

43. Casper JS
• Tool built on top of Headless Browsers
– Same code works for PhantomJS and SlimerJS
• Eases the process of defining a full navigation
scenario
• Provides syntactic sugar for common tasks:
– Filling Forms
– Clicking and following links
– Logging events
– Finding DOM elements
– …
43@akshaymathu @sid_chilling @nikitascorner

44. Casper JS
• Code written in only JavaScript/CoffeeScript
• Casper JS and the javascript in the page
execute in their own sandboxes
– Specific call is available to communicate
• Tester module provides functions and
assertions for testing
• Utils module provide general utilities for I/O
44@akshaymathu @sid_chilling @nikitascorner

45. Skeleton of a CasperJS program
@akshaymathu @sid_chilling @nikitascorner 45
then()
run()
evaluate()
Passes
Function
Returns
Value
Page DOM SandboxCasperJS Sandbox
Executes
Function

46. Example
@akshaymathu @sid_chilling @nikitascorner 46
var casper = require('casper').create();
casper.start('http://facebook.com/‟);
casper.then(function() {
this.echo(this.getTitle());
this.evaluate(function(){
alert("Cookies are:" + document.cookie);
});
});
casper.run();

47. Demonstration
@akshaymathu @sid_chilling @nikitascorner 47

48. Specifying Window Size
var casper =
require('casper').create({
verbose:true,
logLevel:'info',
waitTimeout:10000,
viewportSize:
{width: 900,
height:700}
});
48@akshaymathu @sid_chilling @nikitascorner

49. Checking for DOM Element
casper.then(function(){
this.test.assertExists(
'#ssmi_getafan_sidebar_image',
'Sidebar image loaded.');
this.click('#ssmi_getafan_sidebar_
image a');
this.page.switchToChildFrame("ssmi
_getafan_iframe");
@akshaymathu @sid_chilling @nikitascorner 49

50. Clicking a Hyperlink
casper.then(function(){
this.test.assertExists('#ssmi_geta
fan_sidebar_image', 'Sidebar
image loaded.');
this.click(
'#ssmi_getafan_sidebar_image a');
this.page.switchToChildFrame("ssmi
_getafan_iframe");
@akshaymathu @sid_chilling @nikitascorner 50

51. Getting into iFrame
casper.then(function(){
this.test.assertExists('#ssmi_geta
fan_sidebar_image', 'Sidebar
image loaded.');
this.click('#ssmi_getafan_sidebar_
image a');
this.page.switchToChildFrame(
"ssmi_getafan_iframe");
@akshaymathu @sid_chilling @nikitascorner 51

52. Getting info from Web Page
this.evaluate(function(){
alert("Cookies are:" +
document.cookie);
});
});
@akshaymathu @sid_chilling @nikitascorner 52

53. Waiting for Changing DOM
casper.waitForSelector(
'#coupon_area > span',
function() {
this.test.assertTextExists('Tha
nk you!', 'Thank you message
displayed correctly.');
});
@akshaymathu @sid_chilling @nikitascorner 53

54. Reporting Results
casper.run(function(){
require('utils').dump(
casper.test.getFailures());
require('utils').dump(
casper.test.getPasses());
casper.test.renderResults(
true, 0, 'test-results.xml');
});
@akshaymathu @sid_chilling @nikitascorner 54

55. Result Format
<testsuite>
<testcase classname="samples" name="Get-a-Fan App Sidebar loaded." time="39.647">
</testcase>
<testcase classname="samples" name="Found “Special-20” within the selector
coupon_area1 > span" time="0.013">
<failure type="assertSelectorHasText">Found "Special-20" within the selector
"#coupon_area1 > span“>
</failure>
</testcase>
</testsuite>
55@akshaymathu @sid_chilling @nikitascorner

56. Do with CasperJS
• Test webpages
– Report results in X-unit XML format
– Integrate with Continuous Integration tool like
Jenkins
• Take screenshots
• Fill forms
• Insert scripts into webpages
• Download links
56@akshaymathu @sid_chilling @nikitascorner

57. 57@akshaymathu @sid_chilling @nikitascorner

58. Summary
• Nature of web apps is changing
– Javascript is becoming more and more powerful
– Dynamism has come to browser
• Testing tools are also catching up
– Dependency on UI layout is decreasing
• Using newer tools and technologies, We can
save a lot
– Tests are faster as they need not wait for UI
– Multiple CasperJS tests can run on same machine
58@akshaymathu @sid_chilling @nikitascorner

59. Thanks
59
@akshaymathu @sid_chilling @nikitascorner
@akshaymathu @sid_chilling @nikitascorner