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

エミュレーション

はじめに​

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

デバイス​

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