Перейти к основному содержимому

Эмуляция

Введение

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

Устройства

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

using Microsoft.Playwright;
using System.Threading.Tasks;

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync(new()
{
Headless = false
});
var iphone13 = playwright.Devices["iPhone 13"];
await using var context = await browser.NewContextAsync(iphone13);
playwright.dev website emulated for iPhone 13

Viewport

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

Файл теста:

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

// Создать контекст с заданным viewport
await using var context = await browser.NewContextAsync(new()
{
ViewportSize = new ViewportSize() { Width = 1280, Height = 1024 }
});

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

// Эмулировать высокое разрешение DPI
await using var context = await browser.NewContextAsync(new()
{
ViewportSize = new ViewportSize() { Width = 2560, Height = 1440 },
DeviceScaleFactor = 2
});

isMobile

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

await using var context = await browser.NewContextAsync(new()
{
IsMobile = false
});

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

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

await using var context = await browser.NewContextAsync(new()
{
Locale = "de-DE",
TimezoneId = "Europe/Berlin"
});
Bing in german lang and timezone

Разрешения

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

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

await context.GrantPermissionsAsync(new[] { "notifications" }, origin: "https://skype.com");

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

await context.ClearPermissionsAsync();

Геолокация

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

await using var context = await browser.NewContextAsync(new()
{
Permissions = new[] { "geolocation" },
Geolocation = new Geolocation() { Longitude = 41.890221, Latitude = 12.492348 }
});
geolocation for italy on bing maps

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

await context.SetGeolocationAsync(new Geolocation() { Longitude = 48.858455, Latitude = 2.294474 });

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

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

Эмулируйте "colorScheme" пользователя. Поддерживаемые значения: 'light' и 'dark'. Вы также можете эмулировать тип медиа с помощью Page.EmulateMediaAsync().

// Создать контекст с темным режимом
await using var context = await browser.NewContextAsync(new()
{
ColorScheme = ColorScheme.Dark
});

// Создать страницу с темным режимом
var page = await browser.NewPageAsync(new()
{
ColorScheme = ColorScheme.Dark
});

// Изменить цветовую схему для страницы
await page.EmulateMediaAsync(new()
{
ColorScheme = ColorScheme.Dark
});

// Изменить медиа для страницы
await page.EmulateMediaAsync(new()
{
Media = Media.Print
});
playwright web in dark mode

User Agent

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

var context = await browser.NewContextAsync(new() { UserAgent = "My User Agent" });

Офлайн

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

var context = await browser.NewContextAsync(new() { Offline = true });

Включение JavaScript

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

var context = await browser.NewContextAsync(new() { JavaScriptEnabled = false });