Skip to main content

模拟

介绍​

¥Introduction

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

¥With Playwright you can test your app on any browser as well as emulate a real device such as a mobile phone or tablet. Simply configure the devices you would like to emulate and Playwright will simulate the browser behavior such as "userAgent", "screenSize", "viewport" and if it "hasTouch" enabled. You can also emulate the "geolocation", "locale" and "timezone" for all tests or for a specific test as well as set the "permissions" to show notifications or change the "colorScheme".

设备​

¥Devices

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

¥Playwright can emulate various devices by specifying setDeviceScaleFactor, setHasTouch, setIsMobile, setScreenSize, setUserAgent and setViewportSize options when creating a context with Browser.newContext().

视口​

¥Viewport

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

¥The viewport is included in the device but you can override it for some tests with Page.setViewportSize().

测试文件：

¥Test file:

在测试文件中也是如此。

¥The same works inside a test file.

// 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​

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

¥Whether the meta viewport tag is taken into account and touch events are enabled.

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .isMobile(false));

区域设置和时区​

¥Locale & Timezone

模拟浏览器的语言环境和时区，这些设置可以在配置中为所有测试全局设置，然后针对特定测试进行覆盖。

¥Emulate the browser Locale and Timezone which can be set globally for all tests in the config and then overridden for particular tests.

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

权限​

¥Permissions

允许应用显示系统通知。

¥Allow app to show system notifications.

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setPermissions(Arrays.asList("notifications")));

允许特定域的通知。

¥Allow notifications for a specific domain.

context.grantPermissions(Arrays.asList("notifications"),
  new BrowserContext.GrantPermissionsOptions().setOrigin("https://skype.com"));

使用 BrowserContext.clearPermissions() 撤销所有权限。

¥Revoke all permissions with BrowserContext.clearPermissions().

context.clearPermissions();

地理定位​

¥Geolocation

授予 "geolocation" 权限并将地理位置设置为特定区域。

¥Grant "geolocation" permissions and set geolocation to a specific area.

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

稍后更改位置：

¥Change the location later:

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

请注意，你只能更改上下文中所有页面的地理位置。

¥Note you can only change geolocation for all pages in the context.

配色方案和媒体​

¥Color Scheme and Media

模拟用户 "colorScheme"。支持的值是 'light' 和 'dark'。你还可以使用 Page.emulateMedia() 模拟媒体类型。

¥Emulate the users "colorScheme". Supported values are 'light' and 'dark'. You can also emulate the media type with 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

用户代理​

¥User Agent

用户代理包含在设备中，因此你很少需要更改它，但是如果你确实需要测试不同的用户代理，你可以使用 userAgent 属性覆盖它。

¥The User Agent is included in the device and therefore you will rarely need to change it however if you do need to test a different user agent you can override it with the userAgent property.

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setUserAgent("My user agent"));

离线​

¥Offline

模拟网络离线。

¥Emulate the network being offline.

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setOffline(true));

启用 JavaScript​

¥JavaScript Enabled

模拟禁用 JavaScript 的用户场景。

¥Emulate a user scenario where JavaScript is disabled.

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .javaScriptEnabled(false));