模拟

简介

使用 Playwright，你可以在任何浏览器上测试应用程序，还可以模拟真实设备，如手机或平板电脑。只需配置你想要模拟的设备，Playwright 就会模拟浏览器行为，如 "userAgent"（用户代理）、"screenSize"（屏幕尺寸）、"viewport"（视口）以及是否启用 "hasTouch"（触摸功能）。你还可以为所有测试或特定测试模拟 "geolocation"（地理位置）、"locale"（区域设置）和 "timezone"（时区），以及设置 "permissions"（权限）以显示通知或更改 "colorScheme"（颜色模式）。

设备

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

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

视口

视口设置包含在设备设置中，但你可以在某些测试中使用 Page.SetViewportSizeAsync() 覆盖它。

测试文件： 同样的操作在测试文件中也适用。

// 使用给定的视口创建上下文
await using var context = await browser.NewContextAsync(new()
{
    ViewportSize = new ViewportSize() { Width = 1280, Height = 1024 }
});

// 调整单个页面的视口大小
await page.SetViewportSizeAsync(1600, 1200);

// 模拟高 DPI
await using var context = await browser.NewContextAsync(new()
{
    ViewportSize = new ViewportSize() { Width = 2560, Height = 1440 },
    DeviceScaleFactor = 2
});

isMobile

是否考虑 meta 视口标签并启用触摸事件。

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

区域设置与时区

模拟浏览器的区域设置和时区，这些设置可以在配置中为所有测试全局设置，然后在特定测试中覆盖。

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

权限

允许应用显示系统通知。 允许特定域发送通知。

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

之后更改位置：

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

用户代理

用户代理包含在设备中，因此你很少需要更改它。但是，如果你确实需要测试不同的用户代理，可以使用 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 });