You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

How to automate HTML5 mobile site functional testing using Chrome Mobile Emulator

0.00 avg. rating (0% score) - 0 votes
The most common is to use the firefox addon User Agent Switcher, however, the browser window that opens has the same size as that of a desktop browser. If we simulate the size of a mobile phone browser our automation will be much more closer to an actual user interaction, moreover, the screenshots will capture the look of the web page on an actual mobile and would allow us to automate responsive design testing as well. Such an option is provided by the chrome screen emulator.
 
Emulators are pretty much exactly as their names suggest, they emulate how a browser would render a web page. The obvious benefit is the ability to test out your web pages under multiple devices without having multiple installations of user agents applications and versions installed on your computer.
To launch the chrome screen emulator manually:
  1. Launch chrome and press F12, the chrome dev tools are displayed.
  2. Click on the Toggle device mode icon (the icon next to the magnifying glass)
  3. If you check the top of the browser window, you will notice a device drop down
  4. Select a device from the drop down to check how it the web page will be displayed
Select the device:
 
Enter the URL You want to open
 
In order to use the chrome screen emulator in your automation script launch chrome using 
        System.setProperty(“webdriver.chrome.driver  <mention path for chromedriver.exe here>);
        Map<String, String> mobileEmulation = new HashMap<String, String>();
        mobileEmulation.put(“deviceName”, “Google Nexus 5”); // select the device to emulate
        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://resume.naukri.com”); //enter the URL you want to navigate to
 
Mobile Emulator in Chrome provides support for a large number of devices:
  • Apple iPad
  • Apple iPad mini
  • Apple iPhone 4
  • Apple iPhone 5
  • Apple iPhone 6
  • Apple iPhone 6 Plus
  • Blackberry Playbook Z30
  • Google Nexus 10
  • Google Nexus 4
  • Google Nexus 5
  • Google Nexus 6
  • Google Nexus 7
  • LG Optimus L70
  • Nokia Lumia 520
  • Nokia N9
  • Samsung Galaxy Note
  • Samsung Galaxy S III
  • Samsung Galaxy S4