Running tests with the browser emulating a specific Responsive Breakpoint

This article describes how to set up the browser resolution to a specific Responsive Breakpoint when running a web automation test. For example, you can run a test on Chrome browser in iPad resolution.

Setting up a Breakpoint

To set up a breakpoint, define a Web Profile under resources and include information for mobileEmulation. An example below:

Finding available Device Names

In the Web Profile description above, "deviceName" can map to one of the devices that come pre-defined in your Chrome browser. Here are the steps to find supported device names on your Chrome browser.

• In the Chrome browser, right-click and select "Inspect"
• Click on the "Device toolbar" icon

• Click the Device dropdown displayed on the top of the application screen on chrome browser. You will see a list of available and enabled device types.

Defining custom device type

If a specific device type is not available in the pre-defined list, you can also explicitly specify the user agent and device metrics as follows in the Web Driver Profile.

{

       "mobileEmulation":{

               "deviceMetrics": { "width": 360, "height": 640, "pixelRatio": 3.0 },

               "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"

        }

}

You can find the user agent description string for your specific device from the extensive database here: https://developers.whatismybrowser.com/useragents/explore

Running the test with a device emulation

Once you setup a Web Driver Profile, simply point to it when you execute the test. This profile can be selected in the Browser/OS selection area in the Run modal.

    

    

You can learn more about Web Driver Profiles in this article.