Skip to main content

模擬

簡介​

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

裝置​

Playwright 可以透過指定 setDeviceScaleFactor、setHasTouch、setIsMobile、setScreenSize、setUserAgent 和 setViewportSize 選項來模擬各種裝置，當使用 Browser.newContext() 建立一個 context 時。

視口 (Viewport)​

視口包含在設備中，但您可以使用 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));

Locale & Timezone​

模擬使用者的區域和時區，可以在配置中全域設定所有測試，然後為特定測試覆蓋設定。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setLocale("de-DE")
  .setTimezoneId("Europe/Berlin"));
Bing in german lang and timezone

權限​

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

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" 權限並將 geolocation 設定到特定區域。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setGeolocation(41.890221, 12.492348)
  .setPermissions(Arrays.asList("geolocation")));
義大利在 Bing 地圖上的地理位置

稍後更改位置:

context.setGeolocation(new Geolocation(48.858455, 2.294474));

注意 您只能更改所有頁面的地理位置。

色彩方案和媒體​

模擬使用者的 "colorScheme"。支援的值有 'light'、'dark'、'no-preference'。你也可以使用 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));

使用者代理​

使用者代理包含在裝置中，因此您很少需要更改它。但是，如果您需要測試不同的使用者代理，您可以使用 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));