Device and environment emulation

• 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.

All pages created in the context above will share the user agent specified:

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({
});
// Change color scheme for the page
await page.emulateMedia({ colorScheme: 'dark' });

API reference

• browser.newContext([options])
• page.setViewportSize(viewportSize)

const { chromium, devices } =
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

• playwright.devices

Locale & timezone

API reference

• browser.newContext([options])

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']);

Revoke all permissions:

await context.clearPermissions();

API reference

• browser.newContext([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:

API reference