Эмуляция

Введение

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

Устройства

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

Test
Library

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

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

Viewport

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

Test
Library

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

// Создать контекст с заданным viewport
const context = await browser.newContext({
  viewport: { width: 1280, height: 1024 }
});

Файл теста:

Test
Library

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

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

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

// Создать контекст с заданным viewport
const context = await browser.newContext({
  viewport: { width: 1280, height: 1024 }
});

// Изменить размер viewport для отдельной страницы
await page.setViewportSize({ width: 1600, height: 1200 });

// Эмулировать высокое разрешение
const context = await browser.newContext({
  viewport: { width: 2560, height: 1440 },
  deviceScaleFactor: 2,
});

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

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

// Создать контекст с заданным viewport
const context = await browser.newContext({
  viewport: { width: 1600, height: 1200 }
});
const page = await context.newPage();

isMobile

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

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // Важно определить свойство `isMobile` после деструктуризации `devices`,
        // так как устройства также определяют `isMobile` для этого устройства.
        isMobile: false,
      },
    },
  ]
});

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

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

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

export default defineConfig({
  use: {
    // Эмулирует локаль пользователя.
    locale: 'en-GB',

    // Эмулирует часовой пояс пользователя.
    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');
  // ...
});

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

Разрешения

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

Test
Library

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

export default defineConfig({
  use: {
    // Предоставляет указанные разрешения контексту браузера.
    permissions: ['notifications'],
  },
});

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

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

Test
Library

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

await context.grantPermissions(['notifications'], { origin: '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'],
  },
});

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

const context = await browser.newContext({
  geolocation: { longitude: 41.890221, latitude: 12.492348 },
  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, context }) => {
  // переопределить местоположение для этого теста
  await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
});

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

Test
Library

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

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

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

// Создать контекст с темным режимом
const context = await browser.newContext({
  colorScheme: 'dark' // или 'light'
});

// Создать страницу с темным режимом
const page = await browser.newPage({
  colorScheme: 'dark' // или 'light'
});

// Изменить цветовую схему для страницы
await page.emulateMedia({ colorScheme: 'dark' });

// Изменить медиа для страницы
await page.emulateMedia({ media: 'print' });

User Agent

User Agent включен в устройство, и поэтому вам редко потребуется его изменять, однако, если вам нужно протестировать другой user agent, вы можете переопределить его с помощью свойства userAgent.

Test
Library

tests/example.spec.ts
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'
});

Офлайн

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

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

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

Включение JavaScript

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

Test
Library

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

test.use({ javaScriptEnabled: false });

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

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

Введение​

Устройства​

Viewport​

isMobile​

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

Разрешения​

Геолокация​

Цветовая схема и медиа​

User Agent​

Офлайн​

Включение JavaScript​