Testing Single Page Webapp
-
Upload
akshay-mathur -
Category
Technology
-
view
112 -
download
2
description
Transcript of Testing Single Page Webapp
![Page 1: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/1.jpg)
Testing Single-page Web App
Akshay MathurSiddharth Saha
Nikita Mundhada
![Page 2: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/2.jpg)
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
@akshaymathu @sid_chilling @nikitascorner
![Page 3: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/3.jpg)
@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?
![Page 4: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/4.jpg)
@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)
![Page 5: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/5.jpg)
@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
![Page 6: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/6.jpg)
@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
![Page 7: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/7.jpg)
@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
![Page 8: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/8.jpg)
Traditional Web Apps
Dynamic on Server
![Page 9: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/9.jpg)
The Evolution of Web
Static PagesInput FormsDynamic Pages
Interactive Apps
Rich Internet Apps
9@akshaymathu @sid_chilling @nikitascorner
![Page 10: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/10.jpg)
@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
![Page 11: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/11.jpg)
@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
![Page 12: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/12.jpg)
@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
![Page 13: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/13.jpg)
Modern Apps
Dynamic on Client
![Page 14: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/14.jpg)
@akshaymathu @sid_chilling @nikitascorner 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
![Page 15: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/15.jpg)
@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.
![Page 16: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/16.jpg)
@akshaymathu @sid_chilling @nikitascorner 16
Traditional Testing Tools Fail
• Changed HTML DOM is not available to the tool
• xPaths of existing elements change
![Page 17: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/17.jpg)
@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
![Page 18: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/18.jpg)
@akshaymathu @sid_chilling @nikitascorner 18
![Page 19: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/19.jpg)
Javascript Runtime Environment
Outside the Brower
![Page 20: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/20.jpg)
@akshaymathu @sid_chilling @nikitascorner 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
![Page 21: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/21.jpg)
@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
![Page 22: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/22.jpg)
@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
![Page 23: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/23.jpg)
Testing Tools
![Page 24: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/24.jpg)
@akshaymathu @sid_chilling @nikitascorner 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– …
![Page 25: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/25.jpg)
@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
![Page 26: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/26.jpg)
@akshaymathu @sid_chilling @nikitascorner 26
![Page 27: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/27.jpg)
@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
![Page 28: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/28.jpg)
@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
![Page 29: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/29.jpg)
Testing with Browser UI
Splinter Demonstration and Code
Siddharth Saha
![Page 30: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/30.jpg)
@akshaymathu @sid_chilling @nikitascorner 30
Splinter
• Open source tool for testing web applications using Python
• An abstraction layer on top of existing browser automation tools:– Selenium– PhantomJS – Zope
![Page 31: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/31.jpg)
@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
![Page 32: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/32.jpg)
@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
![Page 33: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/33.jpg)
@akshaymathu @sid_chilling @nikitascorner 33
![Page 34: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/34.jpg)
@akshaymathu @sid_chilling @nikitascorner 34
Choosing Browser
from splinter import Browser
browser = Browser(‘chrome’)
B = Browser(user_agent = ‘Mozilla/5.0 (iPhone; U;)’)
![Page 35: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/35.jpg)
@akshaymathu @sid_chilling @nikitascorner 35
Navigation
browser.visit(‘http://shopsocially.com’)
browser.back()
browser.forward()
![Page 36: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/36.jpg)
@akshaymathu @sid_chilling @nikitascorner 36
Finding DOM Element
browser.find_by_id(‘my_id’)
browser.find_by_name(‘my_name’)
browser.find_by_tag(‘h1’)
![Page 37: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/37.jpg)
@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()
![Page 38: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/38.jpg)
@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’)
![Page 39: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/39.jpg)
@akshaymathu @sid_chilling @nikitascorner 39
Executing Javascript
browser.execute_script(
“$(‘body’).css(‘bgcolor’, ‘#ccc’);\
$(‘#some_el’).hide();”
)
![Page 40: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/40.jpg)
@akshaymathu @sid_chilling @nikitascorner 40
Dealing with iFrames
with browser.get_iframe(‘iframe_id’) as iframe:
iframe.fill(‘query’, ‘sid’)
• iFrame is another browser object– Supports all the functionality of a browser
![Page 41: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/41.jpg)
@akshaymathu @sid_chilling @nikitascorner 41
![Page 42: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/42.jpg)
Testing without Browser UI
CasperJS Demonstration and Code
Nikita Mudada
![Page 43: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/43.jpg)
@akshaymathu @sid_chilling @nikitascorner 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– …
![Page 44: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/44.jpg)
@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
![Page 45: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/45.jpg)
@akshaymathu @sid_chilling @nikitascorner 45
Skeleton of a CasperJS program
start()
then()
run()
create()
evaluate()
Passes Function
Returns Value
Page DOM SandboxCasperJS Sandbox
ExecutesFunction
![Page 46: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/46.jpg)
@akshaymathu @sid_chilling @nikitascorner 46
Example 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();
![Page 47: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/47.jpg)
@akshaymathu @sid_chilling @nikitascorner 47
Demonstration
![Page 48: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/48.jpg)
@akshaymathu @sid_chilling @nikitascorner 48
Specifying Window Size
var casper = require('casper').create({
verbose:true,logLevel:'info',waitTimeout:10000,viewportSize:
{width: 900, height:700}
});
![Page 49: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/49.jpg)
@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");
![Page 50: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/50.jpg)
@akshaymathu @sid_chilling @nikitascorner 50
Clicking a Hyperlink
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");
![Page 51: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/51.jpg)
@akshaymathu @sid_chilling @nikitascorner 51
Getting into iFrame
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");
![Page 52: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/52.jpg)
@akshaymathu @sid_chilling @nikitascorner 52
Getting info from Web Page
this.evaluate(function(){alert("Cookies are:" +
document.cookie);});
});
![Page 53: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/53.jpg)
@akshaymathu @sid_chilling @nikitascorner 53
Waiting for Changing DOM
casper.waitForSelector('#coupon_area > span', function() { this.test.assertTextExists('Thank you!', 'Thank you message displayed correctly.');
});
![Page 54: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/54.jpg)
@akshaymathu @sid_chilling @nikitascorner 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');
});
![Page 55: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/55.jpg)
@akshaymathu @sid_chilling @nikitascorner 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>
![Page 56: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/56.jpg)
@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
![Page 57: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/57.jpg)
@akshaymathu @sid_chilling @nikitascorner 57
![Page 58: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/58.jpg)
@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
![Page 59: Testing Single Page Webapp](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c684884a79598d528b46ff/html5/thumbnails/59.jpg)
@akshaymathu @sid_chilling @nikitascorner 59
Thanks
@akshaymathu @sid_chilling @nikitascorner