Playwright Mobile Emulation Using Java

One of the standout features of Playwright is its mobile emulation capabilities, allowing one to simulate and test websites on various mobile devices. This article will explore leveraging Playwright’s mobile emulation functionality using Java, enabling us to perform comprehensive mobile testing and ensure responsive designs across different devices.

Before delving into simulating mobile device conditions using Playwright, let’s first explore how we typically accomplish this through a browser’s developer tools.

How to simulate mobile conditions using developer tools?

Right-click on the webpage and select the inspect option from the list.

This will open up the developer tools, and then we can select the below-highlighted icon to open the webpage in the mobile view.

To adjust the screen size to a specific device, simply select it from the list. For example, by choosing the “Samsung Galaxy S20 Ultra” option, the webpage will open with a viewport of 412px * 915px.

Simulate the mobile conditions using Playwright Java

Now, let’s try to simulate the same conditions using Playwright.

Launch the browser

Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch();

Setting the viewport

We will set the viewport while making the instance of the browser context. This will set the viewport for every page that is opened using that browser context.

// creating a BrowserContext while setting viewport
BrowserContext browserContext = browser.newContext(new Browser.NewContextOptions().
		setViewportSize(412, 915));

Navigating to the URL

Create a Page using the same browser context and navigate to the desired URL.

// creating the page
Page page = browserContext.newPage();
		
// Navigating to the URL
page.navigate("https://www.makemytrip.com");

Below is the whole code, which sets the viewport and navigates to the desired URL.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext while setting viewport
		BrowserContext browserContext = browser.newContext(new Browser.NewContextOptions().
				setViewportSize(412, 915));
				
		// creating the page
		Page page = browserContext.newPage();
		
		// Navigating to the URL
		page.navigate("https://www.makemytrip.com");

		// closing the instances
		browser.close();
		playwright.close();

	}

}

The above code will get us a preview of how the webpage will look in that screen size but we can get more accurate results by setting the Device Scale Factor.

What is Device Scale Factor and its role in Mobile Simulation?

The scale factor of a device, also referred to as the device pixel ratio, is a numerical value that denotes the proportion between actual device pixels and logical CSS pixels.

It determines how many device pixels correspond to a single CSS pixel. To illustrate, a scale factor of 2 indicates that for every CSS pixel, there are two device pixels.

When emulating mobile devices, it’s crucial to consider the device scale factor as it can greatly impact how the content appears on the screen. Every device has a unique scale factor that can influence the visual presentation and the size of elements on the page.

In our example, we utilized the “Samsung Galaxy S20 Ultra,” which has a device pixel ratio of 2.625. You can refer to this link and website to get the device pixel ratio of various devices.

Setting the Device Scale Factor in Playwright

// creating a BrowserContext while setting viewport and Device Scale Factor
BrowserContext browserContext = browser.newContext(new Browser.NewContextOptions().
			setViewportSize(412, 915).
			setDeviceScaleFactor(2.625));

Whole Code

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch();

		// creating a BrowserContext while setting viewport and Device Scale Factor
		BrowserContext browserContext = browser.newContext(new Browser.NewContextOptions().
				setViewportSize(412, 915).
				setDeviceScaleFactor(2.625));
				
		// creating the page
		Page page = browserContext.newPage();
		
		// Navigating to the URL
		page.navigate("https://www.makemytrip.com");

		// closing the instances
		browser.close();
		playwright.close();

	}

}

Additionally, one can also set the User-Agent for even more accurate results.

		// creating a BrowserContext
		BrowserContext browserContext = browser.newContext(new Browser.NewContextOptions().
				setViewportSize(412, 915).
				setDeviceScaleFactor(2.625).
				setUserAgent("Mozilla/5.0 (Linux; Android 11; SM-G988B Build/RP1A.200720.012; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/89.0.4389.105 Mobile Safari/537.36"));

We hope that you have liked the article. If you have any doubts or concerns, please write to us in the comments or mail us at admin@codekru.com.