Emulate browser as mobile device using Selenium

Welcome to my blog!!!!

Have you ever wondered whether we can automate our browser to see how it looks like in mobile using Selenium? Here is how we can do it.

What are Chrome Dev Tools?

Chrome Dev Tools is a set of web developer tools built directly into Google Chrome browser. With Chrome Dev Tools, developers have deeper access to the applications which render on browser. Right click -> inspect on any browser page provides us the Dev tools.

The below picture shows the Dev Tools. It has the following:

Elements-> HTML elements of your web application

Console -> Console logs of your web application

Network -> Response and request of API calls for your web application

Performance -> metrics information

Memory, Application, Security and so on.

We get lot of information about the application from the developer tools. So if Selenium can access to this level of dev tools then it would be great. We can even control what type of API calls, console logs, build up security through selenium.

What are Chrome Dev Tools Protocol (CDP) ?

The Chrome Dev Tools Protocol provide tools to instrument, inspect, debug and profile Chromium, Chrome and other Blink -based browsers. These are APIs to access the chrome dev tools.

Selenium 4 introduces powerful commands which are wrapper around the CDP Domains to grant access to Chrome Dev Tools directly from your automated tests.

Each of the Selenium bindings dynamically generates classes and methods for the various CDP domains and features; these are tied to specific versions of Chrome.

With this CDP Support Selenium opens up the possibilities of out of Box Testing with the complete access and control to the browser features within the test.

For example, we can mock the geolocation of our browser to do testing in areas where we aren’t actually physically located. We can simulate things like network speed and device mode. We can intercept network requests and mock responses. And we can capture console logs and performance metrics. Essentially anything that can be done from the Chrome DevTools window can now be done from our automated tests!

Examples:

1. Capture, monitor and stub the network requests and response.

2. Inject Session cookies and perform basic Auth.

3. Mock device coordinates for Mobile/Tabs View: Chrome provides a great API for setting Mobile Emulation in the Options classes, which is generally superior to attempting to do this with CDP

4. Check and monitor the sites performance.

5. Mock geolocations of the user: almost all sites use the IP address to determine physical location, so setting an emulated geolocation rarely has the desired effect.

6. Block the network requests.

7. Mock faster/slower network speed.

8. Execute and debug Javascript.

There are lots of Domain. Each domain has several methods. For example Network domain has clearBrowserCache to delete the browser cache information. This protocol exposes events and methods to perform and manipulate any actions on chrome dev tools.

So using Selenium we are going to emulate browser as mobile with the following steps:

1. Create a maven project and update the POM.xml with selenium Java dependency.

2. To initialize chrome Dev Tools connection with Selenium, Chromium Driver class has predefined methods to access the Dev Tools. Chrome Driver and Edge Driver are inherited from Chromium Driver. So, we can access to Dev Tools with Chrome and edge browser. The browser-specific drivers ChromeDriver and EdgeDriver still exist in Selenium 4, but now they inherit from ChromiumDriver instead of the RemoteWebDriver class (which ChromiumDriver now extends). Now Initiate Chromium Driver.

3. Create object for Chrome Dev Tools with getDevTools() Method. It returns the new DevTools object which allows you to send() the built-in Selenium commands for CDP.

4. Create Dev tools Session to send the commands from Selenium.

5. Now we can send commands using devTools.send(COMMAND). Selenium in Built commands are wrapper methods that invoke CDP Domain functions. We have to send commands to CDP Methods which will invoke and get access to Chrome DevTools. We have Emulation Domain in Chrome Dev Tools Protocol document.

We need to use Emulation.setDeviceMetricsOverride. This method Overrides the values of device screen dimensions (window.screen.width, window.screen.height, window.innerWidth,window.innerHeight, and "device-width"/"device-height"-related CSS media query results). If we want to view our browser in say iPhone dimension then we need to provide all the dimension details. This method we need to provide it as COMMAND.

This way user can automate and see how the browser will be visible in mobile.

Emulation is a class. We have to choose setDeviceMetricsOverride method based on our browser version.

It has the following parameters as shown in the screenshot below.

From documentation we can give the parameter values:

width, height, deviceScaleFactor , mobile are required and other parameters are optional.

So to analyze our browser we will inspect. We have click on Toggle device toolbar. we can view our browser in mobile view. The same we are going to automate using Selenium.

so we are providing the width : 600 , height: 1000, deviceScaleFactor (zoom) : 50, mobile : true in the command.

other Parameters we need to provide them as Optional.empty()

Now we can run the following code to view our browser in mobile view

This is how our mobile view looks like:

While Selenium 4 provides direct access to the Chrome DevTools Protocol (CDP), these methods will eventually be removed. It is recommended to use the WebDriver Bidi APIs methods where possible to ensure future compatibility.

We have more commands to explore in CDP!!! It is just the beginning.

Never Stop Learning!!!