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
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
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
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
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
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
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
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
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
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
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