模擬

簡介

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

視口 (Viewport)

視口包含在設備中，但您可以在某些測試中覆蓋它，使用 Page.SetViewportSizeAsync()。

測試檔案:

在測試文件內部也是一樣的。

// 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

無論是否考慮 meta viewport 標籤並啟用觸控事件。

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

Locale & Timezone

模擬使用者的區域和時區，可以在配置中全域設定所有測試，然後為特定測試覆蓋設定。

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" 權限並將 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'、'no-preference'。你也可以使用 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
});

使用者代理

使用者代理包含在裝置中，因此您很少需要更改它。但是，如果您需要測試不同的使用者代理，您可以使用 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 });