---

Playwright 移动端测试

Playwright 移动端测试，主要包括模拟移动设备、地理位置、权限控制等功能。

Playwright 除了能模拟桌面浏览器，还支持 移动端设备测试，包括：

• 模拟不同手机型号（屏幕大小、分辨率、UA 等）
• 模拟触摸事件（点击、滑动、长按）
• 模拟地理位置（GPS）
• 模拟权限（摄像头、定位、通知）

这让我们能在 PC 上测试出接近真实手机的效果。

---

模拟设备

Playwright 提供了一些常见的设备配置（基于 Chrome DevTools 设备描述），可以通过 devices 调用。

实例

const { chromium, devices } = require('playwright');

(async () => {

  const iPhone = devices['iPhone 12']; // 选择设备

  const browser = await chromium.launch();

  const context = await browser.newContext({

    ...iPhone  // 应用设备配置

  });

  const page = await context.newPage();

  await page.goto('https://www.example.com');

  await page.screenshot({ path: 'mobile.png' });

  await browser.close();

})();

可模拟内容：

• 屏幕分辨率（width、height、deviceScaleFactor）
• User-Agent（模拟移动 UA）
• 触摸事件支持
• 横竖屏切换

---

模拟触摸操作

Playwright 在移动设备模式下会启用 触摸事件。

常用操作：

1、轻点

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

2、滑动/拖动

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

3、长按

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

---

模拟地理位置

可以模拟手机的 GPS 定位。

实例

const context = await browser.newContext({

  geolocation: { longitude: 116.4074, latitude: 39.9042 }, // 北京

  permissions: ['geolocation']

});

const page = await context.newPage();

await page.goto('https://www.google.com/maps');

---

模拟权限

Playwright 支持授予或拒绝常见权限，例如：

• geolocation（地理位置）
• camera（摄像头）
• microphone（麦克风）
• notifications（通知）

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

---

模拟横竖屏切换

通过修改 viewport 配置实现。

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

---

完整实例：移动端测试

实例

const { chromium, devices } = require('playwright');

(async () => {

  const pixel5 = devices['Pixel 5'];

  const browser = await chromium.launch({ headless: false });

  const context = await browser.newContext({

    ...pixel5,

    geolocation: { longitude: 121.4737, latitude: 31.2304 }, // 上海

    permissions: ['geolocation']

  });

  const page = await context.newPage();

  await page.goto('https://www.google.com/maps');

  await page.screenshot({ path: 'mobile-map.png' });

  await browser.close();

})();

---

常用 API

API	说明	示例
devices['iPhone 12']	获取设备配置	const iphone = devices['iPhone 12']
context = browser.newContext({...device})	启用设备模拟	...iPhone
page.tap(selector)	触摸点击元素	await page.tap('#btn')
page.touchscreen.tap(x,y)	在坐标点点击	await page.touchscreen.tap(100,200)
page.touchscreen.down(x,y)	手指按下	await page.touchscreen.down(100,200)
page.touchscreen.up()	手指抬起	await page.touchscreen.up()
geolocation	设置定位	{ longitude: 120, latitude: 30 }
permissions	设置权限	['geolocation','camera']
viewport	设置屏幕宽高	{ width: 812, height: 375 }
isMobile	启用移动模式	isMobile: true

---

常见设备

Playwright 内置常见设备清单，包含 iPhone 系列、Pixel 系列、iPad 等。

Playwright 常见设备清单

Playwright 内置了几十种常用设备配置（基于 Chrome DevTools 数据）。使用时通过：

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

即可获得该设备的配置参数。

iPhone 系列

设备名称	viewport	deviceScaleFactor	UA (简写)	备注
iPhone SE	375 × 667	2	Safari iOS	小屏经典款
iPhone 6	375 × 667	2	Safari iOS	旧款
iPhone 7	375 × 667	2	Safari iOS	旧款
iPhone 8	375 × 667	2	Safari iOS	常用
iPhone 8 Plus	414 × 736	3	Safari iOS	大屏
iPhone X	375 × 812	3	Safari iOS	刘海屏
iPhone 11	414 × 896	2	Safari iOS	常用
iPhone 11 Pro	375 × 812	3	Safari iOS
iPhone 11 Pro Max	414 × 896	3	Safari iOS
iPhone 12	390 × 844	3	Safari iOS	热门
iPhone 12 Pro	390 × 844	3	Safari iOS
iPhone 12 Pro Max	428 × 926	3	Safari iOS	大屏
iPhone 12 Mini	360 × 780	3	Safari iOS	小屏
iPhone 13	390 × 844	3	Safari iOS	热门
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

Google Pixel 系列

设备名称	viewport	deviceScaleFactor	UA (简写)	备注
Pixel 2	411 × 731	2.6	Chrome Android	旧款
Pixel 2 XL	411 × 823	3.5	Chrome Android	大屏
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	推荐

iPad 系列

设备名称	viewport	deviceScaleFactor	UA (简写)	备注
iPad (gen 6)	768 × 1024	2	Safari iOS	常用
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	大屏

其他 Android 机型

设备名称	viewport	deviceScaleFactor	UA (简写)	备注
Galaxy S5	360 × 640	3	Chrome Android	较老
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	热门

使用方法

实例

const { chromium, devices } = require('playwright');

(async () => {

  const iPhone = devices['iPhone 12'];

  const browser = await chromium.launch({ headless: false });

  const context = await browser.newContext({

    ...iPhone,

    geolocation: { longitude: 116.4074, latitude: 39.9042 }, // 北京

    permissions: ['geolocation']

  });

  const page = await context.newPage();

  await page.goto('https://www.example.com');

  await page.screenshot({ path: 'iphone12.png' });

  await browser.close();

})();

AI 思考中...

Playwright 文件操作

Playwright 测试