エミュレーション

はじめに

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(
  isMobile=false
)

非同期

context = await browser.new_context(
  isMobile=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
)