How to emulate a Mobile Browser using Chrome Desired Capabilities in Testsigma


Chrome Browser provides built-in ability to emulate different mobile devices. This can be useful for early identification of problems with your website on mobile devices, without the time and effort required to set up a full mobile automation system. You can test for mobile, but without too much special setup.





Using Chrome’s mobile emulation mode to emulate a web page on your preferred mobile device


1. You can press F12 key or press Ctrl+Shift+I Combination to open Developer Console in Chrome Browser. You may also right click in any web page and select Inspect to open the Developer Console - Elements Tab.

2. Click on the Device Selection toggle device mode onon the top left corner of Developer Console Area. Once enabled, the icon turns Bluedevice mode on




3. There is a list of available mobile devices in the Chrome Mobile Emulation Mode. Select your desired device from the list of available devices or create a device of your own. For example, we can select the device "iPad" from the list as shown below and it will update the view port as per the display dimensions of the selected device.




You can see the full list of available devices and also add your own devices by clicking on the last option, Edit, in the device selection menu.




You can use the name of any of the above given default devices while automating Tests on Testsigma. This is possible by specifying the device name in the Desired Capabilities while creating an Execution Configuration.
Please check this article for more details about usage of Desired Capabilities in Testsigma - How to use Desired Capabilities in Testsigma?


Using the available device name for emulation in Testsigma (under Desired Capabilities)


In the Execution Configuration page under Executions, Enter the following values below the Desired Capabilities option:


Name: goog:chromeOptions
Data Type: String
Value: {"mobileEmulation":{"deviceName":"iPhone X"}}




On execution, it will display as mobile device view as shown in below image:



Using the Custom Device for emulation in Testsigma (under Desired Capabilities)


In the Execution Configuration page under Executions, Enter the following values below the Desired Capabilities option:


Name: goog:chromeOptions
Data Type: String
Value: {
"mobileEmulation": {
    "deviceMetrics": {
        "width": 560,
        "height": 600,
        "pixelRatio": 3.0
    },
    "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"
   }
}




On execution, it will display as mobile device view as shown in below image: