Skip to main content

Emulation

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 { type PlaywrightTestConfig, devices } from '@playwright/test'; // import devices

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 12'],
      },
    },
  ],
};
export default config;

Viewport​

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

import { test, expect } from '@playwright/test';

// Run tests in this file with portrait-like viewport.
test.use({
  viewport: { width: 600, height: 900 },
});

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

The same works inside a describe block.

import { test, expect } from '@playwright/test';

test.describe('locale block', () => {
  // Run tests in this describe block with portrait-like viewport.
  test.use({ viewport: { width: 600, height: 900 } });

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

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.

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 }) => {
  // ...
});

Permissions​

Allow app to show system notifications.

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    permissions: ['notifications'],
  },
};
export default config;

Allow test to request current location.

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    permissions: ['geolocation'],
  },
};
export default config;

Allow notifications for a specific domain.

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    permissions: ['notifications'], {origin: 'https://skype.com'},
  },
};
export default config;

Revoke all permissions with browserContext.clearPermissions().

// Library
await context.clearPermissions();

Geolocation​

Create a test with "geolocation" permissions granted and geolocation set to a specific area.

import { test, expect } from '@playwright/test';

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

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

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.

Color Scheme and Media​

Create a test that emulates the users "colorScheme". Supported values are 'light', 'dark', 'no-preference'. You can also emulate the media type with page.emulateMedia([options]).

import { test, expect } from '@playwright/test';

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

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

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.

import { test, expect } from '@playwright/test';

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

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

JavaScript Enabled​

Emulate a user scenario where JavaScript is disabled.

import { test, expect } from '@playwright/test';

test.use({ javaScriptEnabled: false });

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