Playwright Mobile Testing |

\\n\\n

---

\\n\\n

Playwright Mobile testing，Mainly includes mobile device simulation, geolocation, permission control, etc..Features.

\\n\\n

Playwright Besides simulating desktop browsers, also supports Mobile device testing，Includes:

\\n\\n

\\n
• Simulate different phone models (screen size, resolution, UA, etc.).）
\\n
• Simulate touch events (tap, swipe, long press)
\\n
• Simulate geographic location (GPS)
\\n
• Simulate permissions（Camera, Location, Notification)
\\n

\\n\\n

This allows us to test on a PC with results closely resembling a real mobile phone.

\\n\\n

---

\\n\\n

Emulate device

\\n\\n

Playwright Provides some common device configurations (based on Chrome DevTools Device description), can be configured via devices Call.

\\n\\n

Examples

\\n\\n

const { chromium, devices } = require('playwright');\\n\\n(async () => {\\n\\n  const iPhone = devices['iPhone 12'];// Select device\\n\\n  const browser = await chromium.launch();\\n\\n  const context = await browser.newContext({\\n    ...iPhone// Apply device configuration\\n  });\\n\\n  const page = await context.newPage();\\n\\n  await page.goto('https://www.example.com');\\n\\n  await page.screenshot({ path: 'mobile.png' });\\n\\n  await browser.close();\\n\\n})();

\\n\\n

Supported simulations:

\\n\\n

\\n
• Screen resolution（width、height、deviceScaleFactor）
\\n
• User-Agent（Simulate mobile UA)
\\n
• Touch eventSupports
\\n
• Switch between landscape and portrait modes
\\n

\\n\\n

---

\\n\\n

Simulate touch operations

\\n\\n

Playwright Enabled in mobile device mode Touch event。

\\n\\n

CommonOperation:

\\n\\n

1、Tap

\\n\\n

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

\\n\\n

2、Slide/Drag

\\n\\n

await page.touchscreen.tap(200, 300); // Click at specified coordinates\\nawait page.touchscreen.swipe(200, 300, 200, 800); // Custom wrapper, simulate slide

\\n\\n

3、Long press

\\n\\n

await page.touchscreen.down(200, 300);\\nawait page.waitForTimeout(1000); // Hold down for 1 Second\\nawait page.touchscreen.up();

\\n\\n

---

\\n\\n

Simulate geographic location

\\n\\n

Can simulate mobile phone's GPS Location。

\\n\\n

Examples

\\n\\n

const context = await browser.newContext({\\n  geolocation: { longitude: 116.4074, latitude: 39.9042 },// Beijing\\n  permissions: ['geolocation']\\n});\\n\\nconst page = await context.newPage();\\n\\nawait page.goto('https://www.google.com/maps');

\\n\\n

---

\\n\\n

Simulate permissions

\\n\\n

Playwright Supports granting or denying common permissions, such as:

\\n\\n

\\n
• geolocation（Geolocation)
\\n
• camera（Camera)
\\n
• microphone（Microphone)
\\n
• notifications（Notification)
\\n

\\n\\n

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

\\n\\n

---

\\n\\n

Simulate landscape and portrait orientation switching

\\n\\n

By modifying viewport Configuration implementation.

\\n\\n

await context.newPage({ viewport: { width: 812, height: 375 }, // Landscape mode\\n  isMobile: true\\n});

\\n\\n

---

\\n\\n

Complete Examples: Mobile Testing

\\n\\n

Examples

\\n\\n

const { chromium, devices } = require('playwright');\\n\\n(async () => {\\n\\n  const pixel5 = devices['Pixel 5'];\\n\\n  const browser = await chromium.launch({ headless: false });\\n\\n  const context = await browser.newContext({\\n    ...pixel5,\\n    geolocation: { longitude: 121.4737, latitude: 31.2304 },// Shanghai\\n    permissions: ['geolocation']\\n  });\\n\\n  const page = await context.newPage();\\n\\n  await page.goto('https://www.google.com/maps');\\n\\n  await page.screenshot({ path: 'mobile-map.png' });\\n\\n  await browser.close();\\n\\n})();

\\n\\n

---

\\n\\n

Common APIs

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

API	Description	Example
devices['iPhone 12']	Get device configuration	const iphone = devices['iPhone 12']
context = browser.newContext({...device})	Enable device emulation	...iPhone
page.tap(selector)	Tap element	await page.tap('#btn')
page.touchscreen.tap(x,y)	Click at coordinates	await page.touchscreen.tap(100,200)
page.touchscreen.down(x,y)	Press finger	await page.touchscreen.down(100,200)
page.touchscreen.up()	Lift finger	await page.touchscreen.up()
geolocation	Set Location	{ longitude: 120, latitude: 30 }
permissions	Set permissions	['geolocation','camera']
viewport	Set screen width and height	{ width: 812, height: 375 }
isMobile	Enable mobile mode	isMobile: true

\\n\\n

---

\\n\\n

Common devices

\\n\\n

Playwright Built-in Common device list，Include iPhone iPhone series, Pixel series, iPad etc.

\\n\\n

Playwright Common device list

\\n\\n

Playwright Includes dozens of built-in Common device configurations (based on Chrome DevTools data). Accessed via:

\\n\\n

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

\\n\\n

you can obtain the configuration parameters for that device.

\\n\\n

iPhone Series

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

Device name	viewport	deviceScaleFactor	UA (Abbreviation)	Notes
iPhone SE	375 × 667	2	Safari iOS	Small screen classic model
iPhone 6	375 × 667	2	Safari iOS	Older model
iPhone 7	375 × 667	2	Safari iOS	Older model
iPhone 8	375 × 667	2	Safari iOS	Common
iPhone 8 Plus	414 × 736	3	Safari iOS	Large screen
iPhone X	375 × 812	3	Safari iOS	Notch screen
iPhone 11	414 × 896	2	Safari iOS	Common
iPhone 11 Pro	375 × 812	3	Safari iOS
iPhone 11 Pro Max	414 × 896	3	Safari iOS
iPhone 12	390 × 844	3	Safari iOS	Popular
iPhone 12 Pro	390 × 844	3	Safari iOS
iPhone 12 Pro Max	428 × 926	3	Safari iOS	Large screen
iPhone 12 Mini	360 × 780	3	Safari iOS	Small screen
iPhone 13	390 × 844	3	Safari iOS	Popular
iPhone 13 Pro	390 × 844	3	Safari iOS
iPhone 13 Pro Max	428 × 926	3	Safari iOS
iPhone 13 Mini	360 × 780	3	Safari iOS

\\n\\n

Google Pixel Series

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

Device name	viewport	deviceScaleFactor	UA (Abbreviation)	Notes
Pixel 2	411 × 731	2.6	Chrome Android	Older model
Pixel 2 XL	411 × 823	3.5	Chrome Android	Large screen
Pixel 3	393 × 786	2.75	Chrome Android
Pixel 3 XL	412 × 847	3.5	Chrome Android
Pixel 4	353 × 745	2.75	Chrome Android
Pixel 4 XL	412 × 869	3.5	Chrome Android
Pixel 5	393 × 851	2.75	Chrome Android	Recommended

\\n\\n

iPad Series

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

Device name	viewport	deviceScaleFactor	UA (Abbreviation)	Notes
iPad (gen 6)	768 × 1024	2	Safari iOS	Common
iPad (gen 7)	810 × 1080	2	Safari iOS
iPad Air	820 × 1180	2	Safari iOS
iPad Mini	768 × 1024	2	Safari iOS
iPad Pro 11	834 × 1194	2	Safari iOS
iPad Pro 12.9	1024 × 1366	2	Safari iOS	Large screen

\\n\\n

Other Android models

\\n\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n

Device name	viewport	deviceScaleFactor	UA (Abbreviation)	Notes
Galaxy S5	360 × 640	3	Chrome Android	Older
Galaxy S8	360 × 740	4	Chrome Android
Galaxy S9+	412 × 846	4.5	Chrome Android
Galaxy Note 3	360 × 640	3	Chrome Android
Galaxy Note 9	414 × 846	4.5	Chrome Android
Galaxy A51/71	412 × 914	2.63	Chrome Android	Popular

\\n\\n

Usage

\\n\\n

Examples

\\n\\n

const { chromium, devices } = require('playwright');\\n\\n(async () => {\\n\\n  const iPhone = devices['iPhone 12'];\\n\\n  const browser = await chromium.launch({ headless: false });\\n\\n  const context = await browser.newContext({\\n    ...iPhone,\\n    geolocation: { longitude: 116.4074, latitude: 39.9042 },// Beijing\\n    permissions: ['geolocation']\\n  });\\n\\n  const page = await context.newPage();\\n\\n  await page.goto('https://www.example.com');\\n\\n  await page.screenshot({ path: 'iphone12.png' });\\n\\n  await browser.close();\\n\\n})();