Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Mobile Testing With Chrome and WebDriver

DZone's Guide to

Mobile Testing With Chrome and WebDriver

An excerpt from a free eBook on Selenium WebDriver, focused on using Google Chrome's Mobile Emulation tool.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

This is an except from Chapter 11 of the free book Selenium WebDriver: From Foundations to Framework.

Mobile Testing Using Chrome’s Mobile Emulation

Chrome provides the ability to emulate different mobile devices. This can be useful for early identification of problems with your site on mobile devices, without the time and effort required to set up a full mobile automation system.

You want to test for mobile, but without too much special setup. Use Chrome’s mobile emulation mode.

If Chrome knows about the device you want to emulate, you can specify a known mobile device.

To get Chrome to emulate a mobile device, you need to know the name of the device you want to emulate. To find this out, open the Dev Tools by right-clicking on the page and choosing Inspect. Click the small Toggle Device Mode button shown in figure Toggle device mode button. This button looks like a small iPad.

Image title
Figure 4. Toggle device mode button

The new toolbar shown in figure Device mode toolbar will appear, allowing you to choose the device you want.

Image title

Figure 5. Device mode toolbar

You need the exact string shown — in this example, "Apple iPad".

To tell the ChromeDriver class to start in mobile emulation mode, you must pass some properties of DesiredCapabilities:

  • chromeOptions — Must be set to a map
  • chromeOptions.mobileEmulation — Must be set to a map too
  • chromeOptions.mobileEmulation.deviceName — Must be set to the device name

For example:

ChromeMobileEmulationKnownDeviceIT.java

mobileEmulation.put("deviceName", "Apple iPad");

Map<String, Object> chromeOptions = new HashMap<>();

chromeOptions.put("mobileEmulation", mobileEmulation);

DesiredCapabilities capabilities = DesiredCapabilities.chrome();

capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);

driver = new ChromeDriver(capabilities);

If Chrome does not know about the device, you must specify individual device attributes. You need to specify:

  • chromeOptions.mobileEmulation.deviceMetrics.width — The width of the device’s screen
  • chromeOptions.mobileEmulation.deviceMetrics.height — The height of the device’s screen
  • chromeOptions.mobileEmulation.deviceMetrics.pixelRatio — The pixel ratio
  • chromeOptions.mobileEmulation.userAgent — The value of the HTTP user agent header

The following example uses the same values as the Apple iPad:

ChromeMobileEmulationDeviceAttributesIT.java

Map<String, Object> deviceMetrics = new HashMap<>();

deviceMetrics.put("width", 768);
deviceMetrics.put("height", 1024);
deviceMetrics.put("pixelRatio", 2);

Map<String, Object> mobileEmulation = new HashMap<>();

mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53");

Map<String, Object> chromeOptions = new HashMap<>();

chromeOptions.put("mobileEmulation", mobileEmulation);

DesiredCapabilities capabilities = DesiredCapabilities.chrome();

capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);

You can run the test application in mobile mode if you like. See https://github.com/selenium-webdriver-book/source/ for details.

Chrome’s mobile emulation feature is a great and inexpensive way to test mobile devices. It doesn’t require any extra software installed on either developers' PCs or your CI system, so there is very little cost in getting set up. Naturally, there are a few differences between emulation and testing on a real device:

  • A desktop machine is likely to be much more powerful than a mobile device, so performance will greatly differ.
  • Many mobile features (such as the camera) are not supported.

If your site uses mobile features and you want to emulate them, then you might want to consider Appium, which we’ll talk about shortly.

This is an excerpt from Chapter 11 of the free book Selenium WebDriver: From Foundations to Framework.

Image title

Selenium 3.0 compatible, and at over 420 pages this book will help you learn the fundamentals of the WebDriver API such as locating and interacting with web pages, through advanced topics such as Page Objects and mobile testing, and finally teach you how to build up your own web application testing framework.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
selenium ,mobile ,chrome

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}