Using Mobile Emulation for testing mobile web applications

The Chrome browser allows users to emulate Chrome on mobile devices, such as Pixel 2, Nexus 7, iPhone, or iPad, from the desktop version of Chrome via DevTools. The following screenshot shows how our sample application will be seen in Chrome for iPhone. We can start the mobile emulation in Chrome browser with the following steps:

1. Navigate to the sample web application in the Chrome Browser:

2. Open the Developer Tools. Select the blue Mobile device icon and then select the device. In this example, we selected iPhone X. The Chrome browser will reload according to the selected device:

The mobile-emulation feature allows developers and testers to quickly test how a website will be displayed on a mobile device, without requiring a real device and speed up the development process.

We can also use mobile emulation with our Selenium WebDriver tests by configuring ChromeOptions. Let's modify the search test to test on Google Pixel 2:

@BeforeMethod
public void setup() {

    System.setProperty("webdriver.chrome.driver",
            "./src/test/resources/drivers/chromedriver");

    Map<String, Object> deviceMetrics = new HashMap<>();
    deviceMetrics.put("width", 411);
    deviceMetrics.put("height", 823);
    deviceMetrics.put("pixelRatio", 3.0);


    Map<String, Object> mobileEmulation = new HashMap<>();
    mobileEmulation.put("deviceMetrics", deviceMetrics);
    mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 8.0.0;" +
            "Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) " +
            "Chrome/67.0.3396.99 Mobile Safari/537.36");

    ChromeOptions chromeOptions = new ChromeOptions();
    chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);

    driver = new ChromeDriver(chromeOptions);
    driver.get("http://demo-store.seleniumacademy.com/");

}

The preceding code will enable the Mobile emulation in Chrome during the execution, and will load the mobile version of the Website. This is done by first configuring the Device metrics, such as width and height, using a Java HashMap. In this example, we configured the deviceMetrics hashmap as shown in the following code:

Map<String, Object> deviceMetrics = new HashMap<>();
    deviceMetrics.put("width", 411);
    deviceMetrics.put("height", 823);
    deviceMetrics.put("pixelRatio", 3.0);

Next, we need to create another Hashmap, named mobileEmulation, that will hold the deviceMetrics and userAgent Strings. The userAgent string specifies which Mobile device should be used, such as Pixel 2 XL, and the rendering engine versions:

 Map<String, Object> mobileEmulation = new HashMap<>();
    mobileEmulation.put("deviceMetrics", deviceMetrics);
    mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 8.0.0;" +
            "Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) " +
            "Chrome/67.0.3396.99 Mobile Safari/537.36");

Finally, we need to pass the mobileEmulation hashmap to the ChromeOptions class, and call the setExperimentalOption() method that passes the mobileEmulation hashmap:

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);

driver = new ChromeDriver(chromeOptions);

This will load the mobile version of the application and Selenium will run the test as usual.

We can get the userAgent string after configuring the mobile device. Go to the Network tab in the Chrome Developer tools.  Reload the page, select the first request from the list, and copy the value of the User-Agent key from the Headers tab, as shown in the following screenshot: