emulation

47 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Device emulation with Playwright.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.

Pre-configured devices assume a specific platform

Pre-configured devices assume a specific platform. For example, 'Desktop Chrome' will provide a Windows-specific user agent string. If you would like to use the user agent specific to the platform that is running the tests, you should unset the userAgent property by setting it to undefined or null.

Override viewport for specific tests

The viewport is included in the device but you can override it for some tests. In playwright.config.ts, define the viewport property after destructuring devices, since devices also define the viewport for that device. You can also use Page.setViewportSize to resize the viewport for an individual page.

Emulate high-DPI displays

To emulate high-DPI displays, set the deviceScaleFactor property when creating a browser context. For example, a viewport of 2560x1440 with deviceScaleFactor of 2 emulates a high-DPI device.

isMobile property effect

The isMobile property determines whether the meta viewport tag is taken into account and touch events are enabled.

Emulate locale and timezone globally

You can emulate the browser locale and timezone globally for all tests in playwright.config.ts by setting the locale and timezoneId properties in the use block.

Override locale and timezone for specific tests

Locale and timezone can be overridden for particular tests using test.use() with locale and timezoneId properties.

Browser timezone vs test runner timezone

Setting locale and timezoneId in Playwright only affects the browser timezone and locale, not the test runner timezone. To set the test runner timezone, use the TZ environment variable.

Grant permissions to browser context

You can grant specified permissions to the browser context using the permissions property. For example, ['notifications'] allows the app to show system notifications.

Grant permissions for a specific domain

Use context.grantPermissions() to grant permissions for a specific domain by passing an origin option. For example: context.grantPermissions(['notifications'], { origin: 'https://skype.com' }).

Revoke all permissions from context

Use context.clearPermissions() to revoke all permissions that were previously granted to the browser context.

Emulate geolocation

To emulate geolocation, set both the geolocation property (with longitude and latitude) and the permissions property including 'geolocation'. For example: geolocation: { longitude: 41.890221, latitude: 12.492348 }, permissions: ['geolocation'].

Change geolocation during test

You can change the geolocation for all pages in a context during a test using context.setGeolocation() with longitude and latitude properties. Note that you can only change geolocation for all pages in the context, not individual pages.

Emulate color scheme

You can emulate the user's color scheme using the colorScheme property. Supported values are 'light' and 'dark'. This can be set in playwright.config.ts, test.use(), or when creating a browser context or page.

Change color scheme and media for page

Use page.emulateMedia() to change the color scheme or media type for a page. For example: page.emulateMedia({ colorScheme: 'dark' }) or page.emulateMedia({ media: 'print' }).

Override user agent

The user agent is included in the device configuration and you will rarely need to change it. However, if you need to test a different user agent, you can override it with the userAgent property.

Emulate offline network

You can emulate the network being offline by setting the offline property to true when creating a browser context or in playwright.config.ts.

Emulate JavaScript disabled

You can emulate a user scenario where JavaScript is disabled by setting the javaScriptEnabled property to false when creating a browser context, or using test.use() in a test file.

Viewport configuration in config file

In playwright.config.ts, when using devices, define the viewport property after destructuring the device, since the device object already defines a viewport. This ensures your custom viewport overrides the device's default viewport.

Device emulation in Playwright.test vs library

When using @playwright/test, device parameters can be configured in playwright.config.ts under projects using the devices registry. When using the Playwright library directly, pass device parameters directly to browser.newContext() or browser.newPage().

Device descriptors for emulation

Playwright can run on emulated tablet and mobile devices. The complete list of selected desktop, tablet, and mobile device parameters is available in the registry at github.com/microsoft/playwright/blob/main/packages/isomorphic/deviceDescriptorsSource.json.

Android automation support status

Playwright has experimental support for Android automation, including Chrome for Android and Android WebView. This is available from v1.9 onwards.

Android automation requirements

To use Android automation: Android device or AVD Emulator is required; ADB daemon must be running and authenticated with the device (typically running adb devices is sufficient); Chrome 87 or newer must be installed on the device; and 'Enable command line on non-rooted devices' must be enabled in chrome://flags.

Android automation known limitations

Raw USB operation is not yet supported—ADB is required. Device needs to be awake to produce screenshots, and enabling 'Stay awake' developer mode will help. Not all tests have been run against devices, so not everything works.

Android.devices method parameters

Android.devices returns an Array of AndroidDevice objects. Parameters: host (string, optional, defaults to 127.0.0.1) - optional host to establish ADB server connection; port (int, optional, defaults to 5037) - optional port to establish ADB server connection; omitDriverInstall (boolean, optional) - prevents automatic playwright driver installation on attach, assumes drivers have been installed already.

Android.connect method parameters

Android.connect attaches Playwright to an existing Android device and returns an AndroidDevice. Parameters: endpoint (string, required) - a browser websocket endpoint to connect to; headers (Object<string, string>, optional) - additional HTTP headers to be sent with web socket connect request; slowMo (float, optional, defaults to 0) - slows down Playwright operations by the specified amount of milliseconds; timeout (float, optional, defaults to 30000) - maximum time in milliseconds to wait for connection to be established, pass 0 to disable timeout.

Android.launchServer method parameters

Android.launchServer launches Playwright Android server that clients can connect to and returns a BrowserServer. Parameters: adbHost (string, optional, defaults to 127.0.0.1) - optional host to establish ADB server connection; adbPort (int, optional, defaults to 5037) - optional port to establish ADB server connection; omitDriverInstall (boolean, optional) - prevents automatic playwright driver installation on attach; deviceSerialNumber (string, optional) - optional device serial number to launch the browser on, throws if multiple devices connected and not specified; host (string, optional, defaults to localhost) - host to use for the web socket, pass explicit address like 0.0.0.0 to accept network connections; port (int, optional, defaults to 0) - port to use for the web socket, defaults to 0 which picks any available port; wsPath (string, optional, defaults to unguessable string) - path at which to serve the Android Server.

Android.launchServer wsPath security warning

Any process or web page with knowledge of the wsPath can take control of the OS user. You should use an unguessable token when using the wsPath option.

Android WebView automation example

To automate Android WebView: stop and launch an application with WebView using shell commands like 'am force-stop' and 'am start'; get the WebView using device.webView({ pkg: 'package.name' }); interact with the WebView using device.fill() and device.press() methods with resource identifiers; access the underlying page using webview.page() and work with it as usual.

Android Chrome browser automation example

To automate Chrome on Android: stop the Chrome app using shell command; launch browser context using device.launchBrowser(); create and use pages normally with page.goto(), page.evaluate(), page.screenshot(); close the context when done.

AndroidDevice methods for interaction

AndroidDevice supports fill() method to fill input boxes using resource identifiers (res parameter); press() method to press keys using resource identifiers; shell() method to execute shell commands on the device; screenshot() method to take screenshots with optional path parameter; webView() method to access WebView by package name; launchBrowser() method to launch Chrome browser context.

AndroidInput.drag method

The AndroidInput.drag async method performs a drag between two points. It takes three parameters: from (object with x and y float properties for the start point), to (object with x and y float properties for the end point), and steps (int, the number of steps in the drag where each step takes 5 milliseconds to complete).

AndroidInput.press method

The AndroidInput.press async method presses a key. It takes one parameter: key (an AndroidKey enum value representing the key to press).

AndroidInput.swipe method

The AndroidInput.swipe async method swipes following a path defined by segments. It takes three parameters: from (object with x and y float properties for the starting point), segments (array of objects with x and y float properties representing points following the from point in the swipe gesture), and steps (int, the number of steps for each segment where each step takes 5 milliseconds, so 100 steps means half a second per segment).

AndroidInput.tap method

The AndroidInput.tap async method taps at a specified point. It takes one parameter: point (object with x and y float properties for the tap location).

AndroidInput.type method

The AndroidInput.type async method types text into the currently focused widget. It takes one parameter: text (string, the text to type).

Forced-colors CSS media feature emulation

It is possible to emulate the `forced-colors` CSS media feature by passing it in `Browser.newContext()` or calling `Page.emulateMedia()`.

Page.emulateMedia reducedMotion option

The `reducedMotion` option was added to Page.emulateMedia(), BrowserType.launchPersistentContext(), Browser.newContext(), and Browser.newPage() in Playwright 1.12.

screen option emulates window.screen dimensions

The `screen` option in `Browser.newContext()` (introduced in 1.11) allows emulating window.screen dimensions.

New emulation devices in 1.11

New emulation devices added in Playwright 1.11: Galaxy S8, Galaxy S9+, Galaxy Tab S4, Pixel 3, Pixel 4.

colorScheme emulation option

The colorScheme option emulates the 'prefers-color-scheme' media feature. Supported values are 'light' and 'dark'. It is set in the use object of the Playwright config.

geolocation emulation option

The geolocation option sets the context geolocation. It accepts an object with longitude and latitude properties. Example: { longitude: 12.492507, latitude: 41.889938 }.

locale emulation option

The locale option emulates the user locale. Examples include 'en-GB', 'de-DE', and 'fr-FR'. It is set in the use object of the Playwright config.

permissions emulation option

The permissions option grants specified permissions to the browser context as a list. Example: ['geolocation']. Permissions control what the context can access.

timezoneId emulation option

The timezoneId option changes the timezone of the context. Example: 'Europe/Paris'. It is set in the use object of the Playwright config.

viewport emulation option

The viewport option sets the viewport used for all pages in the context. It accepts an object with width and height properties. Example: { width: 1280, height: 720 }.

Example: Configure emulation options

export default defineConfig({ use: { colorScheme: 'dark', geolocation: { longitude: 12.492507, latitude: 41.889938 }, locale: 'en-GB', permissions: ['geolocation'], timezoneId: 'Europe/Paris', viewport: { width: 1280, height: 720 }, }, });

Give your agent this brain