Mobile Emulation in Chrome
What we have learned using Chrome to emulate devices
As you may have seen in my previous entry about automating UI tests, in the apparel retailer company where we collaborate we started using Chrome in our Selenium Grid to emulate mobile devices for the automated regression of the UI tests.
When we moved to start using Chrome the first approach was to send the mobile user agent as an argument. I will call this type of browser as “modified-user-agent browser” later in this post. Looking at the execution failures and causes we started to notice that there were some differences between the emulated device and the modified-user-agent browser.
These differences were because the modified-user-agent browser does not add touch emulation but the Device Mode in Chrome does. We needed to change our approach and investigate how to access the touch emulation in Chrome. These are the findings.
How to Emulate a Device
According to Chrome Mobile Emulation documentation, there are two ways to emulate a mobile device: specifying the device name or providing the device attributes.
Probably the easiest way to do it is to have all the Chrome nodes in the Selenium Grid to be configured so that they have the same device enabled in Chrome DevTools. But we cannot rely on having each node owner to maintain the configuration. So we used the device attributes.
There are 3 things we need to know about the device to be able to emulate it: the user agent, device dimensions and the device pixel ratio. You can get all of this information using the Console with Device Mode toggle On in Chrome Developer Tools. In the example below we are emulating an iPhone 6 Plus with iOS9.1:
This is how we are setting the desired capabilities to emulate the device in a local environment:
DesiredCapabilities desiredCapabilities = DesiredCapabilities.chrome();
Map<String, Object> deviceMetrics = new HashMap<>();
deviceMetrics.put("width", 414);
deviceMetrics.put("height", 736);
deviceMetrics.put("pixelRatio", 3.0);
Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1");
ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("mobileEmulation", mobileEmulation);
desiredCapabilities.setCapability(ChromeOptions.CAPABILITY, options);ChromeDriver driver = new ChromeDriver(desiredCapabilities);
Note that we are using the ChromeOptions object to add the capability to the DesiredCapabilities object.
Managing Chrome Extension to your Emulated Mobile
In case you missed in the image above, we are using ModHeader Chrome extension to add some headers to our HTTP request. It was quite fun discovering how to do both, use the mobile emulation and the Chrome Extension (specially when the ChromeDriver documentation uses Maps to illustrate how to set your emulated mobile device).
The Chrome Extensions documentation provides examples on how to install the extension in the ChromeDriver. Following the documented example, you only need to add the extension to the ChromeOptions object before launching the ChromeDriver:
.
.
.ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("mobileEmulation", mobileEmulation);
options.addExtensions(new File("ModHeader.crx"));desiredCapabilities.setCapability(ChromeOptions.CAPABILITY, options);ChromeDriver driver = new ChromeDriver(desiredCapabilities);
But in case you want to disable all Chrome extensions, you need to add the disable extensions argument in the ChromeOptions object:
.
.
.ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("mobileEmulation", mobileEmulation);
options.addArguments("--disable-extensions");desiredCapabilities.setCapability(ChromeOptions.CAPABILITY, options);ChromeDriver driver = new ChromeDriver(desiredCapabilities);
In case you are wondering how to setup the extension configuration as part of the automated execution, in the specific case to ModHeader, the way to configure it is to go to the context of the extension before going to your test page and set the user profile in the local storage:
driver.get("chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/icon.png");JavaScriptExecutor executor = ((JavascriptExecutor) driver;
executor.executeScript("localStorage.setItem('profiles', JSON.stringify([{" +
"'title':'Profile 1'," +
"'hideComment':true," +
"'headers':[{'enabled':true," +
"'name':'" + header + "'," +
"'value':'" + value + "'," +
"'comment':''}]," +
"'respHeaders':[]," +
"'filters':[]," +
"'appendMode':''}]));");
SawyerEffect is a cozy company providing Software Development Services. QA Automation is part of our Software Development Life Cycle. Do you need help? Contact Us!
