模拟

介绍

¥Introduction

使用 Playwright，你可以在任何浏览器上测试你的应用，也可以模拟真实的设备，例如手机或平板电脑。只需配置你想要模拟的设备，Playwright 将模拟浏览器行为，例如 "userAgent"、"screenSize"、"viewport" 以及是否启用了 "hasTouch"。你还可以为所有测试或特定测试模拟 "geolocation"、"locale" 和 "timezone"，以及设置 "permissions" 以显示通知或更改 "colorScheme"。

¥With Playwright you can test your app on any browser as well as emulate a real device such as a mobile phone or tablet. Simply configure the devices you would like to emulate and Playwright will simulate the browser behavior such as "userAgent", "screenSize", "viewport" and if it "hasTouch" enabled. You can also emulate the "geolocation", "locale" and "timezone" for all tests or for a specific test as well as set the "permissions" to show notifications or change the "colorScheme".

设备

¥Devices

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

¥Playwright comes with a registry of device parameters using Playwright.Devices for selected desktop, tablet and mobile devices. It can be used to simulate browser behavior for a specific device such as user agent, screen size, viewport and if it has touch enabled. All tests will run with the specified device parameters.

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

视口

¥Viewport

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

¥The viewport is included in the device but you can override it for some tests with Page.SetViewportSizeAsync().

测试文件：

¥Test file:

在测试文件中也是如此。

¥The same works inside a test file.

// Create context with given viewport
await using var context = await browser.NewContextAsync(new()
{
    ViewportSize = new ViewportSize() { Width = 1280, Height = 1024 }
});

// Resize viewport for individual page
await page.SetViewportSizeAsync(1600, 1200);

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

isMobile

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

¥Whether the meta viewport tag is taken into account and touch events are enabled.

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

区域设置和时区

¥Locale & Timezone

模拟浏览器的语言环境和时区，这些设置可以在配置中为所有测试全局设置，然后针对特定测试进行覆盖。

¥Emulate the browser Locale and Timezone which can be set globally for all tests in the config and then overridden for particular tests.

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

权限

¥Permissions

允许应用显示系统通知。

¥Allow app to show system notifications.

允许特定域的通知。

¥Allow notifications for a specific domain.

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

使用 BrowserContext.ClearPermissionsAsync() 撤销所有权限。

¥Revoke all permissions with BrowserContext.ClearPermissionsAsync().

await context.ClearPermissionsAsync();

地理定位

¥Geolocation

授予 "geolocation" 权限并将地理位置设置为特定区域。

¥Grant "geolocation" permissions and set geolocation to a specific area.

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

稍后更改位置：

¥Change the location later:

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

请注意，你只能更改上下文中所有页面的地理位置。

¥Note you can only change geolocation for all pages in the context.

配色方案和媒体

¥Color Scheme and Media

模拟用户 "colorScheme"。支持的值是 'light' 和 'dark'。你还可以使用 Page.EmulateMediaAsync() 模拟媒体类型。

¥Emulate the users "colorScheme". Supported values are 'light' and 'dark'. You can also emulate the media type with Page.EmulateMediaAsync().

// Create context with dark mode
await using var context = await browser.NewContextAsync(new()
{
    ColorScheme = ColorScheme.Dark
});

// Create page with dark mode
var page = await browser.NewPageAsync(new()
{
    ColorScheme = ColorScheme.Dark
});

// Change color scheme for the page
await page.EmulateMediaAsync(new()
{
    ColorScheme = ColorScheme.Dark
});

// Change media for page
await page.EmulateMediaAsync(new()
{
    Media = Media.Print
});

用户代理

¥User Agent

用户代理包含在设备中，因此你很少需要更改它，但是如果你确实需要测试不同的用户代理，你可以使用 userAgent 属性覆盖它。

¥The User Agent is included in the device and therefore you will rarely need to change it however if you do need to test a different user agent you can override it with the userAgent property.

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

离线

¥Offline

模拟网络离线。

¥Emulate the network being offline.

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

启用 JavaScript

¥JavaScript Enabled

模拟禁用 JavaScript 的用户场景。

¥Emulate a user scenario where JavaScript is disabled.

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