microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-15 14:11:50 +03:00
Code Issues Projects Releases Wiki Activity
4a4e610a22
playwright/docs/emulation.md
Pavel Feldman 3979d4f492 docs: bring snippets higher up in the docs
2020-05-02 17:21:46 -07:00

4.0 KiB
Raw Blame History

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


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.

API reference