设备模拟

引言

使用 Playwright，您可以在任何浏览器上测试您的应用程序，以及模拟真实的设备，例如手机或平板电脑。只需配置您想要模拟的设备，Playwright 就会模拟浏览器的行为，例如 "userAgent"、"screenSize"、"viewport" 以及是否启用 "hasTouch"。您还可以为所有测试或特定测试模拟 "geolocation"、"locale" 和 "timezone"，并设置 "permissions" 以显示通知或更改 "colorScheme"。

设备

Playwright 使用 playwright.devices 提供了一份包含精选桌面、平板电脑和移动设备参数的注册表。它可用于模拟特定设备的浏览器行为，例如 user agent、屏幕尺寸、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())

视口

视口包含在设备参数中，但您可以通过 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
)

区域设置与时区

模拟浏览器的区域设置和时区，这可以在配置中全局设置，然后为特定测试进行覆盖。

同步

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
)