Testing Single-page Web App
Akshay Mathur
Siddharth Saha
Nikita Mundhada
Ground Rules
• Post on FB and Tweet now
• Disturb Everyone during the
session
– Not by phone rings
– Not by local talks
– ...
Let’s Know Each Other
• Do you code?
• Do you test?
• OS?
• Programing Language?
• HTML DOM, CSS Selectors, JQuery ?
• Why...
Akshay Mathur
• Managed development, testing and release
teams in last 14+ years
– Currently Principal Architect at ShopSo...
Siddharth Saha
• CS graduate from NIT Rourkela
• 3+ years in Software Product industry
• Worked in Telecom (Drishti Soft) ...
Nikita Mundhada
• CS graduate from PICT Pune
• 2 years in Software Product industry
• Worked
– at Amdocs as a Java Develop...
Agenda
• Problem Statement
– What are single page apps and how are they different
– Why other tools fail testing dynamic D...
Traditional Web Apps
Dynamic on Server
The Evolution of Web
9
@akshaymathu @sid_chilling
@nikitascorner
Traditional Apps
• Action items are implemented as hyperlinks to
URLs
• Different web page is requested from server
for ne...
Page Construction
• On Server:
– Dynamic portion of the page executes and brings
the data
– HTML gets constructed using PH...
Traditional Testing Tools Work Fine
• Get a copy of HTML DOM just before it is
being rendered by web browser
• Do not exec...
Modern Apps
Dynamic on Client
Modern Apps
• Javascript event handlers are attached to on-
screen actions
• Only required portion of page gets updated as...
Page Construction
• On Server:
– Minimal HTML rendering
– Typically no (or minimum) data-driven components
– Separate call...
Traditional Testing Tools Fail
• Changed HTML DOM is not available to the
tool
• xPaths of existing elements change
16@aks...
Requirements for New Age Tools
• Should have complete control over HTML
DOM and the Javascript on the page
– Should be abl...
18@akshaymathu @sid_chilling @nikitascorner
Javascript Runtime Environment
Outside the Brower
NodeJS
• Technology that allows to use Javascript on
server side or in command line environment
– A complete app-server an...
Headless Browser
• Browser without Graphical User Interface
– Implements everything same as web browsers
• HTTP Request an...
Headless Browsers
• Phantom JS
– Headless browser implementing Webkit
• Similar to Chrome, Safari
• Slimer JS
– Upcoming h...
Testing Tools
Casper JS
• Tool built on top of Headless Browsers
– Same code works for PhantomJS and SlimerJS
• Eases the process of def...
Splinter
• Open source tool for testing web applications
using Python
• An abstraction layer on top of existing
browser au...
26@akshaymathu @sid_chilling @nikitascorner
Demonstrations
• Important points to note
– The UI under test is sensitive to screen size
– The test includes interacting ...
ShopSocially
• Provides social apps to online retailers
– Most of apps are embed-able on web pages
• Execute in iFrame
• D...
Testing with Browser UI
Splinter Demonstration and Code
Siddharth Saha
Splinter
• Open source tool for testing web applications
using Python
• An abstraction layer on top of existing
browser au...
Splinter
• Simple Python APIs
• Multiple webdrivers
– Chrome, Firefox, PhatomJS, Zope
– One code to rule them all
• CSS an...
Do with Splinter
• Browser Navigation
• Finding elements
• Mouse interactions
• Interacting with elements and forms
• Cook...
@akshaymathu @sid_chilling @nikitascorner 33
Choosing Browser
from splinter import Browser
browser = Browser(„chrome‟)
B = Browser(user_agent =
„Mozilla/5.0 (iPhone; U...
Navigation
browser.visit(
„http://shopsocially.com‟
)
browser.back()
browser.forward()
@akshaymathu @sid_chilling @nikitas...
Finding DOM Element
browser.find_by_id(„my_id‟)
browser.find_by_name(„my_name‟)
browser.find_by_tag(„h1‟)
36@akshaymathu @...
Mouse Interactions
browser.find_by_tag(„div‟).first.
click()
browser.find_by_id(„my_id‟).
right_click()
browser.find_by_na...
Interacting with Form Elements
browser.fill(„query‟,
„Siddharth‟)
browser.choose(„some-radio‟,
„radio-value‟)
browser.sele...
Executing Javascript
browser.execute_script(
“$(„body‟).css(„bgcolor‟, „#ccc‟);
$(„#some_el‟).hide();”
)
39@akshaymathu @s...
Dealing with iFrames
with
browser.get_iframe(„iframe_id‟)
as iframe:
iframe.fill(„query‟, „sid‟)
40@akshaymathu @sid_chill...
41@akshaymathu @sid_chilling @nikitascorner
Testing without Browser UI
CasperJS Demonstration and Code
Nikita Mudada
Casper JS
• Tool built on top of Headless Browsers
– Same code works for PhantomJS and SlimerJS
• Eases the process of def...
Casper JS
• Code written in only JavaScript/CoffeeScript
• Casper JS and the javascript in the page
execute in their own s...
Skeleton of a CasperJS program
@akshaymathu @sid_chilling @nikitascorner 45
then()
run()
evaluate()
Passes
Function
Return...
Example
@akshaymathu @sid_chilling @nikitascorner 46
var casper = require('casper').create();
casper.start('http://faceboo...
Demonstration
@akshaymathu @sid_chilling @nikitascorner 47
Specifying Window Size
var casper =
require('casper').create({
verbose:true,
logLevel:'info',
waitTimeout:10000,
viewportS...
Checking for DOM Element
casper.then(function(){
this.test.assertExists(
'#ssmi_getafan_sidebar_image',
'Sidebar image loa...
Clicking a Hyperlink
casper.then(function(){
this.test.assertExists('#ssmi_geta
fan_sidebar_image', 'Sidebar
image loaded....
Getting into iFrame
casper.then(function(){
this.test.assertExists('#ssmi_geta
fan_sidebar_image', 'Sidebar
image loaded.'...
Getting info from Web Page
this.evaluate(function(){
alert("Cookies are:" +
document.cookie);
});
});
@akshaymathu @sid_ch...
Waiting for Changing DOM
casper.waitForSelector(
'#coupon_area > span',
function() {
this.test.assertTextExists('Tha
nk yo...
Reporting Results
casper.run(function(){
require('utils').dump(
casper.test.getFailures());
require('utils').dump(
casper....
Result Format
<testsuite>
<testcase classname="samples" name="Get-a-Fan App Sidebar loaded." time="39.647">
</testcase>
<t...
Do with CasperJS
• Test webpages
– Report results in X-unit XML format
– Integrate with Continuous Integration tool like
J...
57@akshaymathu @sid_chilling @nikitascorner
Summary
• Nature of web apps is changing
– Javascript is becoming more and more powerful
– Dynamism has come to browser
• ...
Thanks
59
@akshaymathu @sid_chilling @nikitascorner
@akshaymathu @sid_chilling @nikitascorner
Upcoming SlideShare
Loading in...5
×

Testing Single Page Webapp

2,937

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,937
On Slideshare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Testing Single Page Webapp

  1. 1. Testing Single-page Web App Akshay Mathur Siddharth Saha Nikita Mundhada
  2. 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. 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. 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. 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. 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. 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. 8. Traditional Web Apps Dynamic on Server
  9. 9. The Evolution of Web 9 @akshaymathu @sid_chilling @nikitascorner
  10. 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. 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. 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. 13. Modern Apps Dynamic on Client
  14. 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. 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. 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. 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. 18@akshaymathu @sid_chilling @nikitascorner
  19. 19. Javascript Runtime Environment Outside the Brower
  20. 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. 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. 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. 23. Testing Tools
  24. 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. 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. 26@akshaymathu @sid_chilling @nikitascorner
  27. 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. 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. 29. Testing with Browser UI Splinter Demonstration and Code Siddharth Saha
  30. 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. 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. 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. 33. @akshaymathu @sid_chilling @nikitascorner 33
  34. 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. 35. Navigation browser.visit( „http://shopsocially.com‟ ) browser.back() browser.forward() @akshaymathu @sid_chilling @nikitascorner 35
  36. 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. 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. 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. 39. Executing Javascript browser.execute_script( “$(„body‟).css(„bgcolor‟, „#ccc‟); $(„#some_el‟).hide();” ) 39@akshaymathu @sid_chilling @nikitascorner
  40. 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. 41@akshaymathu @sid_chilling @nikitascorner
  42. 42. Testing without Browser UI CasperJS Demonstration and Code Nikita Mudada
  43. 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. 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. 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. 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. 47. Demonstration @akshaymathu @sid_chilling @nikitascorner 47
  48. 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. 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. 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. 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. 52. Getting info from Web Page this.evaluate(function(){ alert("Cookies are:" + document.cookie); }); }); @akshaymathu @sid_chilling @nikitascorner 52
  53. 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. 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. 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. 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. 57@akshaymathu @sid_chilling @nikitascorner
  58. 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. 59. Thanks 59 @akshaymathu @sid_chilling @nikitascorner @akshaymathu @sid_chilling @nikitascorner
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×