4.0 KiB
Device and environment emulation
Playwright allows overriding various parameters of the device where the browser is running:
- viewport size, device scale factor, touch support
- locale, timezone
- color scheme
- geolocation
- etc
Most of these parameters are configured during the browser context construction, but some of them such as viewport size can be changed for individual pages.
Contents
User agent
All pages created in the context above will share the user agent specified:
const context = await browser.newContext({
userAgent: 'My user agent'
});
API reference
Viewport, color scheme
Create a context with custom viewport size:
// Create context with given viewport
const context = await browser.newContext({
viewport: { width: 1280, height: 1024 }
});
// Resize viewport for individual page
await page.setViewportSize({ width: 1600, height: 1200 });
// Emulate high-DPI
const context = await browser.newContext({
viewport: { width: 2560, height: 1440 },
deviceScaleFactor: 2,
});
// Create device with the dark color scheme:
const context = await browser.newContext({
colorScheme: 'dark'
});
// Change color scheme for the page
await page.emulateMedia({ colorScheme: 'dark' });
API reference
Devices
Playwright comes with a registry of device parameters for selected mobile devices. It can be used to simulate browser behavior on a mobile device:
const { chromium, devices } =
require('playwright');
const browser = await chromium.launch();
const pixel2 = devices['Pixel 2'];
const context = await browser.newContext({
...pixel2,
});
All pages created in the context above will share the same device parameters.
API reference
Locale & timezone
// Emulate locale and time
const context = await browser.newContext({
locale: 'de-DE',
timezoneId: 'Europe/Berlin',
});
API reference
Permissions
Allow all pages in the context to show system notifications:
const context = await browser.newContext({
permissions: ['notifications'],
});
Grant all pages in the existing context access to current location:
await context.grantPermissions(['geolocation']);
Grant notifications access from a specific domain:
await context.grantPermissions(['notifications'], {origin: 'https://skype.com'} );
Revoke all permissions:
await context.clearPermissions();
API reference
browser.newContext([options])
browserContext.grantPermissions(permissions[][, options])
browserContext.clearPermissions()
Geolocation
Create a context with "geolocation"
permissions granted:
const context = await browser.newContext({
geolocation: { longitude: 48.858455, latitude: 2.294474 },
permissions: ['geolocation']
});
Change the location later:
await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 });
Note you can only change geolocation for all pages in the context.