Skip to main content

模拟

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

设备​

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

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

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 12'],
      },
    },
  ],
};
export default config;

视口​

视口包含在设备中，但您可以使用 page.setViewportSize(viewportSize) 为某些测试覆盖它。

import { test, expect } from '@playwright/test';

// 使用类似纵向的视口运行此文件中的测试。
test.use({
  viewport: { width: 600, height: 900 },
});

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

同样适用于 describe 块内部。

import { test, expect } from '@playwright/test';

test.describe('locale block', () => {
  // 使用类似纵向的视口运行此 describe 块中的测试。
  test.use({ viewport: { width: 600, height: 900 } });

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

区域设置和时区​

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

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 }) => {
  // ...
});

权限​

允许应用显示系统通知。

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    permissions: ['notifications'],
  },
};
export default config;

允许测试请求当前位置。

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    permissions: ['geolocation'],
  },
};
export default config;

允许特定域的通知。

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    permissions: ['notifications'], {origin: 'https://skype.com'},
  },
};
export default config;

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

// Library
await context.clearPermissions();

地理位置​

创建一个授予 "geolocation" 权限并将地理位置设置为特定区域的测试。

import { test, expect } from '@playwright/test';

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

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

稍后更改位置：

import { test, expect } from '@playwright/test';

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

test('my test with geolocation', async ({ page, context }) => {
  // 覆盖此测试的位置
  context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
});

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

配色方案和媒体​

创建一个模拟用户 "colorScheme" 的测试。支持的值为 'light'、'dark'、'no-preference'。您还可以使用 page.emulateMedia([options]) 模拟媒体类型。

import { test, expect } from '@playwright/test';

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

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

用户代理​

用户代理包含在设备中，因此您很少需要更改它，但是如果您确实需要测试不同的用户代理，可以使用 userAgent 属性覆盖它。

import { test, expect } from '@playwright/test';

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

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

启用 JavaScript​

模拟禁用 JavaScript 的用户场景。

import { test, expect } from '@playwright/test';

test.use({ javaScriptEnabled: false });

test('test with no JavaScript', async ({ page }) => {
  // ...
});