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
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
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:
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.