Over a million developers have joined DZone.
Refcard #211

Mobile Web Application Testing

Making Better Web Apps for Mobile Platforms

Written by

Covers many tools that will help to simplify the complexities of the mobile testing process, saving you time and money.

Free PDF
DOWNLOAD
Section 1

Mobile Validation

General Validation

Mobile web applications are built with the same foundational web technologies as desktop web applications. Therefore, any validation for web applications also applies to the mobile web. The World Wide Web Consortium (W3C) has several validators available at:
http://www.w3.org/QA/Tools/ These validators include: 1) the HTML Validator, to check the markup of webpages, 2) the Link Checker, to find and report broken links, and 3) the CSS Validator, to check the style sheets and their conformance to the W3C standards.

mobileOK Checker

The W3C has standards and best practices in place for mobile webpages, which are in sync with the mobile browser specifications for rendering webpages. To check whether a mobile webpage conforms to the W3C best practices, use the mobileOK checker tool at: http://validator.w3.org/mobile/.

MobileOK Checker

The tool not only reports failures for the checks performed, but also reports details, linking back to the W3C recommendation. This can be a good starting point to understand the issue and develop a fix for it.

Section 2

Manual Testing in Mobile Browsers

Selecting Mobile Browsers For Testing

It is essential for mobile webpages to be tested on multiple mobile browsers, especially those browsers that the target audience would be using. Selecting which browsers to test your web application in can be a tough decision. One way to help you make this decision is by viewing analytics of your existing sites or browser market share statistics using a tool such as the one provided by: http://gs.statcounter.com

Selecting Mobile Browsers for Testing

The statistics can be further narrowed down to show statistics from a particular geographic region or time frame. As of February 2015, the two most popular mobile browsers globally are Chrome on Android and Safari on iPhone. The Android browser was recently replaced by Chrome in the Android OS but still has a significant market share, ranking as #3 as shown in the chart.

Testing On an Emulated Mobile Browser

Chrome Developer Tools

The Google Chrome browser provides mobile web development tools out of the box. The Chrome Dev Tools provide support for understanding, debugging and optimization of the web application and browser components.

To open Developer Tools on Chrome, select the hamburger menu  on the right and then select the More tools > Developer Tools menu option.

This will bring up the Chrome Dev Tools pane on the side of the browser window. To access the mobile emulation and debugging features, turn on the “device mode” by clicking on the small mobile button in the top left corner of the Dev Tools panel as shown in the figure below:

Chrome Developer Tools

When “device mode” is enabled, the browser viewport transforms to a device emulator, where the user is allowed to select from a set of devices with specific screen resolutions. Users can switch between different devices and see how the application would appear and behave in those browsers.

Testing Orientations

One of the most important things to test while using this view is to inspect the application in portrait and landscape mode. Clicking on the “Swap Dimensions” button can toggle this setting.

Testing Network Behavior

A mobile web app might not perform equally across different network settings. Being on a slow network can cause connection timeouts or timing issues in the application, making it fail or appear differently. Use the Network option to make the browser throttle the web app by simulating the different network conditions, from GPRS to Wi-Fi. You can also test the offline capabilities of your application through this feature.

Testing

Testing Media Queries

Media queries were introduced in CSS3 to allow the rendering of the application to be adaptive to different screen widths. Knowing the boundaries at which these CSS styles change in the application can be very helpful for testing how the webpage looks at these boundary values. You can choose devices that are across each boundary or manually slide the handlebar at the end of the mobile viewport to inspect the responsiveness of the app as the resolution changes. Queries targeting a maximum width are represented in blue, those with a range are shown in green, and those targeting a minimum width are represented in orange.

Testing Media Queries

Testing Custom Resolutions

The Chrome Dev Tools have the configurations for most popular phones, but not all phones. If you need to test for a custom resolution, you can create a new model by clicking “More overrides” on the top right and then selecting Emulation > Device in the secondary pane as shown below:

Testing Custom Resolutions

Testing Touch, GPS, and Accelerometer

If your webpage is interactive, and allows users to use touch gestures, you can select the “Emulate touch screen” option under the Sensors pane of the Emulation settings to enable this feature. You can perform the touch gestures by using a multi-touch track pad or your computer touch screen.

For testing map components or other features that rely on the phone’s location, you can emulate the geolocation coordinates by providing the latitude and longitude of the target location. The test coordinates can be found from a mapping application, like Google Maps. These are entered as numbers by using a negative sign for coordinates with degrees South or degrees West.

To test applications that make use of the phone’s accelerometer (such as games), you can enable the “Accelerometer” setting under the Sensors pane. This binds a 3D model of the phone, which is displayed in the emulated accelerometer settings to the right. Turning this model controls the virtual orientation and can be used effectively to test such applications.

Testing Touch, GPS, Accelerometer

Testing On a Real Mobile Browser with Remote Debugging

If you have a real device to test your webpage, then it might be challenging to control and inspect the page that is loaded on the mobile browser. To help in this scenario, Chrome Dev Tools provides Remote Debugging capabilities that connect the Desktop Chrome browser to any mobile browser that implements the remote debugging protocol. This setting can be loaded by selecting the hamburger menu  , then More tools > Inspect Devices; or by typing the URL chrome://inspect and then navigating to the Devices pane.

You also need to connect your phone to the computer and select the USB debugging option. On an Android phone, this is accessed by going to Settings > Developer Options and selecting the “USB debugging” option. If you can’t find the developer options setting, you will need to enable it on your phone.

Once USB debugging is enabled, and the phone is connected to the computer, Chrome will list your device, as well as any pages loaded in the mobile browser of that device. In the Devices pane, you can remotely open a new tab with a URL, or you can interact with already loaded pages.

USB debugging

Inspecting Webpages Loaded On the Mobile Device

You can click on the “Inspect” option under a webpage listed on the Inspect devices page to load the page into the Chrome Dev Tools. As you interact with the pages in the Dev Tools, you can select to see a screencast of the webpage on the computer by selecting the Screencast option  on the top right.

Inspecting Webpages

Testing Local Websites

To test webpages hosted locally on your computer and not accessible by a public IP or URL, you can select the port forwarding option to map the computer’s web server port to the mobile device. After this setting has been enabled, you can browse the webpage on your mobile device just as if it was hosted on the phone, using the URL http://localhost:[port]

Testing Local Websites

Section 3

Automated Testing in Mobile Browsers

Selenium Primer (in Python)

Selenium (also known as WebDriver) is a framework that allows writing automated scripts for web applications. The Selenium project provides libraries for multiple languages, including Java, Ruby, and Python. In this tutorial, we will be using Selenium’s Python bindings specifically to test mobile web apps.

Installing Selenium

The Selenium library for Python can be installed using the pip command:

$ pip install selenium

If you don’t have pip available on your system, install it by following the directions at https://pip.pypa.io/en/latest/ installing.html.

The Selenium library provides functions for performing various actions for testing. These range from actions to select a browser and load the web app in the browser, to actions for interacting with the webpage. We will cover these in the rest of this section.

Loading the Web Application Into a Browser Session

To start a browser session and load a page into the session, you can initialize a particular WebDriver class and use it to load the web application using the driver.get() function:

driver = selenium.webdriver.Chrome()
driver.get('http://www.google.com');

Finding Elements

In order to perform actions or assertions on elements on a webpage, you need to obtain a reference to such elements. You can locate webpage elements by using their different HTML properties. The corresponding WebDriver functions are listed in the table below.

find_element_by_id Unique id
find_element_by_name Name attribute
find_element_by_xpath Xpath locator
find_element_by_link_text Text inside the link
find_element_by_partial_link_text Partial link text
find_element_by_tag_name HTML tag name
find_element_by_class_name HTML class attribute
find_element_by_css_selector CSS selector

Example:

<input type=“text” name=“txtName” id=“txtId” />

To find this text input element, one could use any of the following locators:

element = driver.find_element_by_id("txtId ”)
element = driver.find_element_by_name("txtName ")
element = driver.find_element_by_xpath("//input[@id= 'txtId ']")

By default, the above functions return the first element that is found. If you would like to work with later elements identified by your locator, you would need to use the find_elements_ by_<locator> version of the function (which finds multiple elements) and access the later elements in the array returned.

Performing Actions

Once you have a reference to an element, you can interact with it through the following functions:

element.click() Perform a click operation
element.send_keys(‘text’) Type “text” into the element
element.submit() Submit the form element associated with element

There are also several other advanced functionalities, such as operations on HTML select elements or alert dialogs, and on performing drag-drop operations. Information on these can be found in the documentation for the Selenium-Python package.

Assertions

For performing assertions, you can either use the assert directive in Python or write your tests using the unittest package.

Installing ChromeDriver

ChromeDriver provides control of the Google Chrome browser though the WebDriver interface. You can download the latest version of the ChromeDriver from:
http://chromedriver.storage.googleapis.com/index.html
Place the ChromeDriver binary in suitable path. For this tutorial, I will place ChromeDriver inside /usr/local/bin.

Testing On an Emulated Mobile Browser

An easy way to run automated mobile web tests is to emulate a mobile browser on a desktop computer, thereby avoiding the need to set up a real device. ChromeDriver provides an experimental option to emulate a supported mobile browser.

To switch which mobile browser you are emulating, you can change the deviceName to the name of another device that you would like Chrome to emulate for the test.

Sample Test Script

import os, time
from selenium import webdriver

# Set up chromedriver path
chromedriver = "/usr/local/bin/chromedriver"
os.environ["webdriver.chrome.driver"] = chromedriver

# Configure mobile emulation in Desktop Chrome
device = { "deviceName": "Google Nexus 5" }
options = webdriver.ChromeOptions()
options.add_experimental_option("mobileEmulation", device)
driver = webdriver.Chrome(executable_path=chromedriver, chrome_options=options)

# Test steps
driver.get('http://www.google.com');
search_box = driver.find_element_by_name('q')
search_box.send_keys('DZone')
search_box.submit()
time.sleep(5) # Sleep for 5 seconds
assert "www.dzone.com" in driver.page_source

# Quit chromedriver to close the browser window
driver.quit()

This test loads up http://www.google.com and searches for “DZone” and checks if its domain www.dzone.com is present in the search results. There is a sleep function added to allow the page to load the search result.

When this test runs, either it will fail and display an error message, or it will not report anything. For managing larger sets of tests, and for better test reporting, you might consider using the Python unittest module.

Testing With the Python Unittest Module

By using the unittest module, you will avoid repeating the setup and teardown operations for each test and get a better pass-fail report from running your test case.

import unittest, os, time
from selenium import webdriver

# Set up chromedriver path
chromedriver = "/usr/local/bin/chromedriver"
os.environ["webdriver.chrome.driver"] = chromedriver

# Configure mobile emulation in Desktop Chrome
device = { "deviceName": "Apple iPhone 5" }
options = webdriver.ChromeOptions()
options.add_experimental_option("mobileEmulation", device)

class GoogleSearch(unittest.TestCase):

		def setUp(self):
			self.driver = webdriver.Chrome(executable_path=chromedriver, chrome_options=options)

		def test_title(self):
			driver = self.driver
			driver.get("http://www.google.com")
			self.assertIn("Google", driver.title)
            
		def test_dzone(self):
			driver = self.driver
			driver.get("http://www.google.com")
			search_box=driver.find_element_by_name(‘q’)
			search_box.send_keys("DZone")
			search_box.submit()
			time.sleep(5) # sleep for 5 seconds
			assert "www.dzone.com" in driver.page_source

		def tearDown(self):
			self.driver.quit()

if __name__ == "__main__": 
	unittest.main()

This test code, written using the unittest module, contains a setUp function to perform the initialization before each test, and a tearDown function to clean up the driver instance after each test. This test code contains two tests: test_title() and test_dzone(), as shown above. Upon running this test, we get the following output:

$ python google_test.py
..
--------------------------------------------------------------------
Ran 2 tests in 16.636s
OK
[Finished in 17.08s]

Mobile-Web Testing On a Real or Virtual Device

Some situations cannot be tested on an emulated mobile browser, and the test might need the full functionality of a physical mobile device or the capabilities of a virtual device (e.g. the iPhone Simulator or the Android Emulator). In such scenarios, ChromeDriver can be used for testing Android apps, but it is often easier to use the open-source Appium tool, which makes it possible to run tests on Android, as well as on iOS devices by using ChromeDriver and iOS Auto underneath.

Installing and Running Appium

Appium can be downloaded and installed using the node package manager. If you don’t have npm available on your command line, install Node.js from its website.

$ npm install -g appium

Then to run Appium, you would run the following command:

$ appium &

By default, Appium shows all messages in its log, which is nice for debugging purposes. You can configure the Appium tool using its command-line options.

For testing your web application in either a real or virtual Android device, you also need to download and install the Android SDK from the Android developer website. Similarly, for testing on the iPhone Simulator or a real iOS device, install the Apple iOS developer tool chain. To easily check if you have the required dependencies, you can run the appium-doctor tool:

$ appium-doctor

Test Modification For Running App Using Appium

For using Appium for mobile web testing on a real or virtual mobile device, we will use a Remote WebDriver instead of the ChromeDriver and initialize it with a set of capabilities to describe the environment on which to test.

capabilities = {
	'platformName': 'Android',
	'platformVersion': '4.4',
	'deviceName': 'Android Phone',
	'browserName': 'Chrome'
}
driver = webdriver.Remote('http://localhost:4723/wd/hub', capabilities)

This code essentially replaces the statements inside the setUp function in the previous section to run the same test on a real Android device. Appium chooses a connected real device or a running virtual device on the computer. In the case of iOS, you can change the configuration to the following to target the Safari browser in the iPhone Simulator.

{
	'platformName': 'iOS',
	'platformVersion': '7.1',
	'browserName': 'Safari',
	'deviceName': 'iPhone Simulator'
}

Running mobile web tests on a real iPhone is not as straight forward as other cases shown in this document. It requires setting up ios–webkit-debug-proxy, which is used by Appium to communicate with Mobile Safari. More information on this can be found in the Appium documentation.

ChromeDriver documentation:
https://sites.google.com/a/chromium.org/chromedriver/

Appium Documentation:
http://appium.io/slate/en/master

Selenium-Python API Docs:
http://selenium-python.readthedocs.org/

Android Developer Website:
http://developer.android.com/sdk/index.html

Publications

  • Featured
  • Latest
  • Popular
DOWNLOAD
Design Patterns
Learn design patterns quickly with Jason McDonald's outstanding tutorial on the original 23 Gang of Four design patterns, including class diagrams, explanations, usage info, and real world examples.
198.9k 535.8k
DOWNLOAD
Core Java
Gives you an overview of key aspects of the Java language and references on the core library, commonly used tools, and new Java 8 features.
122.2k 321.6k
DOWNLOAD
Getting Started with Ajax
Introduces Ajax, a group interrelated techniques used in client-side web development for creating asynchronous web applications.
100.4k 196.6k
DOWNLOAD
Getting Started with Git
This updated Refcard explains why so many developers are migrating to this exciting platform. Learn about creating a new Git repository, cloning existing projects, the remote workflow, and more to pave the way for limitless content version control.
108.7k 241.8k
DOWNLOAD
Spring Configuration
Catalogs the XML elements available as of Spring 2.5 and highlights those most commonly used: a handy resource for Spring context configuration.
101.7k 254k
DOWNLOAD
Core CSS: Part I
Covers Core principles of CSS that will expand and strengthen your professional ability to work with CSS. Part one of three.
88.7k 191.5k
DOWNLOAD
jQuery Selectors
Introduces jQuery Selectors, which allow you to select and manipulate HTML elements as a group or as a single element in jQuery.
92k 347.8k
DOWNLOAD
Foundations of RESTful Architecture
Introduces the REST architectural style, a worldview that can elicit desirable properties from the systems we deploy.
90.6k 132.9k
DOWNLOAD
The Ultimate Scrum Reference Card
Provides a concise overview of roles, meetings, rules, and artifacts within a Scrum organization. Updated for 2016.
84.5k 222.5k
DOWNLOAD
Core Java Concurrency
Helps Java developers working with multi-threaded programs understand the core concurrency concepts and how to apply them.
88.1k 179.3k
DOWNLOAD
Core CSS: Part II
Covers Core principles of CSS that will expand and strengthen your professional ability to work with CSS. Part two of three.
72.3k 137.8k
DOWNLOAD
Getting Started with Eclipse
Gives insights on Eclipse, the leading IDE for Java, which has a rich ecosystem of plug-ins and an open-source framework that supports other languages.
72k 182.6k
{{ card.title }}
{{card.downloads | formatCount }} {{card.views | formatCount }}

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}