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

エミュレーション

はじめに​

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