模擬
簡介
透過 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 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"
});

權限
允許應用程式顯示系統通知。
允許特定網域的通知。
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
});

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