Testing Mobile Web Applications with Playwright

Mobile devices have become the primary way people access the web, and ensuring that your web applications work seamlessly across various mobile platforms is critical. Playwright makes testing mobile web applications easier by providing built-in support for device emulation, responsive testing, and even geolocation simulation.

Read the previous Playwright Articles here.

Medium Free Member can read it here.

Photo by dlxmedia.hu on Unsplash

1. Emulating Mobile Devices

Playwright provides device descriptors that emulate various mobile devices, such as iPhones, Android phones, and tablets. These descriptors include device characteristics like screen size, user-agent strings, and default viewport settings.

To start, you can use Playwright’s built-in devices list, which includes popular devices such as iPhone 12, Google Pixel, and iPad:

1.1 Using Device Emulation

Here’s an example of launching a mobile browser emulating an iPhone 12:

import { chromium, devices } from 'playwright';
// Load device descriptor for iPhone 12
const iPhone12 = devices['iPhone 12'];
(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...iPhone12 // Apply iPhone…