Mobile Testing With Chrome and WebDriver

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.

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.

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.

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.