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 ofCross Browser testing can be
gauged from belowpermutations 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.
HTMLvideo format: Video format should be verified because all browsers do not
support allformats.
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 Safaribrowser 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 crossbrowser
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

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

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: financialservices@capgemini.com or

Cross browser Testing on Mobile Devices

More Related Content

What's hot (20)

Similar to Cross browser Testing on Mobile Devices (20)

More from BabuDevanandam (15)

Recently uploaded (20)

Cross browser Testing on Mobile Devices