跳到主要内容

设备模拟

简介​

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

设备模拟​

Playwright 内置了一个设备参数注册表，通过 playwright.devices 提供了一系列精选的桌面、平板和移动设备配置。这些配置可用于模拟特定设备的浏览器行为，包括用户代理、屏幕尺寸、视口大小以及是否支持触摸功能。所有测试都将在指定的设备参数下运行。

playwright.config.ts
import { defineConfig, devices } from '@playwright/test'; // 导入设备配置

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 13'],
      },
    },
  ],
});
playwright.dev 网站在 iPhone 13 模拟器中的效果

视口设置​

视口(Viewport)已包含在设备配置中，但您可以通过 page.setViewportSize() 方法在某些测试中覆盖默认设置。

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // 注意：`viewport`属性必须在解构`devices`之后定义，
        // 因为设备配置中也包含了该设备的`viewport`设置
        viewport: { width: 1280, height: 720 },
      },
    },
  ]
});

测试文件示例：

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

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

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

同样的设置也可以在测试文件内部使用。

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

test.describe('特定视口测试块', () => {
  test.use({ viewport: { width: 1600, height: 1200 } });

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

isMobile​

是否考虑 meta viewport 标签并启用触摸事件。

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // 在解构 `devices` 后定义 `isMobile` 属性很重要，
        // 因为设备配置也会定义该设备的 `isMobile` 属性。
        isMobile: false,
      },
    },
  ]
});

区域设置与时区​

模拟浏览器的区域设置和时区，可以在配置中为所有测试全局设置，然后为特定测试覆盖这些设置。

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

export default defineConfig({
  use: {
    // 模拟浏览器区域设置
    locale: 'en-GB',

    // 模拟浏览器时区
    timezoneId: 'Europe/Paris',
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

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

test('针对德语和柏林时区的测试', async ({ page }) => {
  await page.goto('https://www.bing.com');
  // ...
});
德语和柏林时区的Bing页面

请注意，这只会影响浏览器的时区和区域设置，不会影响测试运行器的时区。要设置测试运行器的时区，可以使用 TZ 环境变量。

权限管理​

允许应用显示系统通知。

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

export default defineConfig({
  use: {
    // 授予浏览器上下文指定的权限
    permissions: ['notifications'],
  },
});

为特定域名授予通知权限。

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

test.beforeEach(async ({ context }) => {
  // 在每个测试前运行，并为每个页面授权
  await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
});

test('first', async ({ page }) => {
  // 页面已获得 https://skype.com 的通知权限
});

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

// 库用法
await context.clearPermissions();

地理位置​

授予 "geolocation" 权限并将地理位置设置为特定区域。

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

export default defineConfig({
  use: {
    // 上下文地理位置
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation'],
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

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

test('带地理位置的测试', async ({ page }) => {
  // ...
});
意大利在必应地图上的地理位置

稍后更改位置：

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

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

test('带地理位置的测试', async ({ page, context }) => {
  // 为本次测试覆盖位置
  await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
});

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

配色方案与媒体模拟​

模拟用户的 "colorScheme"（配色方案）。支持的值为 'light'（亮色）和 'dark'（暗色）。您还可以通过 page.emulateMedia() 方法来模拟媒体类型。

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

export default defineConfig({
  use: {
    colorScheme: 'dark',
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
  colorScheme: 'dark' // 或 'light'
});

test('暗色模式下的测试', async ({ page }) => {
  // ...
});
Playwright 暗色模式下的网页

用户代理(User Agent)​

设备中已包含用户代理信息，因此通常无需修改。但若需测试不同的用户代理，可通过 userAgent 属性进行覆盖。

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

test.use({ userAgent: 'My user agent' });

test('用户代理测试', async ({ page }) => {
  // ...
});

离线模式​

模拟网络离线状态。

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

export default defineConfig({
  use: {
    offline: true
  },
});

JavaScript 禁用​

模拟禁用 JavaScript 的用户场景。

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

test.use({ javaScriptEnabled: false });

test('禁用 JavaScript 测试', async ({ page }) => {
  // ...
});