Mobile Emulation via Endpoint Configuration


#1

The evolution of small screen devices, such as mobile phones and tablets, has expanded the scope of testing for developers who were expected to ensure that their web pages open properly on all mobile browsers with different resolutions if they wanted to remain competitive on the market and relevant to end-users.

However, this kind of testing was difficult and complicated, because the developers had to test their web pages on various devices with different specifications, which was often not financially and logistically viable.

In order to support developers with a more efficient solution, the Google Chrome browser enabled a mobile emulation feature, allowing developers and testers to quickly test how a website will render in a mobile device, without requiring a real device.
This feature allows opening webpages in mobile view by emulating browsing on devices like Google Pixel 2, Apple iPhone 6, 7, and 8, Samsung Galaxy S5, etc.

You can access mobile emulation in Chrome by pressing F12 or right-clicking the page, then selecting ‘Inspect’ to open Chrome Developer Tools, then clicking the phone icon.

In Chrome DevTools, click the phone icon and choose one of the devices.

Additionally, you can click on ‘Edit…’ and choose another device from the extensive list, for example, if you want to test how your website displays on an older device.

While the mobile emulation feature in Chrome is certainly useful, it only works if you want to quickly check that your web page looks good on mobile devices. In case you want to automate mobile browsers, you might need a different approach.

Luckily, the ChromeDriver can also enable mobile emulation, via the mobileEmulation capability, specified with a dictionary value.
Just as in the Chrome Developer Tools Emulation panel, there are two methods to enable mobile emulation in ChromeDriver. The first method is by specifying a known mobile device, while another is by specifying individual device attributes.
The method used will determine the format of the mobileEmulation dictionary.

Specifying a known mobile device

If we want to enable mobile emulation with a specific device, the mobileEmulation dictionary must contain a deviceName with a value set to one of the valid device names from the DevTools Emulation panel.

This can be done easily with Ranorex Webtestit. When adding an endpoint for your test, we added the following code in Capabilities field:

{
  "chromeOptions": {
    "mobileEmulation": {
      "deviceName": "Nexus 5"
    }
  }
}

Here’s how it should look in the Endpoint dialogue in Ranorex Webtestit:

For the deviceName we added Nexus 5, although it could be any other device from the list.
If you try to use a device name that isn’t on the list, you will get an error.

To emulate a device that ChromeDriver doesn’t recognize, we need to enable mobile emulation using the second method, i.e. individual device attributes.

Specifying individual device attributes

This method allows developers to enable testing on custom mobile devices that are not listed in Chrome by adding these devices, i.e. their attributes, manually. To enable mobile emulation this way, the mobileEmulation dictionary must contain a deviceMetrics dictionary with the following device attributes specified:

  • width - the device’s screen width in pixels
  • height - the device’s screen height in pixels
  • pixelRatio - the device’s pixel ratio
  • touch - choosing whether to emulate touch events; can be set optionally

The mobileEmulation dictionary should also contain a userAgent string to help identify the application type, operating system, software vendor or software version of the requesting software user agent.

Just like in the previous method, a code should be added in Capabilities in the Endpoint dialogue. The code should look like this:

{
  "chromeOptions": {
    "mobileEmulation": {
      "deviceMetrics": {
        "height": 100,
        "width": 100
      },
      "userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
    }
  }
}

We’ve set only two attributes for deviceMetrics, the height and width, with both values set to 100px, demonstrating that this method can be useful when testing custom devices with unusual resolutions.


Mobile Emulation support