Functional Test Automation Ad Builder

Responsive Web DesignDate : 15/11/2014Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web.

Good Morning Everyone!! Hope u had a good tea break..My name is Varuna. I here with my colleague KK will demonstrate through Responsive Web Design in Todays Session..

Lets have a quick Glance of agenda

1AgendaWhat is Responsive Web DesignWhy Responsive Web DesignMobile First DesignChallenges in TestingTools to TestDemo of Galen Framework

Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web.

2Web

How many of you believe that web is only desktop computers..

No naaThen wat is web..

3Online Shopping

How many of you love shopping online.. Saving items in your cart from your desktop..Then deciding after comparing different sitesSo finally once you decide and you make your mind to buy that product and your lazy to open system..you have mobile in your hand and you will expect same site in your cell phone..Now u figured out that website is not available in cellphone.. if by any chance it is available you havedifferentURL..Quite frustrating by this time late at night and u dropped the idea of buying product..So in place of being a customer of the product from site you landed up as a visitor of the site..

So in today's talk we will make sure u get ur favorite selected product happily.. without ur patience been tested..

So Lets figure out how we can convert visitors into customers.

4

Background ::::::::RWD : Beforesmart phonesand tablets came into marketweb designerwere mostly focused on designing which gives an optimal performanceondifferentbrowser and operating system.. Same was with testing of website QA's were mostly focused on the performanceon different browser and operating system.. the test automation focus also lies in this area whether to use css selectors or an xpath for running against an IE...However now interacting with websites onsmart phonesand tables is not the same as desktop computer..Click is moved to Touch Screen size ,Factors such as Click versus Touch, Screen-size, Pixel-resolution, support for Adobes Flash technology, optimized markup and many more have become crucial while creating websites with Responsive Design

5What is Responsive Web Design

Responsive Web Design (RWD) is an approach of laying-out and designing a website such that it website provides an optimal viewing experience ease of reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computer monitors to mobile phones).

One url +Single Content +One Code + CSS36Why Responsive Web Design

Save Time and Money :UX ::::Visitors to CustomersAhead with CompetitorsLow Maintanence CostSEOSearch Engine PreferesCMSROI

7

Now we know what RWD is and what its need is..What would be approach to design rwd8Mobile First Design

mobile-first responsive web design comes down to usingProgressive Enhancementas a foundation for web strategy and design. Designing with progressive enhancement involves smartly adding layers of enhancements to a strong foundation in order to deliver an accessible(and hopefully optimized)experience to all.

Fluid gridsthat ebb and flow with a devices screen sizeFlexible images and mediathat keep content intact on any resolutionMedia queriesallowing designs to adapt by establishing dimension breakpoints

9Why Mobile First Design

Content FocusedPerformanceLoading Time10Mobile-First Responsive Web Design

Out Of Date Legacy Browser/Devices..Progressive Enhancement.. CSS1 and CSS2 Media Query CSSHow many of you want to support the user who are still using Nokia Mobiles11Desktop First CSS Design

Desktop.breadcrumb-link-text { display: block; }Mobile@media (max-width: 480px) { .breadcrumb-link-text { display: none; } }

DisAdvantages : Battery/CPU consumption because of more work. Show first, then hide.12Mobile First CSS Design

Mobile.breadcrumb-link-text { display: none; }

Desktop@media (min-width: 480px) { .breadcrumb-link-text { display: block; }}

Advantages: We're doing more work, but we're doing it on powerful desktops/laptops etc. 13Challenges When Testing A Responsive WebsiteSelecting set of devices for testRepetitive Iterative testing (Automation)All expected behavior cannot be documentedUser Experience3.. How many of you look tickets in mobile when u just reach the airport!!14Tools for Testing RWDRWD BookmarkletResponsive Web Design TesterAdd on with ChromeResponsive Web Design CheckerBookmark in ChromeRWD testerF12http://responsivedesignchecker.com/

15

Supports both Layout and Functional TestingLayout testing seemed always a complex task. Galen Framework offers a simple solution: test location of objects relatively to each other on page16Why Galen Framework

1.Galen Framework is designed with responsiveness in mind. It is easy to set up a test for different browser sizes. Galen just opens a browser, resizes it to a defined size and then tests the page according to specifications2. Galen Framework runs well in Selenium Grid. You can set up your tests to run in a cloud likeSauce LabsorBrowserStackso that you can even test your responsive websites on different mobile devices. Galen can run multiple tests in parallel which is also a nice time saver.3, Detailed HTML Report4. Image Comparison

Last but not least execute tests in Basic Syntax, Java Script Tests, JAVA API17Galen Specs Language*.specObject DefinitionTaggingSpec References (near, below, inside)AlignedHeight and WidthColor Scheme Image

18

The first thing we do is to find the object locator!!!

As you see here we have header with css locatorMain-section with id and navigation with xpath

Once your done with Object Locators you can start writing your objects

Color Scheme :To verify color distribution on object area. Galen takes a picture and then calculates the objects area color spectrum so later you can verify the usage for specific colors.19Run Tests Using Galengalen test testsuitename.test htmlreport reports

21