Cross browser Testing on Mobile Devices

Financial Services | the way we see it .

Cross Browser Testing on Mobile

Devices

Author(s) Vivek Sinha, Manager (Lead Mobile Testing COE)

Arun Jutur, Consultant (Mobile Testing COE)

Table of Contents

1.

Abstract 1

2.

Introduction 2

3.

Importance of Cross Browser Testing 3

4.

Definitions 4

4.1. Mobile Browser 4

4.2. Mobile Browser Compatibility 4

4.3. Cross Browser Compatibility 4

5.

Checklists 6

6.

Approach 7

7.

Tools & Solutions 9

8.

Reports 11

9.

Conclusion 12

Bibliography 13

Financial Services | the way we see it

Cross Brow ser Testing on Mobile Devices 1

Copy right © 2014 Capgemini Financial Serv ices. All rights reserv ed.

1. Abstract

Mobile devices have changed our world. As per a survey from Harris

interactive, 85 % of the Customer wants their mobile experience to be

better than desktop or Laptop.

Mobile is becoming a critical channel to present various things in front

of the customers. The decision that needs to be taken is to go with

information via an app route or use mobile browser as the channel.

Both of these have their own set of positives and negatives, but because

of the nature of these apps and cross platform combinations, it looks

more likely that web applications would be the way forward. With web

applications, comes the challenge around using mobile browsers and

testing the mobile application on these.

This paper discusses about Cross Browser testing on Mobile Devices,

and the challenges faced while testing across various mobile browsers on

different Mobile Platform combinations.

The ultimate goal is to deliver a consistent experience to users with

increased user satisfaction on a variety of devices and browsers.




2. Introduction

Mobile ecosystem is dynamic , is growing and the world is following it

like crazy — constantly changing to keep pace with the evolution of

technology and as these changes happen Innovative thinkers ,Developers

and Testers are under immense pressure to keep up with the pace and

produce applications that are great to use, popular and make money as

well.

Traditional Testing emphasizes on the program to find out if Software &

Hardware correctly performs the needed business functions and does not

malfunction under certain conditions, however testing the applications

on multiple browsers is a challenging task which requires good

understanding of the mobile browser working, market landscape, Mobile

platform configurations as well as technical limitations of the Mobile

Browsers.




3. Importance of Cross Browser Testing

Cross-browser testing is the process of comparing and validating website

functionality and styles across multiple browser platforms, operating

systems, and mobile devices to uncover any potential discrepancies.

One of the main aspects of cross-browser testing is to keep in mind that

CSS styles render differently across browsers/browser versions,

especially in terms of what is supported and what is not.




4. Definitions

4.1. Mobile Browser

A mobile browser is one that is optimised for the small display screen

and limited resource, also called as microbrowser, minibrowser, or

wireless internet browser (WIB).Mobile browsers connect to the Internet

through a cellular network or a wireless LAN (local area network).

Some mobile browsers can display regular HTML sites, while others can

only display websites that have been specially formatted for mobile

browsers. The first mobile browser was Apple's Net Hopper, which was

released in 1996 for PDAs.

4.2. Mobile Browser Compatibility

Mobile Browser compatibility testing is process by which we test user

experience for a Mobile website. Basically this validation process

ensures that users have the same visual experience irrespective of the

type of browsers through which they view the mobile web application.

In terms of functionality, look and feel, the application must behave and

respond the same way across different mobile browsers.

4.3. Cross Browser Compatibility

The term Cross Browser refers to the ability for a website, web

application or a HTML construct to support all the web and Mobile

browsers. It is a support that allows a mobile website to be properly

rendered by all the browsers. The unique challenge of achieving this

goal lies in the nature of the medium itself. Basically, Browser

Compatibility Testing can be verified for the following areas, Page

Layout, Navigation, Colour & Graphics, Multimedia (Audio & Video),

Content Presentation, Functionality and Accessibility.

Exhibit 1: Challenges and Issues in Mobile Cross Browser Testing




As known it is not easy to test mobile web application on all the

available browsers in the market because of complexity and hence the

time and cost of testing a mobile website is directly proportional to the

number of browsers on which the application is going to be tested.

C= (B* O + A) * T; Where,

C=Complexity, A=Third party components, B=Different Browsers used

for AUT

O= Number of OS, T= Types of testing Performed

An Idea regarding the complexity of Cross Browser testing can be

gauged from below permutations and combinations:

Mobile Browsers – Internet Explorer, Opera, Firefox, Safari, Default

Browsers

Mobile Platforms – Windows, Android, iOS, BlackBerry etc.

Screen resolutions – From 768X1024 pixels to 2560x1600 pixels

Types of Testing – Functional, UI, Usability

Third Party Components- Social Integrations, Payment Gateways




5. Checklists

Exhibit 2: Features

Page validation : This is checked by enabling and disabling JavaScript of Browser

Font Size Validation : Because some browser overwrite this with their default or if that

font is not available on system

Image alignment: This is ensure the proper alignment of Image on the page

Page Alignment should be tested (Centre, LHS and RHS)

Control Alignment: Alignment of controls specially

1) Bullets 2) Radio Button 3) Check Box should be check on various Browser

Zoom in & Zoom out: Page Zoom In and Out should be tested properly

Verification of information submitted to database: If there are forms that interact with

the database, It should be tested/verified on priority, should be verified that

information is getting saved correctly in database.

HTML video format: Video format should be verified because all browsers do not

support all formats.

Text Alignment : should be verified specially in drop down

Flash content: should be tested




6. Approach

Goal:

The goal of Mobile browser compatibility testing is to ensure that the

site renders without error and with required functionality on the target

mobile web browsers. Some minor rendering differences are expected

from browser to browser, or within different versions of the same

browser. Also ensure all the design and functionality is working fine.

Analysis and Prioritisation:

One of the most important aspects of the Cross browser testing on

Mobile Browsers is to identify the Browser and Platform combinations

that would be used for Application testing. To understand and identify

this, a thorough analysis is needed for the same. The analysis should

include factors such as Target Market, Popular devices, Network

configurations etc. Once the identification of the combination has been

done, the next step involves the prioritisation of these combinations. Test

coverage across these combinations should be in accordance with the

prioritisation values.

In addition to this, there should also be an analysis of the important

aspects that needs to be verified and are critical for the Mobile Web

Application. This analysis is required to make sure critical issues are

solved sooner than irrelevant bugs that might take more time to be fixed.

Time to start mobile cross browser testing:

As a best practice, it would be useful to choose one browser/platform as

per the analysis and make sure that all the testing is done on it during the

development process. This browser should be the same as the one used

by the development team. It is recommended that browser compatibility

testing stage be executed at the end of the development process for two

reasons:

1. Most of the development process will be finished, including resolved

bugs. Consequently, there’s a major probability that some issues will

not be related to a specific browser but to the site itself.

2. Work schedule is better structured. It will be easier to focus on

testing a mobile website using Chrome for Android OS for 5 hours

and then Safari browser for another 5 hours, than to focus on testing

a single functionality in each platform every time a new module is

released.




Important points to be considered while mobile cross browser

testing:

There are many elements that will not change across browsers (like

images size, fonts colour, texts padding and pages background).

However, there are many other elements that will need more attention:

1. Font size and font style: some browsers overwrite these properties

2. Special characters with HTML character encoding

3. Controls alignment: bullets, radio buttons and checkboxes might not

be correctly aligned.

4. Information submitted to the database: if there are forms that interact

with the database, it is necessary to verify that the information is

correctly stored.

5. Media format: Users must be aware that depending on the player or

plug-in used, not all the browsers are able to play all the existing

media formats. This is an issue that should be taken care of by the

development team and the QA team.

6. Text alignment: some dropdown items will look good in Internet

Explorer while in Safari they might appear too close to the upper

margin.

Browser and Platform statistics:

The browser and platform selection should be specified during the

Requirements gathering process, this way the whole development team,

QA team, and client will be aware of which browsers will be used from

the beginning of the software development process. This is the time in

the process where you should do research on the most used browsers in

order to make a suggestion on which ones should be tested.




7. Tools & Solutions

Testing on real Devices:

Testing on real devices is an efficient way to carry out testing across a

variety of browsers and devices.

Advantages:

1. Very reliable method of testing

2. Execution can be started at short notice

Disadvantages:

1. Costly

2. Time consuming

Synchronised Testing:

Synchronised testing is an efficient way to automatically perform the

same action across a variety of browsers and devices simultaneously.

There are tools available in the market that provides cost effective

solutions for the same. Some of the solutions are mentioned below and

this is by no means a comprehensive list.

Ghostlab

Adobe Edge Inspect CC

Advantages & Disadvantages of Ghostlab:

Advantages:

1. Can be used in any browser on any platform, no additional software

required.

2. Setting up multiple entries for multiple test sites saves time.

3. Zero problems with external web fonts loading

4. Synchronised scrolling cuts down on swiping fatigue on multiple

devices.

Disadvantages:

1. Inexplicable phantom scrolling from time to time

2. Mouse clicks on JavaScript events don’t fire the same event on other

browsers.

3. Devices sometime going asleep can be annoying




Advantages & Disadvantage of Adobe Edge Inspect CC:

Advantages:

1. Fast, (mostly) accurate rendering across devices

2. Screenshots can be taken on each device and if required can be sent

for analysis

3. Very easy to setup and perform the test execution

Disadvantages:

1. Works only on chrome browser along with plug-in for managing

devices, debugging, and manual reloads etc.

2. Currently supports only Android and iOS devices. Meaning, no

testing on other browsers, platforms, Microsoft Surface, etc.

3. Sometimes have problems with the native browsers on iOS devices

4. Is little bit on the costly side and a licensed version is needed for the

same

Cloud based Cross-browser Testing Tools:

Cloud based services such as BrowserStack and

http://crossbrowsertesting.com/ offer the ability to test your site across a

massive collection of mobile OS and browser combinations.

Simulators & Emulators:

In the absence of physical devices, emulators/simulators are great

options. Example:

Android Emulator

iOS Simulator

http://crossbrowsertesting.com/




8. Reports

Testing status for browser compatibility with the following format of

tables should be maintained:

Sample Report 1: Browser against Mobile Website pages

Exhibit 3: Sample Report 1

Browser/Mobile

Website pages Safari Chrome Internet Explorer

Page 1

Page 2

Page 3

Page 4

Sample Report 2: Browser against OS

Exhibit 4: Sample Report 2

Browser/OS Safari Chrome Internet Explorer

Android

iOS

Windows

BlackBerry




9. Conclusion

As the technology is changing rapidly, the application designers believe

to give the best features and functionalities to the applications. But most

of the applications are not stand alone. Users have different platforms

and browsers. Designers cannot assume that their application will run

fine and display and work for all the browsers without cross browser

testing. Hence to avoid loss of business and reputation it is very

important to pay attention to cross browser issues. In this paper we have

pointed out a few important concerns regarding this. As if we know the

problem, it is easy to plan out the areas that should be cross verified.

Indeed it is hard to find out compatibility of your application for each

existing browser. Hence Mobile cross browser testing is indeed a good

way in this respect. This is an important way of maximising revenues

and increasing Customer satisfaction.




Bibliography

1. Capgemini's World Quality report 2013 and 2014

2. Harris Interactive Survey

3. wikipedia.org

4. Ghostlab (http://vanamco.com/ghostlab/)

5. Adobe Edge Inspect (https://creative.adobe.com/products/inspect)

6. Browserstack (www.browserstack.com/)

7. Crossbrowsertesting.com

http://vanamco.com/ghostlab/

https://creative.adobe.com/products/inspect

http://www.browserstack.com/

www.capgemini.com/<fsdomain>

About the Authors

Vivek Sinha, Manager (Lead Mobile Testing COE): Vivek leads Mobile testing COE

within Capgemini Financial Services and he has more than 13 years of experience in

the field of Telecom and Mobile Testing.

Arun Jutur, Consultant (Mobile Testing COE): Arun is a member of Mobile Testing

COE within Capgemini Financial Services and he has more than 4 years of experience

in the area of Mobile application testing.

About Capgemini

With more than 130,000 people in 44 countries, Capgemini is one of the world’s foremost providers of

consulting, technology and outsourcing services. The Group reported 2013 global revenues of EUR

10.1 billion.

Together with its clients, Capgemini creates and delivers business and technology solutions that fit

their needs and drive the results they want.

A deeply multicultural organisation, Capgemini has developed its own way of working, the

Collaborative Business Experience™, and draws on Rightshore®, its worldwide delivery model

Learn more about us at www.capgemini.com For

more information, contact us at: [email protected] or

visit: www.capgemini.com/financialservices