How do I configure Playwright to emulate a mobile device with a specific browser?

Answer

Emulating Mobile Devices with Specific Browsers in Playwright

With Playwright, you can easily emulate mobile devices using specific browsers. To do this, you can configure the devices you want to emulate and Playwright will simulate browser behavior such as userAgent, screenSize, viewport, and hasTouch.

Playwright includes a registry of device parameters using playwright.devices for selected desktop, tablet, and mobile devices. You can use these parameters to simulate browser behavior for a specific device.

Here's an example of how to use playwright.devices to emulate an iPhone 12:

import { test, devices } from '@playwright/test';

const iPhone12 = devices['iPhone 12'];

test.use({ ...iPhone12 });

test('emulate iPhone 12', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Your test code here
});

You can also run tests in multiple browsers and configurations by setting up projects in the config. Add different options for each project, including emulated tablet and mobile devices. For example, you could set up a project to test against Mobile Chrome or Mobile Safari by configuring the viewport size accordingly.

In addition to emulating devices, Playwright allows you to override certain settings for some tests with page.setViewportSize(). This means that even if you are testing on an emulated device, you can still customize the viewport size for some tests.

Overall, Playwright provides extensive capabilities for emulating mobile devices using specific browsers. With its registry of device parameters and the ability to customize settings on a per-test or project basis, you have great flexibility in testing your apps across various platforms.