跳到主要內容

模擬

簡介​

透過 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"));
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 權限，並將地理位置設定為特定區域。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setGeolocation(41.890221, 12.492348)
  .setPermissions(Arrays.asList("geolocation")));
geolocation for italy on bing maps

稍後變更位置

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

使用者代理程式​

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