Skip to main content

模擬

簡介

透過 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)
playwright.dev website emulated for iPhone 13

檢視區

檢視區包含在裝置中,但您可以使用 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,
)

isMobile

是否考慮 meta viewport 標籤並啟用觸控事件。

context = browser.new_context(
is_mobile=False
)

語言環境與時區

模擬瀏覽器的語言環境與時區,可以在設定檔中為所有測試全域設定,然後針對特定測試覆寫。

context = browser.new_context(
locale='de-DE',
timezone_id='Europe/Berlin',
)
Bing in german lang and timezone

權限

允許應用程式顯示系統通知。

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

允許特定網域的通知。

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

使用 browser_context.clear_permissions() 撤銷所有權限。

context.clear_permissions()

地理位置

授予 "geolocation" 權限並將地理位置設定為特定區域。

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

稍後變更位置:

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')
playwright web in dark mode

User Agent

User Agent 包含在裝置中,因此您很少需要變更它,但如果您需要測試不同的使用者代理,可以使用 userAgent 屬性覆寫它。

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

離線

模擬網路離線。

context = browser.new_context(
offline=True
)

JavaScript 啟用

模擬停用 JavaScript 的使用者情境。

context = browser.new_context(
java_script_enabled=False
)