Selenium: Lightning Fast Mobile Emulation in Kubernetes

Hi there! We continue our cycle of articles related to efficient browser automation infrastructure. Full list of articles is published on our website. Today we would like to talk about efficient browser infrastructure for testing mobile versions of your web-application.

Mobile Testing Evolution

During the last 15 years mobile devices evolved from cellular phones being able to store your contacts and sending SMS to powerful portable computers permanently connected to Internet. Smaller screen sizes compared to desktop computers required to adapt existing web sites to display and work correctly. This is how mobile versions of web applications appeared. New version of web applications required to develop new testing approaches.

Initial testing approach for mobile web sites was logical and straightforward: simply buying desired mobile device model and running all the checks manually. Over the years overall number of available device models was constantly growing. So was doing the number of mobile devices on tester’s table. Finally dozens of devices were moved to the rack and this is how so-called mobile device “farms” appeared. Mobile farms have one important disadvantage: they require too much work to maintain. For example from time to time your devices can stop working because of broken battery, they require to manually confirm all software updates, they can unexpectedly log out from Google or Apple account or restart. The number of such issues grows with the number of mobile devices connected to the farm, so with several dozens of devices you may need a dedicated engineer who will be responsible for maintaining mobile devices farm.

Taking all the issues of mobile devices farm into consideration, it is clear that such farms are not convenient for running a lot of tests. This is where emulators come into play. Emulators are desktop applications developed by mobile operating system developers that are showing you just the same screen that real devices have. For example Android comes with Android Emulator and iOS has iOS Simulator available. Emulators can be run on standard hardware servers (for Android) and on MacMini servers for iOS. These servers can be mounted to datacenter racks. Because of that emulator-based mobile automation scales well. The only important drawback of this is approach is computing resources cost. Emulators do not work on standard virtual machines and require two times more CPUs and memory than desktop browsers do. Also they are slightly slower that desktop browsers. Very frequently these two particularities prevent teams from using emulators.

It would be great if we somehow could combine speed and moderate computing resources requirements with the possibility to still test mobile versions of web applications. Let’s first of all remember that our final goal is catching bugs in web application and not deploying complicated browser automation infrastructure. From that point of view any solution that will catch bugs should be taken into consideration. Test automation experience of previous years clearly states that the majority of bugs in mobile versions of web applications can be found by doing only two changes in desktop browser:

  1. Change browser viewport to the size of desired mobile device;
  2. Send User-Agent HTTP header corresponding to desired mobile device.

Such feature already exists in all Chromium-based browsers and is called Mobile Emulation. You can activate it manually using Chrome Developer Toolbar:

Let’s adapt it for test automation purposes.

First-Class Mobile Emulation

Starting from release 1.8.0 Moon comes with built-in first-class mobile emulation feature. That means — you can simply provide desired device name in Selenium capabilities and Moon will automatically launch desired Google Chrome version and configure it to have viewport dimensions, pixel ratio and user agent corresponding to this device. In test code this looks like this:

ChromeOptions browser = new ChromeOptions();
browser.setCapability("browserVersion", "88.0");
browser.setCapability("moon:options", new HashMap<String, Object>() {{
put("mobileDevice", new HashMap<String, Object>() {{
put("deviceName", "Apple iPhone XR");
}});
}});
WebDriver driver = new RemoteWebDriver(new URL("http://moon.example.com:4444/mobile"), browser); # Note that Selenium URL ends with /mobile

When launching your tests your tested web application will start looking like if it was opened on real iPhone device. If you start a session and open Moon UI you will see that Chrome now looks like real iPhone device screen:

You can easily change device screen orientation by adding orientation capability:

ChromeOptions browser = new ChromeOptions();
browser.setCapability("moon:options", new HashMap<String, Object>() {{
put("mobileDevice", new HashMap<String, Object>() {{
put("deviceName", "Apple iPhone 11");
put("orientation", "landscape");
}});
}});

Moon comes with a predefined and constantly growing list of device configurations corresponding to the most popular device models. This list is stored in devices.json file which looks like this:

{
"Apple iPhone 11": {
"width": 414,
"height": 896,
"pixelRatio": 2,
"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1"
},
"Apple iPhone 11 Pro": {
"width": 375,
"height": 812,
"pixelRatio": 3,
"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Mobile/15E148 Safari/604.1"
}
// Other devices
}

For every device definition in this file you can use its name in deviceName capability. You can certainly define your own device definition simply by editing this file.

Certainly mobile emulation supports video recording. A typical video recorded in emulation mode looks like this:

Conclusion

In this article we demonstrated how to catch that majority of mobile web-application bugs using only desktop browsers. Certainly mobile emulation feature is not a silver bullet and does not guarantee 100% coverage. However we definitely recommend to try it with your application. Probably it will economize you a lot of time and money.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store