testing single page webapp

Testing Single-page Web App

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

@akshaymathu @sid_chilling @nikitascorner

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


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)


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


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


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

Traditional Web Apps

Dynamic on Server

The Evolution of Web

Static PagesInput FormsDynamic Pages

Interactive Apps

Rich Internet Apps

9@akshaymathu @sid_chilling @nikitascorner


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


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

Modern Apps

Dynamic on Client


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


Traditional Testing Tools Fail

• Changed HTML DOM is not available to the tool

• xPaths of existing elements change


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

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 and web-framework can be

written using NodeJS• Even-driven and Asynchronous programming– High performance– Low response time


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


Headless Browsers

• Phantom JS– Headless browser implementing Webkit• Similar to Chrome, Safari

• Slimer JS– Upcoming headless browser implementing Gecko• Similar to Firefox

Testing Tools


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


Splinter

• Open source tool for testing web applications using Python

• An abstraction layer on top of existing browser automation tools:– Selenium– PhantomJS – Zope


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


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

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 automation tools:– Selenium– PhantomJS – Zope


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


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


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


Finding DOM Element

browser.find_by_id(‘my_id’)

browser.find_by_name(‘my_name’)

browser.find_by_tag(‘h1’)


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


Interacting with Form Elements

browser.fill(‘query’, ‘Siddharth’)

browser.choose(‘some-radio’, ‘radio-value’)

browser.select(‘my-dropdown’, ‘my-fav-value’)


Executing Javascript

browser.execute_script(

“$(‘body’).css(‘bgcolor’, ‘#ccc’);\

$(‘#some_el’).hide();”

)


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

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 defining a full navigation scenario

• Provides syntactic sugar for common tasks:– Filling Forms– Clicking and following links– Logging events– Finding DOM elements– …


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


Skeleton of a CasperJS program

start()

then()

run()

create()

evaluate()

Passes Function

Returns Value

Page DOM SandboxCasperJS Sandbox

ExecutesFunction


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();


Demonstration


Specifying Window Size

var casper = require('casper').create({

verbose:true,logLevel:'info',waitTimeout:10000,viewportSize:

{width: 900, height:700}

});


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");


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");


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");


Getting info from Web Page

this.evaluate(function(){alert("Cookies are:" +

document.cookie);});

});


Waiting for Changing DOM

casper.waitForSelector('#coupon_area > span', function() { this.test.assertTextExists('Thank you!', 'Thank you message displayed correctly.');

});


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');

});


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>


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


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


Thanks

@akshaymathu @sid_chilling @nikitascorner

testing single page webapp

Technology

headless browser browser

testing dynamic dom

copy of html dom

dom events

browser introduction

data html

light use of javascript

portion of page