Эмуляция

Введение

С помощью Playwright вы можете протестировать ваше приложение на любом браузере, а также смоделировать реальное устройство, такое как мобильный телефон или планшет. Просто настройте устройства, которые вы хотите эмулировать, и Playwright будет имитировать поведение браузера, например, "userAgent", "screenSize", "viewport" и если оно "hasTouch" включено. Вы также можете эмулировать "geolocation", "locale" и "timezone" для всех тестов или для конкретного теста, а также установить "permissions" для отображения уведомлений или изменения "colorScheme".

Устройства

Playwright поставляется с реестром параметров устройств с использованием playwright.devices для выбранных настольных, планшетных и мобильных устройств. Он может использоваться для имитации поведения браузера для определенного устройства, такого как пользовательский агент, размер экрана, область просмотра и если оно имеет сенсорный ввод. Все тесты будут выполняться с указанными параметрами устройства.

Тест
Библиотека

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'],
      },
    },
  ],
});

const { chromium, devices } = require('playwright');
const browser = await chromium.launch();

const iphone13 = devices['iPhone 13'];
const context = await browser.newContext({
  ...iphone13,
});

playwright.dev website emulated for iPhone 13

Область просмотра

Область просмотра включена в устройство, но вы можете переопределить ее для некоторых тестов с помощью page.setViewportSize().

Тест
Библиотека

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 },
      },
    },
  ]
});

// Create context with given viewport
const context = await browser.newContext({
  viewport: { width: 1280, height: 1024 }
});

Файл теста:

Тест
Библиотека

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

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

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

// Create context with given viewport
const context = await browser.newContext({
  viewport: { width: 1280, height: 1024 }
});

// Resize viewport for individual page
await page.setViewportSize({ width: 1600, height: 1200 });

// Emulate high-DPI
const context = await browser.newContext({
  viewport: { width: 2560, height: 1440 },
  deviceScaleFactor: 2,
});

То же самое работает внутри файла теста.

Тест
Библиотека

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

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

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

// Create context with given viewport
const context = await browser.newContext({
  viewport: { width: 1600, height: 1200 }
});
const page = await context.newPage();

isMobile

Учитывается ли тег мета viewport и включены ли сенсорные события.

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,
      },
    },
  ]
});

Локаль и часовой пояс

Эмулируйте локаль и часовой пояс пользователя, которые можно установить глобально для всех тестов в конфигурации, а затем переопределить для отдельных тестов.

import { defineConfig } from '@playwright/test';

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

    // Emulates the user timezone.
    timezoneId: 'Europe/Paris',
  },
});

Тест
Библиотека

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

const context = await browser.newContext({
  locale: 'de-DE',
  timezoneId: 'Europe/Berlin',
});

Разрешения

Разрешить приложению отображать системные уведомления.

Тест
Библиотека

import { defineConfig } from '@playwright/test';

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

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

Разрешить уведомления для определенного домена.

Тест
Библиотека

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

await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });

Отменить все разрешения с помощью browserContext.clearPermissions().

// Library
await context.clearPermissions();

Геолокация

Предоставьте "geolocation" разрешения и установите геолокацию в определенном месте.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Context geolocation
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation'],
  },
});

Тест
Библиотека

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

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

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

const context = await browser.newContext({
  geolocation: { longitude: 41.890221, latitude: 12.492348 },
  permissions: ['geolocation']
});

Изменить расположение позже:

Тест
Библиотека

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 });
});

await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });

Примечание вы можете изменить геолокацию только для всех страниц в контексте.

Схема цветов и медиа

Эмулируйте пользовательскую "colorScheme". Допустимые значения — 'light' и 'dark'. Вы также можете смоделировать тип медиа с помощью page.emulateMedia().

import { defineConfig } from '@playwright/test';

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

Тест
Библиотека

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

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

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

// Create context with dark mode
const context = await browser.newContext({
  colorScheme: 'dark' // or 'light'
});

// Create page with dark mode
const page = await browser.newPage({
  colorScheme: 'dark' // or 'light'
});

// Change color scheme for the page
await page.emulateMedia({ colorScheme: 'dark' });

// Change media for page
await page.emulateMedia({ media: 'print' });

Пользовательский агент

Пользовательский агент включён в устройство, и поэтому вам редко придётся его изменять. Однако, если вам нужно протестировать другой пользовательский агент, вы можете переопределить его с помощью свойства userAgent.

Тест
Библиотека

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

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

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

const context = await browser.newContext({
  userAgent: 'My user agent'
});

Офлайн

Эмулируйте отсутствие подключения к сети.

import { defineConfig } from '@playwright/test';

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

JavaScript включён

Эмулируйте сценарий пользователя, где JavaScript отключён.

Тест
Библиотека

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

test.use({ javaScriptEnabled: false });

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

const context = await browser.newContext({
  javaScriptEnabled: false
});

Введение​

Устройства​

Область просмотра​

isMobile​

Локаль и часовой пояс​

Разрешения​

Геолокация​

Схема цветов и медиа​

Пользовательский агент​

Офлайн​

JavaScript включён​