模擬

簡介

透過 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() 覆寫某些測試的視窗。

測試檔案

同樣適用於測試檔案內。

// 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 視窗標籤並啟用觸控事件。

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() 模擬媒體類型。

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