エミュレーション

はじめに

Playwright を使用すると、あらゆるブラウザでアプリをテストできるだけでなく、携帯電話やタブレットなどの実際のデバイスをエミュレートできます。エミュレートするデバイスを設定するだけで、Playwright は "userAgent"、"screenSize"、"viewport"、および "hasTouch" が有効になっているかどうかなどのブラウザの動作をシミュレートします。すべてのテストまたは特定のテストに対して、"geolocation"、"locale"、"timezone" をエミュレートしたり、通知を表示したり、"colorScheme" を変更したりするための "permissions" を設定したりすることもできます。

デバイス

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

メタビューポートタグが考慮され、タッチイベントが有効になっているかどうか。

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