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
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.
#
DevicesPlaywright 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#
User agentAll pages created in the context above will share the user agent specified:
const context = await browser.newContext({ userAgent: 'My user agent'});
#
API reference#
ViewportCreate a context with custom viewport size:
// Create context with given viewportconst context = await browser.newContext({ viewport: { width: 1280, height: 1024 }});
// Resize viewport for individual pageawait page.setViewportSize({ width: 1600, height: 1200 });
// Emulate high-DPIconst context = await browser.newContext({ viewport: { width: 2560, height: 1440 }, deviceScaleFactor: 2,});
#
API reference#
Locale & timezone// Emulate locale and timeconst context = await browser.newContext({ locale: 'de-DE', timezoneId: 'Europe/Berlin',});
#
API reference#
PermissionsAllow 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()
#
GeolocationCreate 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.
#
API reference#
Color scheme and mediaCreate a context with dark or light mode. Pages created in this context will follow this color scheme preference.
// Create context with dark modeconst context = await browser.newContext({ colorScheme: 'dark' // or 'light'});
// Create page with dark modeconst page = await browser.newPage({ colorScheme: 'dark' // or 'light'});
// Change color scheme for the pageawait page.emulateMedia({ colorScheme: 'dark' });
// Change media for pageawait page.emulateMedia({ media: 'print' });