模擬
簡介
透過 Playwright,您可以在任何瀏覽器上測試您的應用程式,並模擬真實裝置(如手機或平板電腦)。只需簡單設定您想要模擬的裝置,Playwright 就會模擬瀏覽器行為,例如 "userAgent"
、"screenSize"
、"viewport"
以及是否啟用 "hasTouch"
。您也可以針對所有測試或特定測試模擬 "geolocation"
、"locale"
和 "timezone"
,以及設定 "permissions"
來顯示通知或變更 "colorScheme"
。
裝置
Playwright 可以透過在使用 Browser.newContext() 建立情境時指定 setDeviceScaleFactor
、setHasTouch
、setIsMobile
、setScreenSize
、setUserAgent
和 setViewportSize
選項來模擬各種裝置。
檢視區
檢視區包含在裝置中,但您可以使用 Page.setViewportSize() 為某些測試覆寫它。
測試檔案:
同樣的方式也適用於測試檔案中。
// Create context with given viewport
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setViewportSize(1280, 1024));
// Resize viewport for individual page
page.setViewportSize(1600, 1200);
// Emulate high-DPI
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setViewportSize(2560, 1440)
.setDeviceScaleFactor(2));
isMobile
是否考慮 meta viewport 標籤並啟用觸控事件。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.isMobile(false));
語言環境與時區
模擬瀏覽器的語言環境與時區,可以在設定檔中為所有測試全域設定,然後針對特定測試覆寫。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setLocale("de-DE")
.setTimezoneId("Europe/Berlin"));

權限
允許應用程式顯示系統通知。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setPermissions(Arrays.asList("notifications")));
允許特定網域的通知。
context.grantPermissions(Arrays.asList("notifications"),
new BrowserContext.GrantPermissionsOptions().setOrigin("https://skype.com"));
使用 BrowserContext.clearPermissions() 撤銷所有權限。
context.clearPermissions();
地理位置
授予 "geolocation"
權限並將地理位置設定為特定區域。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setGeolocation(41.890221, 12.492348)
.setPermissions(Arrays.asList("geolocation")));

稍後變更位置:
context.setGeolocation(new Geolocation(48.858455, 2.294474));
注意: 您只能變更情境中所有頁面的地理位置。
色彩方案與媒體
模擬使用者的 "colorScheme"
。支援的值為 'light' 和 'dark'。您也可以使用 Page.emulateMedia() 模擬媒體類型。
// Create context with dark mode
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setColorScheme(ColorScheme.DARK)); // or "light"
// Create page with dark mode
Page page = browser.newPage(new Browser.NewPageOptions()
.setColorScheme(ColorScheme.DARK)); // or "light"
// Change color scheme for the page
page.emulateMedia(new Page.EmulateMediaOptions().setColorScheme(ColorScheme.DARK));
// Change media for page
page.emulateMedia(new Page.EmulateMediaOptions().setMedia(Media.PRINT));

User Agent
User Agent
包含在裝置中,因此您很少需要變更它,但如果您需要測試不同的使用者代理,可以使用 userAgent
屬性覆寫它。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setUserAgent("My user agent"));
離線
模擬網路離線。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setOffline(true));
JavaScript 啟用
模擬停用 JavaScript 的使用者情境。
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.javaScriptEnabled(false));