Эмуляция

Введение

С помощью 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

Примечание: Предварительно настроенные устройства предполагают использование определённой платформы. Например, «Desktop Chrome» будет использовать строку пользовательского агента для Windows.

Если вы хотите использовать пользовательский агент, соответствующий платформе, на которой запускаются тесты, рекомендуем удалить свойство user agent.

const context = await browser.newContext({
  ...devices['Desktop Chrome'],
  userAgent: undefined,
});

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

Область просмотра задаётся параметрами устройства, но для некоторых тестов её можно переопределить с помощью 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

Учитывается ли тег meta 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 browser locale.
    locale: 'en-GB',

    // Emulates the browser 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',
});

Обратите внимание: это влияет только на часовой пояс и локаль браузера, но не на часовой пояс среды выполнения тестов. Чтобы задать часовой пояс среды выполнения тестов, используйте переменную среды TZ.

Разрешения

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

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

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 включён​