介绍
使用 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',
},
});
