模擬

簡介

透過 Playwright，您可以在任何瀏覽器上測試您的應用程式，並模擬真實裝置，例如手機或平板電腦。只需設定您想要模擬的裝置，Playwright 就會模擬瀏覽器行為，例如 "userAgent"、"screenSize"、"viewport" 以及是否啟用 "hasTouch"。您也可以為所有測試或特定測試模擬 "geolocation"、"locale" 和 "timezone"，以及設定 "permissions" 以顯示通知或變更 "colorScheme"。

裝置

Playwright 隨附 裝置參數的登錄，針對選定的桌上型電腦、平板電腦和行動裝置使用 playwright.devices。它可用於模擬特定裝置的瀏覽器行為，例如使用者代理程式、螢幕尺寸、viewport 以及是否啟用觸控功能。所有測試都將使用指定的裝置參數執行。

同步

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

Viewport

Viewport 包含在裝置中，但您可以使用 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

是否考量 meta viewport 標籤以及是否啟用觸控事件。

同步

context = browser.new_context(
  isMobile=false
)

非同步

context = await browser.new_context(
  isMobile=false
)

Locale & 時區

模擬使用者 Locale 和時區，這些設定可以在設定中全域設定用於所有測試，然後為特定測試覆寫。

同步

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
)