Automation Testing Approach for Responsive Web Design By prateek yadav nirmal jacob

1. PRATEEK YADAV
INFOSYS LTD Pune
AUTOMATION TESTING APPROACH
FOR RESPONSIVE WEB DESIGN
By PrateekYadav, NirmalPaul Jacob
Abstract
Now a days, most of the websitesare beingdeveloped asResponsive
webdesign(RWD) websites.Testingthe same setof test cases on all
the available devicesinthe market today ispractically impossible due
to the high cost factor, availabilityof all devicesand amount of effort
requiredto test on all these devices. ThisPaper talks about using
multiple toolsavailable inthe market currently for testingRWD
website and our experiencesrelatedtothem

2. Context
In the market today, there
are a large numberof
deviceswithdifferent
resolutionsand screensizes.
A tough competitionexists
whereineveryclientwants
theirapplication web pages
to run on all these devices.
The RWD web pageslayout
will adjustbased on the
screen size and PPI of the
device.
The main challenge for
testingRWD web pages is
that the automation script
generatedfor one browser
one platformwill onlycover
the functionality,behavior
and workflow.But the same
automation script running on
differentdevicesignoresthe
lookand feel,Layoutand UI
alignment.
We have focusedmajorly on
screenshotanalysisand pixel
by pixel comparison.We also
have capabilityto execute
parallel testcases for RWD
website across multiple
deviceshavingmultiple
resolutionsinone go along
withcontinuous integration
using SeleniumandJenkins.

3. Brief onRWD Testing
RWD is the multi device
strategy in whichwe develop
one html page which can be
renderedin all the available
device form factors.
RWD Testing focusseson
testingthe same web page on
differentOS,platform and
browser combinationwith
differentdeviceshaving
differentresolutionsand
screen size.
ChallengesTestingRWD
 Lack of proper Automation
Framework, so if there is
slightchange in the
requirementrequireshuge
manual effortand time.
 Targeting the scenarios
which can be automated
and which can’t be
automated.
 Text field, Button, frames
fittingthe screen.
 Font size,textand color is
consistentfor each type of
text.
 Image is losingitscontent
on differentscreen
resolution
 Response time of website
in desktopvs mobile
 Physical size of the screen
 Screen Density(Dots per
inch) – dpi - quantityof
pixelswithinaphysical
area of the screen
 Resolution – number of
physical pixelsona screen
– more important when
you developforone kind
of screen.
 Orientation – landscape
/portrait – rotation
 Density independence:
Allowsto preserve the
physical size of an object
(i.e.a button) when
presentedon screensthat
differindensity.
Brief onRWD TestingTools/ Frameworks/Plugins
Integration
with
Selenium+
Jenkins
Galen
Framework
Ghost
Inspector
Tool
Wraith
Tool
Huxley
Tool
Browsera
Tool

4. PRATEEK YADAV
Browsera
Tests the layoutdifferencesandscripting error in webapplication. License is requiredand
integrationwithbuildtools is not possible.We have to provide URL and selectthe browser
which we want to act as baseline. Testingisdone across wide variety of browser combinations
withreference to baseline browser.Compares the DOM structure and testreport is generated
withscreenshot.
Galen Framework
Galen is an open source tool for layout testing.Galen launchesthe browser and resizesthe
browser to requiredsize and tests the web page according to the specifications.Galenplugin
can be addedto existingseleniumscripts.Ituses seleniumforinteractingwith elementsonthe
page and getting theirlocationsand dimensions.Galencan also be addedto seleniumgridand
RWD testingcan be done parallel on multiple devices,multipleresolutionandsize.Thissaves
huge amount of testingtime and lesstestingresource will be required.End to end Jenkins
Integrationcan be done.

5. PRATEEK YADAV
Ghost Inspector
This is a record and playback tool for webapplication testing. It is also usedfor UI alignment
testingby comparing the screenshotsPixel by Pixel.We can set the tolerance level from0% to
90%, which indicateshow much amount of change is allowable inscreen shot. Browser to
Browser screenshot comparison is done.We can notifytestingteam by configuringthe email
ids.We can export the recordedscript in SeleniumHTML format. Exported Seleniumscriptcan
be usedto our existingseleniumframeworkand endto endintegrationwith Jenkinscan be
done.This tool can be integratedwith others toolslike Travis chat, Git Hub, OpsGenie, circleCi.
Huxley
Huxleyis a test-like systemforcatching visual defects inWeb applications.Huxleyruns in two
modesRecord mode and playback mode.Using seleniumwebdriverwe can record our actions
on browser. In playback mode it uses seleniumwebdriver,takesscreenshotand compares with
original screenshot.End to end integration withJenkinscan be done.
Wraith
This is a screenshotcomparison tool developedbyBBC news.Wraith uses screenshotcreated in
a differentenvironment tocompare and then creates a screenshothighlightingdifferenceswith
the affectedarea in blue color. The output file containsthe percentage of pixelsthat have

6. changed. This tool has capabilityto integrate with Selenium. Endto End integrationwith
Jenkinscan be done.
Comparisonof Tools/Frameworks
Assessment Criteria
Galen
Framework
Ghost Inspector
Tool
Huxley Wraith Tool Browsera Tool
Licensing Open Source Licensed Open Source Open Source Licensed
Build and Deployment
Integration
TypesofBrowser supported
Learnabilityand Ease ofuse
Language Supported Java Record and Play Python Ruby Record and play
APItestingSupport No Yes No No No
Integration withExisting
Selenium framework&Jenkins
CI
Yes Yes Yes Yes No
Reportingand Analysis

7. Case Study
Context
We had an RWD website whichneededto be testedacross wide variety of browser
combinations.The complexityincreasedwhenthe page designchanges for variousscreen sizes
and orientations.All the new featurestest cases coveringthe requirementsfora particular
release,includingpositive,negative scenariosneedtobe testedacross multiple browserson
multiple devices.All the regressionfeaturestestcases coveringthe End to End scenarios of all
previousrelease,includingpositive,negativescenariosalsoneedto be executedonmultiple
browsers on multiple deviceshavingdifferentresolutions. EachRelease will have some new
requirementsbecause of whichthe regressiontest suite would needto be executedagain and
again.
Solution
We had an existingseleniumframeworkintegratedwithJenkins.We addedthe Galen
framework to our existingseleniumframework.Throughthe use of seleniumgrid we testedUI
across wide varietyof browser combinationson differentmachines.Through Jenkinswe are
triggeringthe test case execution.
Ghost Inspectorcan also be usedto generate script for webapplicationtesting.The recorded
script can be exportedas SeleniumHTML format. We can add our script to our existing
Seleniumframework withJenkins CI.Similarly Wraith, Huxleycan be used.
Technologies
 OS Platforms: iOS/Android
 Devices:iPhone/iPad/SamsungTab
 Tools: Selenium,Galen framework,Ghost Inspector Tool, Jenkins CI,SeleniumGrid
framework,Maven
BusinessImpact
Savingsaccounted in termsof Automation,RegressionTest Suite,Process improvements,
DevelopmentReusable artifacts, and Performance tuning and value addition.

8. About the Authors
Prateek Yadav
Technology Analyst
Prateekis Technology Analystwith Infosys.He has over 5 years of experience of manual
and Automation testing tools. His interest and expertise include exploring open source
tools available in market.
Nirmal Paul Jacob
Technology Architect
Nirmal is Technology Architect with Infosys. He has over 9 years of experience. He has
beenworkingon mobile applicationdevelopmentprojectsoverthe last5 yearsand prior
to that in web development projects. He has special interest in automation technology
used in mobile development and QA