Desktop version of Google Chrome allows to users to open webpages in mobile view. This means that you can emulate browsing on devices like Google Nexus 5, Apple iPhone 6 etc. You can find this feature in developer tools by clicking on the mobile icon.

Mobile emulation button
Mobile emulation button

Now ChromeDriver allows to use device emulation in automated tests also. This feature speeds up web development, allows developers to quickly test how a website will render on a mobile device, without requiring a real device or a virtual machine. You can find more information about it on the following link https://developer.chrome.com/devtools/docs/device-mode. The setup is very easy and it’s working really well. Below you can find a little test case which will introduce to you how to use ChromeDriver for emulate a mobile device and tablet. The test case simply enters “what is my browser” into the google search page, clicks on the first result and checks the device type what will be present on the website.

@DataProvider(name = "deviceName")
	public Object[][] deviceNames(){
		return new Object[][] {
				{"Google Nexus 5", "LG Nexus 5"},
				{"Apple iPhone 6", "Apple iPhone"},
				{"Google Nexus 10", "Samsung Nexus 10"}
		};
	}

	@Test(dataProvider = "deviceName")
	public void mobileEmulation(String deviceName, String deviceNameWhatIsMyBrowser){
		Map<String, String> mobileEmulation = new HashMap<String, String>();
		mobileEmulation.put("deviceName", deviceName);

		Map<String, Object> chromeOptions = new HashMap<String, Object>();
		chromeOptions.put("mobileEmulation", mobileEmulation);
		DesiredCapabilities capabilities = DesiredCapabilities.chrome();
		capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
		WebDriver driver = new ChromeDriver(capabilities);

		driver.get("http://www.google.com/ncr");
		//Enter my search
		driver.findElement(By.cssSelector("#lst-ib")).sendKeys("what is my browser");
		//Click on search button
		driver.findElement(By.cssSelector("#tsbb")).click();
		//Click on the first found result
		driver.findElement(By.xpath("//h3[@class='r']/a[text()='What browser am I using? Is my browser up to date? Web browser ...']")).click();
		//Get the device name from the website
		String deviceNameFromWebsite = driver.findElement(By.cssSelector(".string-extra-info")).getText();
		//Check the device name from the website
		Assert.assertEquals(deviceNameFromWebsite, deviceNameWhatIsMyBrowser, "The device name is not the expected one.");
		
		driver.quit();
	}	

We will use TestNG DataProvider to run the same test scenario on various types of devices. The first string is the device identity in Chrome (you can find the list here) and the second is the name what is expected from the https://www.whatismybrowser.com/.
Let’s move on the test case. The tricky point is to set up Chrome to emulate a mobile or tablet device. As you probably expected we will use DesiredCapabilities to set this up. We need to create a Map<String, String> (mobileEmulation in code) where we will put device name. The key will be deviceName string and the value will be the exact device name what is used in Chrome browser (we have it prepared in the DataProvider). In this map you can specify other device attributes too (see in the section below). The second step is to create a new Map<String, Object> (chromeOptions in code) where we will put the previously created map with mobileEmulation key. Finally we can put the chromeOptions into our DesiredCapabilities variable and pass it to the ChromeDriver. The rest of the code is the usual, navigation and manipulation with the web elements.

Specifying Special Device Attributes

There is also possible to pass custom attributes to Chrome. To start Chrome in device emulation mode in this way you need to add to the mobileEmulation map the deviceMetrics map and userAgent string. The following device metrics need to be specified in deviceMetrics map:

  • “width” – the width in pixels of the device’s screen
  • “height” – the height in pixels of the device’s screen
  • “pixelRatio” – the device’s pixel ratio

 

Here is the code snippet to setting up Chrome with custom device metrics (from Selenium):

Map<String, String> deviceMetrics = new HashMap<String, Object>();
deviceMetrics.put("width", 360);
deviceMetrics.put("height", 640);
deviceMetrics.put("pixelRatio", 3.0);
Map<String, String> mobileEmulation = new HashMap<String, String>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("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");
Map<String, Object> chromeOptions = new Map<String, Object>();
chromeOptions.put("mobileEmulation", mobileEmulation);
DesiredCapabilities capabilities = DesiredCapabilities.chrome();
capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
WebDriver driver = new ChromeDriver(capabilities);

Differences between emulation and real device

It’s really sounds good that you can test your website with various screen sizes, pixel ratio, and various devices, but as always there is a drawback. You should be aware that there are many major differences between the emulated and real device. Here is the list from Selenium what you need to have in mind:

  • entirely different GPU, which may lead to big performance changes;
  • mobile UI is not emulated (in particular, the hiding url bar affects page height);
  • disambiguation popup (where you select one of a few touch targets) is not supported;
  • many hardware APIs (for example, orientation change event) are unavailable.

We hope that you learned something new. Thanks for reading!

Have a nice day!

Similar Posts from the author: