Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。

介绍
使用 Playwright，你可以在任何浏览器上测试你的应用，也可以模拟真实的设备，例如手机或平板电脑。只需配置你想要模拟的设备，Playwright 将模拟浏览器行为，例如 "userAgent"、"screenSize"、"viewport" 以及是否启用了 "hasTouch"。你还可以为所有测试或特定测试模拟 "geolocation"、"locale" 和 "timezone"，以及设置 "permissions" 以显示通知或更改 "colorScheme"。

设备
Playwright 为选定的台式机、平板电脑和移动设备提供了使用 playwright.devices 的 设备参数注册表。它可用于模拟特定设备的浏览器行为，例如用户代理、屏幕尺寸、视口以及是否启用了触摸。所有测试都将使用指定的设备参数运行。

Test
Library
playwright.config.ts
import { defineConfig, devices } from '@playwright/test'; // import devices

export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
{
name: 'Mobile Safari',
use: {
...devices['iPhone 13'],
},
},
],
});
视口
视口包含在设备中，但你可以使用 page.setViewportSize() 覆盖它以进行某些测试。

Test
Library
playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
// It is important to define the viewport property after destructuring devices,
// since devices also define the viewport for that device.
viewport: { width: 1280, height: 720 },
},
},
]
});
测试文件：

Test
Library
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
viewport: { width: 1600, height: 1200 },
});

test('my test', async ({ page }) => {
// ...
});

在测试文件中也是如此。
Test
Library
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('specific viewport block', () => {
test.use({ viewport: { width: 1600, height: 1200 } });

test('my test', async ({ page }) => {
// ...
});
});

isMobile
是否考虑元视口标签并启用触摸事件。
playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
// It is important to define the isMobile property after destructuring devices,
// since devices also define the isMobile for that device.
isMobile: false,
},
},
]
});

区域设置和时区
模拟用户区域设置和时区，可以为配置中的所有测试进行全局设置，然后针对特定测试进行覆盖。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
// Emulates the user locale.
locale: 'en-GB',

// Emulates the user timezone.

timezoneId: 'Europe/Paris',
},
});

Test
Library
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
locale: 'de-DE',
timezoneId: 'Europe/Berlin',
});

test('my test for de lang in Berlin timezone', async ({ page }) => {
await page.goto('https://www.bing.com');
// ...
});
权限
允许应用显示系统通知。

Test
Library
playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
// Grants specified permissions to the browser context.
permissions: ['notifications'],
},
});

允许特定域的通知。

Test
Library
tests/example.spec.ts
import { test } from '@playwright/test';

test.beforeEach(async ({ context }) => {
// Runs before each test and signs in each page.
await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
});

test('first', async ({ page }) => {
// page has notifications permission for https://skype.com.
});

使用 browserContext.clearPermissions() 撤销所有权限。

// Library
await context.clearPermissions();
地理定位
授予 "geolocation" 权限并将地理位置设置为特定区域。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
// Context geolocation
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: ['geolocation'],
},
});
Test
Library
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
geolocation: { longitude: 41.890221, latitude: 12.492348 },
permissions: ['geolocation'],
});

test('my test with geolocation', async ({ page }) => {
// ...
});

稍后更改位置：

Test
Library
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
geolocation: { longitude: 41.890221, latitude: 12.492348 },
permissions: ['geolocation'],
});

test('my test with geolocation', async ({ page, context }) => {
// overwrite the location for this test
await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
});

请注意，你只能更改上下文中所有页面的地理位置。

配色方案和媒体
模拟用户 "colorScheme"。支持的值为 'light'、'dark'、'no-preference'。你还可以使用 page.emulateMedia() 模拟媒体类型。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
colorScheme: 'dark',
},
});