エミュレーション

はじめに

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

デバイス

Playwrightには、選択されたデスクトップ、タブレット、モバイルデバイス用のplaywright.devicesを使用するデバイスパラメータのレジストリが付属しています。これは、ユーザーエージェント、画面サイズ、ビューポート、タッチが有効になっているかどうかなど、特定のデバイスのブラウザの動作をシミュレートするために使用できます。すべてのテストは、指定されたデバイスパラメータで実行されます。

同期

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):
    iphone_13 = playwright.devices['iPhone 13']
    browser = playwright.webkit.launch(headless=False)
    context = browser.new_context(
        **iphone_13,
    )

with sync_playwright() as playwright:
    run(playwright)

非同期

import asyncio
from playwright.async_api import async_playwright, Playwright

async def run(playwright: Playwright):
    iphone_13 = playwright.devices['iPhone 13']
    browser = await playwright.webkit.launch(headless=False)
    context = await browser.new_context(
        **iphone_13,
    )

async def main():
    async with async_playwright() as playwright:
        await run(playwright)
asyncio.run(main())

ビューポート

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

テストファイル

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

同期

# Create context with given viewport
context = browser.new_context(
  viewport={ 'width': 1280, 'height': 1024 }
)

# Resize viewport for individual page
page.set_viewport_size({"width": 1600, "height": 1200})

# Emulate high-DPI
context = browser.new_context(
  viewport={ 'width': 2560, 'height': 1440 },
  device_scale_factor=2,
)

非同期

# Create context with given viewport
context = await browser.new_context(
  viewport={ 'width': 1280, 'height': 1024 }
)

# Resize viewport for individual page
await page.set_viewport_size({"width": 1600, "height": 1200})

# Emulate high-DPI
context = await browser.new_context(
  viewport={ 'width': 2560, 'height': 1440 },
  device_scale_factor=2,
)

isMobile

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

同期

context = browser.new_context(
  is_mobile=False
)

非同期

context = await browser.new_context(
  is_mobile=False
)

ロケールとタイムゾーン

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

同期

context = browser.new_context(
  locale='de-DE',
  timezone_id='Europe/Berlin',
)

非同期

context = await browser.new_context(
  locale='de-DE',
  timezone_id='Europe/Berlin',
)

パーミッション

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

同期

context = browser.new_context(
  permissions=['notifications'],
)

非同期

context = await browser.new_context(
  permissions=['notifications'],
)

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

同期

context.grant_permissions(['notifications'], origin='https://skype.com')

非同期

await context.grant_permissions(['notifications'], origin='https://skype.com')

browser_context.clear_permissions()ですべての権限を取り消します。

同期

context.clear_permissions()

非同期

await context.clear_permissions()

位置情報

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

同期

context = browser.new_context(
  geolocation={"longitude": 41.890221, "latitude": 12.492348},
  permissions=["geolocation"]
)

非同期

context = await browser.new_context(
  geolocation={"longitude": 41.890221, "latitude": 12.492348},
  permissions=["geolocation"]
)

後で場所を変更する

同期

context.set_geolocation({"longitude": 48.858455, "latitude": 2.294474})

非同期

await context.set_geolocation({"longitude": 48.858455, "latitude": 2.294474})

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

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

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

同期

# Create context with dark mode
context = browser.new_context(
  color_scheme='dark' # or 'light'
)

# Create page with dark mode
page = browser.new_page(
  color_scheme='dark' # or 'light'
)

# Change color scheme for the page
page.emulate_media(color_scheme='dark')

# Change media for page
page.emulate_media(media='print')

非同期

# Create context with dark mode
context = await browser.new_context(
  color_scheme='dark' # or 'light'
)

# Create page with dark mode
page = await browser.new_page(
  color_scheme='dark' # or 'light'
)

# Change color scheme for the page
await page.emulate_media(color_scheme='dark')

# Change media for page
await page.emulate_media(media='print')

ユーザーエージェント

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

同期

context = browser.new_context(
  user_agent='My user agent'
)

非同期

context = await browser.new_context(
  user_agent='My user agent'
)

オフライン

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

同期

context = browser.new_context(
  offline=True
)

非同期

context = await browser.new_context(
  offline=True
)

JavaScript有効

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

同期

context = browser.new_context(
  java_script_enabled=False
)

非同期

context = await browser.new_context(
  java_script_enabled=False
)