Automation Testing Approach for Responsive Web Design
1 like3,736 views
This document discusses approaches for automating testing of responsive web designs (RWD). RWD websites adjust layout based on screen size, making it challenging to test across devices through traditional automation. The document evaluates several tools for RWD testing, including Galen, Ghost Inspector, Wraith, and Huxley. It presents a case study where an organization used Selenium, Galen, and Ghost Inspector integrated with Jenkins to automate testing across browsers and devices in parallel. The approach helped reduce effort, automate regression testing, and improve process and reusability.
Automation Testing Approach for Responsive Web Design
- 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