2020-04-16 23:54:21 +03:00
# Device and environment emulation
2020-04-17 00:19:21 +03:00
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.
2020-04-20 05:42:40 +03:00
#### Contents
- [User agent ](#user-agent )
- [Viewport, color scheme ](#viewport-color-scheme )
2020-04-20 20:29:01 +03:00
- [Devices ](#devices )
2020-04-20 05:42:40 +03:00
- [Locale & Timezone ](#locale--timezone )
- [Permissions ](#permissions )
- [Geolocation ](#geolocation )
2020-04-16 23:54:21 +03:00
2020-04-20 05:42:40 +03:00
< br / >
2020-04-17 00:19:21 +03:00
2020-04-20 05:42:40 +03:00
## User agent
2020-04-17 00:19:21 +03:00
2020-05-03 03:21:46 +03:00
All pages created in the context above will share the user agent specified:
2020-04-16 23:54:21 +03:00
```js
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
userAgent: 'My user agent'
});
2020-04-16 23:54:21 +03:00
```
2020-04-17 00:19:21 +03:00
2020-04-16 23:54:21 +03:00
#### API reference
- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
< br / >
2020-04-20 05:42:40 +03:00
## Viewport, color scheme
2020-04-17 00:19:21 +03:00
2020-04-16 23:54:21 +03:00
Create a context with custom viewport size:
2020-04-17 00:19:21 +03:00
2020-04-16 23:54:21 +03:00
```js
2020-05-03 03:21:46 +03:00
// Create context with given viewport
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
2020-05-03 03:21:46 +03:00
viewport: { width: 1280, height: 1024 }
2020-04-21 00:04:49 +03:00
});
2020-04-16 23:54:21 +03:00
2020-05-03 03:21:46 +03:00
// Resize viewport for individual page
await page.setViewportSize(
{ 'width': 1600, 'height': 1200 });
2020-04-17 00:19:21 +03:00
2020-05-03 03:21:46 +03:00
// Emulate high-DPI
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
2020-05-03 03:21:46 +03:00
viewport: { width: 2560, height: 1440 },
2020-04-21 00:04:49 +03:00
deviceScaleFactor: 2,
});
2020-04-16 23:54:21 +03:00
2020-05-03 03:21:46 +03:00
// Create device with the dark color scheme:
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
colorScheme: 'dark'
});
2020-04-17 00:19:21 +03:00
2020-05-03 03:21:46 +03:00
// Change color scheme for the page
2020-04-21 00:04:49 +03:00
await page.emulateMedia({ colorScheme: 'dark' });
2020-04-17 00:19:21 +03:00
```
#### API reference
- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
2020-04-20 20:16:56 +03:00
- [`page.emulateMedia([options])`](./api.md#pageemulatemediaoptions)
2020-04-20 05:42:40 +03:00
- [`page.setViewportSize(viewportSize)` ](./api.md#pagesetviewportsizeviewportsize )
2020-04-17 00:19:21 +03:00
2020-04-16 23:54:21 +03:00
< br / >
2020-04-20 05:42:40 +03:00
## 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:
2020-04-17 00:19:21 +03:00
```js
2020-05-03 03:21:46 +03:00
const { chromium, devices } =
require('playwright');
2020-04-21 00:04:49 +03:00
const browser = await chromium.launch();
2020-04-20 05:42:40 +03:00
2020-04-21 00:04:49 +03:00
const pixel2 = devices['Pixel 2'];
const context = await browser.newContext({
...pixel2,
});
2020-04-17 00:19:21 +03:00
```
2020-04-20 05:42:40 +03:00
All pages created in the context above will share the same device parameters.
2020-04-17 00:19:21 +03:00
#### API reference
2020-04-20 05:42:40 +03:00
- [`playwright.devices` ](./api.md#playwrightdevices )
2020-04-17 00:19:21 +03:00
- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
< br / >
2020-04-16 23:54:21 +03:00
2020-04-20 05:42:40 +03:00
## Locale & timezone
2020-04-16 23:54:21 +03:00
```js
2020-05-03 03:21:46 +03:00
// Emulate locale and time
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
locale: 'de-DE',
timezoneId: 'Europe/Berlin',
});
2020-04-16 23:54:21 +03:00
```
#### API reference
- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
< br / >
## Permissions
2020-04-20 05:42:40 +03:00
2020-04-16 23:54:21 +03:00
Allow all pages in the context to show system notifications:
```js
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
permissions: ['notifications'],
});
2020-04-16 23:54:21 +03:00
```
Grant all pages in the existing context access to current location:
```js
2020-04-21 00:04:49 +03:00
await context.grantPermissions(['geolocation']);
2020-04-16 23:54:21 +03:00
```
2020-04-17 00:19:21 +03:00
Grant notifications access from a specific domain:
2020-04-16 23:54:21 +03:00
```js
2020-04-21 00:04:49 +03:00
await context.grantPermissions(['notifications'], {origin: 'https://skype.com'} );
2020-04-16 23:54:21 +03:00
```
2020-04-21 00:04:49 +03:00
2020-04-16 23:54:21 +03:00
Revoke all permissions:
```js
2020-04-21 00:04:49 +03:00
await context.clearPermissions();
2020-04-16 23:54:21 +03:00
```
#### API reference
- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
- [`browserContext.grantPermissions(permissions[][, options])`](./api.md#browsercontextgrantpermissionspermissions-options)
- [`browserContext.clearPermissions()` ](./api.md#browsercontextclearpermissions )
< br / >
2020-04-20 05:42:40 +03:00
## Geolocation
Create a context with `"geolocation"` permissions granted:
```js
2020-04-21 00:04:49 +03:00
const context = await browser.newContext({
geolocation: { longitude: 48.858455, latitude: 2.294474 },
permissions: ['geolocation']
});
2020-04-20 05:42:40 +03:00
```
Change the location later:
```js
2020-04-21 00:04:49 +03:00
await context.setGeolocation({ longitude: 29.979097, latitude: 31.134256 };
2020-04-20 05:42:40 +03:00
```
2020-04-21 00:04:49 +03:00
2020-04-20 05:42:40 +03:00
**Note** you can only change geolocation for all pages in the context.
#### API reference
- [`browser.newContext([options])`](./api.md#browsernewcontextoptions)
- [`browserContext.setGeolocation(geolocation)` ](./api.md#browsercontextsetgeolocationgeolocation )
< br / >