模拟
引言
使用 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));

用户代理
用户代理包含在设备模拟中,因此你很少需要更改它。但是,如果你确实需要测试不同的用户代理,可以使用 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));