Mobile emulation in Google Chrome using Selenium WebDriver

With evolution of small screen devices like mobile and tablets, testing scope has become so huge, because you need to make sure that your web page open correctly on all the mobile browsers with various resolution. But this has given a new horizon to testing challenge and cope up with competition in market to remain relevant to all end user.

So sometimes it seems so cumbersome to test on various device with various specification and environment on small screen and there is one more challenge not all companies can afford all devices. So in support of such start-ups and headlight of organization aka testers, google chrome has given us a mighty hand by providing mobile emulation facility in Chrome browser. This has given a big comfort to many testers to test how site would be rendered on various mobiles and tablet. But if you only want to run your script in chrome browser using selenium then i hope this post Launch Chrome Browser Using WebDriver will help you.




Since this emulator is part of chrome browser so all its related libraries are covered under ChromeDriver to simulate these mobile emulator in Google Chrome.

So let’s jump directly to the implementation. There are two approaches to implement this

First Approach : With Device Name provided in Emulator list inside Chrome browser.
Steps:
1- Right click and click on inspect element
2- In developer tool go to mobile icon and click on mobile device icon to initialize mobile emulation.
3- Click on ESC key and console would open, at the same window there would be a tab Emulation, Click on that
4- Select the mobile device emulator over which you want to see the simulation of web application.

Now half battle is won by you just by figuring out device name.
5- We need to create a map with key :”deviceName” and value: “mobile emulator name”
6-  Once we make the map of device, further we need to make a map but this time key: “mobileEmulation” and here value is same map that we have created in step 5
7- Now have the correct dictionary of map and right combination of key and value pair over which DesiredCapabilities, So here is the example of setting capability to chrome

DesiredCapabilities dc = DesiredCapabilities.chrome;
dc.setCapability(ChromeOptions.CAPABILITY, “map that has been created in step 7”);

8- Now pass this instance of DesiredCapabilities to ChromeDriver like this

WebDriver driver = new ChromeDriver(dc);




9- Once we initialize the instance of Chrome means we have finished the task of simulating the mobile emulator of our choice and after this it’s more like a web application handling the way we do in pc browsers with the help of various locating mechanism.
Scenario covered :
1- We would open paytm site in mobile formate

Code:

import java.util.*;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.DesiredCapabilities;
/*
 * @author:Dwarika
 */
public class ChromeMobileEmulator {
	public static void main(String[] args) {
		// here creating our first map for deviceName
		Map<String, String> mobileEmulation = new HashMap<String, String>();
		mobileEmulation.put("deviceName", "Google Nexus 5");
		//here creating the second map with key mobileEmulation
		Map<String, Object> chromeOptions = new HashMap<String, Object>();
		chromeOptions.put("mobileEmulation", mobileEmulation);
		//setting DesiredCapabilities for chrome
		DesiredCapabilities capabilities = DesiredCapabilities.chrome();
		capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
		WebDriver driver = new ChromeDriver(capabilities);
		//opting paytm mobile website...
		driver.get("http://paytm.com");
		driver.findElement(By.id("mobileNumber")).sendKeys("99999978609");
	}
}

Second Approach : In this approach, we need to specify all attributes mainly width, height, and pixelRatio.




1- We need to create one map which has 3 keys and respective value keys are a) width b) height c) pixelRatio
2- Once the first map is done, we need to pass it as value in one of the key of second Map that would further passed in another map that is going to have key “mobileEmulation” so first key of second map is “deviceMetrics”  and its value would be the first map that we have created that specify the various resolution and pixel ratio. Second key is “userAgent” and its value is a long string that tell us about almost all emulator “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”
3- In this step DesiredCapabilities are set with the map created with key “mobileEmulation”. So this code would look like this :

import java.util.*;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.DesiredCapabilities;
public class ChromeMobileEmulator_withSize {

public static void main(String[] args) {
Map<String, Object> deviceMetrics = new HashMap<String, Object>();
deviceMetrics.put("width", 560);
deviceMetrics.put("height", 640);
deviceMetrics.put("pixelRatio", 4.0);
Map<String, Object> mobileEmulation = new HashMap<String, Object>();
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 HashMap<String, Object>();
chromeOptions.put("mobileEmulation", mobileEmulation);
DesiredCapabilities capabilities = DesiredCapabilities.chrome();
capabilities.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
WebDriver driver = new ChromeDriver(capabilities);
driver.get("http://paytm.com");
driver.findElement(By.id("mobileNumber")).sendKeys("99999978609");
}

}

After execution, you would be able to perform simulation on chrome browser, but what if you want to perform cross-browser testing with parallel execution, in that case, you should read How to execute Selenium WebDriver test cases parallel in multiple Browser using Testng parameter Annotation.

Read Similar Posts