Playwright Mobile Testing

Playwright Mobile Testing, mainly including functions such as simulating mobile devices, geolocation, and permission control.

In addition to simulating desktop browsers, Playwright also supportsmobile device testing, including:

• Simulating different phone models (screen size, resolution, UA, etc.)
• Simulating touch events (tap, swipe, long press)
• Simulating geolocation (GPS)
• Simulating permissions (camera, location, notifications)

This allows us to test on a PC with effects close to a real phone.

Simulating Devices

Playwright provides some common device configurations (based onChrome DevToolsdevice descriptors), and can bedevicesinvoked.

What can be simulated:

• Screen resolution（width、height、deviceScaleFactor）
• User-Agent(simulated mobile UA)
• Touch event support
• Landscape/portrait switching

Simulating Touch Operations

Playwright enablestouch events。

Common operations:

1. Tap

await page.tap('button#submit');

2. Swipe/Drag

await page.touchscreen.tap(200, 300); // 点击指定坐标
await page.touchscreen.swipe(200, 300, 200, 800); // 自定义封装，模拟滑动

3. Long press

await page.touchscreen.down(200, 300);
await page.waitForTimeout(1000); // 按住 1 秒
await page.touchscreen.up();

Simulating Geolocation

Can simulate the phone'sGPS positioning。

Simulating Permissions

Playwright supports granting or denying common permissions, for example:

• geolocation(Geolocation)
• camera(Camera)
• microphone(Microphone)
• notifications(Notifications)

const context = await browser.newContext({
  permissions: ['geolocation', 'notifications']
});

Simulating Landscape/Portrait Switch

By modifyingviewportthe configuration.

await context.newPage({
  viewport: { width: 812, height: 375 }, // 横屏
  isMobile: true
});

Complete Example: Mobile Testing

Common APIs

Common Devices

Playwright has a built-in list of common devices, includingiPhone series, Pixel series, iPad, etc.

Playwright Common Device List

Playwright includes dozens of common device configurations (based on Chrome DevTools data). When using, via:

const { devices } = require('playwright');
const iphone = devices['iPhone 12'];

You can get the configuration parameters of that device.

iPhone Series

Google Pixel Series

iPad Series

Other Android Models

Usage