エミュレーション

はじめに

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

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

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