microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-14 21:53:35 +03:00
Code Issues Projects Releases Wiki Activity
e67603db27
playwright/docs/emulation.md
Pavel e67603db27 docs(emulation): review, fix nits
2020-04-16 14:19:21 -07:00

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


Emulating popular 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


Configuring screen size, touch support, mobile viewport

Create a context with custom viewport size:

  const context = await browser.newContext({
    viewport: {
      width: 1280,
      height: 1024
    }
  });

Resize viewport for individual pages:

  await page.setViewportSize({ 'width': 1600, 'height': 1200 });

Emulate desktop device with the high-DPI screen and touch support:

  const context = await browser.newContext({
    viewport: {
      width: 2560,
      height: 1440,
    },
    deviceScaleFactor: 2,
    hasTouch: true
  });

API reference


Configuring color scheme

Create device with the dark color scheme:

  const context = await browser.newContext({
    colorScheme: 'dark'
  });

Change color scheme for individual pages:

  await page.emulateMedia({ colorScheme: 'dark' });

API reference


Locale and timezone

  const context = await browser.newContext({
    locale: 'de-DE',
    timezoneId: 'Europe/Berlin',
  });

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


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