エミュレーション

はじめに

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