Testing Single Page Webapp


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
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.