メインコンテンツにスキップ

エミュレーション

はじめに​

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

デバイス​

Playwright は、Browser.newContext() でコンテキストを作成する際に、setDeviceScaleFactor、setHasTouch、setIsMobile、setScreenSize、setUserAgent、setViewportSize オプションを指定することで、様々なデバイスをエミュレートできます。

ビューポート​

ビューポートはデバイスに含まれていますが、一部のテストでは Page.setViewportSize() でオーバーライドできます。

テストファイル

テストファイル内でも同様に動作します。

// Create context with given viewport
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setViewportSize(1280, 1024));

// Resize viewport for individual page
page.setViewportSize(1600, 1200);

// Emulate high-DPI
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setViewportSize(2560, 1440)
  .setDeviceScaleFactor(2));

isMobile​

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

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .isMobile(false));

ロケールとタイムゾーン​

ブラウザのロケールとタイムゾーンをエミュレートします。これらは設定ですべてのテストに対してグローバルに設定でき、特定のテストでオーバーライドできます。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setLocale("de-DE")
  .setTimezoneId("Europe/Berlin"));
Bing in german lang and timezone

パーミッション​

アプリがシステム通知を表示することを許可します。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setPermissions(Arrays.asList("notifications")));

特定のドメインの通知を許可します。

context.grantPermissions(Arrays.asList("notifications"),
  new BrowserContext.GrantPermissionsOptions().setOrigin("https://skype.com"));

BrowserContext.clearPermissions() ですべてのパーミッションを取り消します。

context.clearPermissions();

位置情報​

"geolocation"パーミッションを付与し、位置情報を特定のエリアに設定します。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setGeolocation(41.890221, 12.492348)
  .setPermissions(Arrays.asList("geolocation")));
geolocation for italy on bing maps

後で場所を変更する

context.setGeolocation(new Geolocation(48.858455, 2.294474));

注: 位置情報はコンテキスト内のすべてのページに対してのみ変更できます。

カラースキームとメディア​

ユーザーの "colorScheme" をエミュレートします。サポートされている値は 'light' と 'dark' です。また、Page.emulateMedia() でメディアタイプをエミュレートすることもできます。

// Create context with dark mode
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setColorScheme(ColorScheme.DARK)); // or "light"

// Create page with dark mode
Page page = browser.newPage(new Browser.NewPageOptions()
  .setColorScheme(ColorScheme.DARK)); // or "light"

// Change color scheme for the page
page.emulateMedia(new Page.EmulateMediaOptions().setColorScheme(ColorScheme.DARK));

// Change media for page
page.emulateMedia(new Page.EmulateMediaOptions().setMedia(Media.PRINT));
playwright web in dark mode

ユーザーエージェント​

ユーザーエージェントはデバイスに含まれているため、変更する必要はめったにありませんが、異なるユーザーエージェントをテストする必要がある場合は、userAgentプロパティでオーバーライドできます。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setUserAgent("My user agent"));

オフライン​

ネットワークがオフラインであることをエミュレートします。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setOffline(true));

JavaScript有効​

JavaScriptが無効になっているユーザーシナリオをエミュレートします。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .javaScriptEnabled(false));