Skip to main content

Emulation

Introduction

With Playwright you can test your app on any browser as well as emulate a real device such as a mobile phone or tablet. Simply configure the devices you would like to emulate and Playwright will simulate the browser behavior such as "userAgent", "screenSize", "viewport" and if it "hasTouch" enabled. You can also emulate the "geolocation", "locale" and "timezone" for all tests or for a specific test as well as set the "permissions" to show notifications or change the "colorScheme".

Devices

Playwright comes with a registry of device parameters using playwright.devices for selected desktop, tablet and mobile devices. It can be used to simulate browser behavior for a specific device such as user agent, screen size, viewport and if it has touch enabled. All tests will run with the specified device parameters.

playwright.config.ts
import { defineConfig, devices } from '@playwright/test'; // import devices

export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
{
name: 'Mobile Safari',
use: {
...devices['iPhone 13'],
},
},
],
});
playwright.dev website emulated for iPhone 13

Viewport

The viewport is included in the device but you can override it for some tests with page.setViewportSize().

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
// It is important to define the `viewport` property after destructuring `devices`,
// since devices also define the `viewport` for that device.
viewport: { width: 1280, height: 720 },
},
},
]
});

Test file:

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
viewport: { width: 1600, height: 1200 },
});

test('my test', async ({ page }) => {
// ...
});

The same works inside a test file.

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('specific viewport block', () => {
test.use({ viewport: { width: 1600, height: 1200 } });

test('my test', async ({ page }) => {
// ...
});
});

isMobile

Whether the meta viewport tag is taken into account and touch events are enabled.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
// It is important to define the `isMobile` property after destructuring `devices`,
// since devices also define the `isMobile` for that device.
isMobile: false,
},
},
]
});

Locale & Timezone

Emulate the user Locale and Timezone which can be set globally for all tests in the config and then overridden for particular tests.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
// Emulates the user locale.
locale: 'en-GB',

// Emulates the user timezone.
timezoneId: 'Europe/Paris',
},
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
locale: 'de-DE',
timezoneId: 'Europe/Berlin',
});

test('my test for de lang in Berlin timezone', async ({ page }) => {
await page.goto('https://www.bing.com');
// ...
});
Bing in german lang and timezone

Permissions

Allow app to show system notifications.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
// Grants specified permissions to the browser context.
permissions: ['notifications'],
},
});

Allow notifications for a specific domain.

tests/example.spec.ts
import { test } from '@playwright/test';

test.beforeEach(async ({ context }) => {
// Runs before each test and signs in each page.
await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
});

test('first', async ({ page }) => {
// page has notifications permission for https://skype.com.
});

Revoke all permissions with browserContext.clearPermissions().

// Library
await context.clearPermissions();

Geolocation

Grant "geolocation" permissions and set geolocation to a specific area.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
// Context geolocation
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: ['geolocation'],
},
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
geolocation: { longitude: 41.890221, latitude: 12.492348 },
permissions: ['geolocation'],
});

test('my test with geolocation', async ({ page }) => {
// ...
});
geolocation for italy on bing maps

Change the location later:

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
geolocation: { longitude: 41.890221, latitude: 12.492348 },
permissions: ['geolocation'],
});

test('my test with geolocation', async ({ page, context }) => {
// overwrite the location for this test
await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
});

Note you can only change geolocation for all pages in the context.

Color Scheme and Media

Emulate the users "colorScheme". Supported values are 'light', 'dark', 'no-preference'. You can also emulate the media type with page.emulateMedia().

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
colorScheme: 'dark',
},
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
colorScheme: 'dark' // or 'light'
});

test('my test with dark mode', async ({ page }) => {
// ...
});
playwright web in dark mode

User Agent

The User Agent is included in the device and therefore you will rarely need to change it however if you do need to test a different user agent you can override it with the userAgent property.

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({ userAgent: 'My user agent' });

test('my user agent test', async ({ page }) => {
// ...
});

Offline

Emulate the network being offline.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
use: {
offline: true
},
});

JavaScript Enabled

Emulate a user scenario where JavaScript is disabled.

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({ javaScriptEnabled: false });

test('test with no JavaScript', async ({ page }) => {
// ...
});