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
- Browser.NewContextAsync(options)
- BrowserContext.GrantPermissionsAsync(permissions, options)
- BrowserContext.ClearPermissionsAsync()
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
});