Skip to main content
Version: 1.12.0

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

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.


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:

using Microsoft.Playwright;
using System.Threading.Tasks;
class Program
{
public static async Task Main()
{
using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
{
Headless: False
});
var pixel2 = playwright.Devices["Pixel 2"];
await using var context = await browser.NewContextAsync(pixel2);
}
}

All pages created in the context above will share the same device parameters.

API reference#


User agent#

All pages created in the context above will share the user agent specified:

var context = await browser.NewContextAsync(new BrowserNewContextOptions { UserAgent = "My User Agent" });

API reference#


Viewport#

Create a context with custom viewport size:

// Create context with given viewport
await using var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
ViewportSize = new ViewportSize() { Width = 1280, Height = 1024 }
});
// Resize viewport for individual page
await page.SetViewportSizeAsync(1600, 1200);
// Emulate high-DPI
await using var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
ViewportSize = new ViewportSize() { Width = 2560, Height = 1440 },
DeviceScaleFactor = 2
});

API reference#


Locale & timezone#

await using var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
Locale = "de-DE",
TimezoneId = "Europe/Berlin"
});

API reference#


Permissions#

Allow all pages in the context to show system notifications:

Grant all pages in the existing context access to current location:

await context.GrantPermissionsAsync(new[] { "geolocation" });

Grant notifications access from a specific domain:

await context.GrantPermissionsAsync(new[] { "notifications" },origin: "https://skype.com");

Revoke all permissions:

await context.ClearPermissionsAsync();

API reference#


Geolocation#

Create a context with "geolocation" permissions granted:

await using var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
Permissions = new[] { "geolocation" },
Geolocation = new Geolocation() { Longitude = 48.858455f, Latitude = 2.294474f }
});

Change the location later:

await context.SetGeolocationAsync(new Geolocation() { Longitude = 48.858455f, Latitude = 2.294474f });

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

API reference#


Color scheme and media#

Create a context with dark or light mode. Pages created in this context will follow this color scheme preference.

// Create context with dark mode
await using var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
ColorScheme = ColorScheme.Dark
});
// Create page with dark mode
var page = await browser.NewPageAsync(new BrowserNewPageOptions
{
ColorScheme = ColorScheme.Dark
});
// Change color scheme for the page
await page.EmulateMediaAsync(new PageEmulateMediaOptions
{
ColorScheme = ColorScheme.Dark
});
// Change media for page
await page.EmulateMediaAsync(new PageEmulateMediaOptions
{
Media = Media.Print
});

API reference#