模拟

简介

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

设备

在使用 Browser.newContext() 创建上下文时，Playwright 可以通过指定 setDeviceScaleFactor、setHasTouch、setIsMobile、setScreenSize、setUserAgent 和 setViewportSize 选项来模拟各种设备。

视口

视口设置包含在设备设置中，但你可以在某些测试中使用 Page.setViewportSize() 覆盖它。

测试文件：

同样的操作在测试文件中也适用。

// 使用给定的视口创建上下文
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setViewportSize(1280, 1024));

// 调整单个页面的视口大小
page.setViewportSize(1600, 1200);

// 模拟高 DPI
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setViewportSize(2560, 1440)
  .setDeviceScaleFactor(2));

isMobile

是否考虑 meta 视口标签并启用触摸事件。

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() 模拟媒体类型。

// 创建深色模式的上下文
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setColorScheme(ColorScheme.DARK)); // 或 "light"

// 创建深色模式的页面
Page page = browser.newPage(new Browser.NewPageOptions()
  .setColorScheme(ColorScheme.DARK)); // 或 "light"

// 更改页面的颜色模式
page.emulateMedia(new Page.EmulateMediaOptions().setColorScheme(ColorScheme.DARK));

// 更改页面的媒体类型
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));