Skip to main content
Version: 1.22

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​