When you work with Playwright, there are a few small things that you want to change. Often there is a flag for codegen or a settings value that will do the trick. I collected the customisations for the parts I find most useful. Feel free to add a comment for other tricks you think I should know about.
The customisations go in 3 basic places: The command line for changes to codegen, the BrowserTypeLaunchOptions() when we launch the browser or the context that we get from the newly created browser. If you get stuck, you best use the codegen option and then look at the generated code to copy that into your application. That works across languages and frameworks.
Run outside the headless mode
We can leave the headless mode for dotnet test by setting this environment variable:
|
1 |
Set HEADED=1 |
Or we can call the LaunchAsync() method with this BrowserTypeLaunchOptions() settings where we change Headless to false:
|
1 2 3 4 5 |
await using var browser = await playwright.Firefox.LaunchAsync( new BrowserTypeLaunchOptions { Headless = false, }); |
Change the language
We can change the language that the browser in codegen accepts with the --lang option:
|
1 |
--lang="en-GB" |
In our code we must set the Locale property on the context:
|
1 2 3 4 5 |
var context = await browser.NewContextAsync( new() { Locale = "en-GB" }); |
Change the browser
We can change the browser we use in codegen with the --browser option and change it from chromium to firefox or webkit:
|
1 |
.\playwright.ps1 codegen --browser firefox |
In our code we can chose the browser explicitly:
|
1 2 3 4 5 6 |
// for Firefox await playwright.Firefox.LaunchAsync(); // or for Chromimum await playwright.Chromium.LaunchAsync(); // or for Webkit await playwright.Webkit.LaunchAsync(); |
Run in full screen
There is an open issue for a solution to open the browser in full screen. However, I got everything I needed with this code from Stack Overflow:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
await using var browser = await playwright.Chromium.LaunchAsync( new BrowserTypeLaunchOptions { Args = new string[] { "--start-maximized" } }); var context = await browser.NewContextAsync( new() { ViewportSize = ViewportSize.NoViewport }); |
This adds an argument to the BrowserTypeLaunchOptions() and it changes the ViewportSize to NoViewport.
Use a specific viewport
We can get a specific viewport in codegen with the --viewport-size option:
|
1 |
--viewport-size=1280,1024 |
In our code we can set the viewport size in the context:
|
1 2 3 4 5 6 7 8 |
await using var context = await browser.NewContextAsync(new() { ViewportSize = new ViewportSize() { Width = 1280, Height = 1024 } }); |
If we only need a different viewport for a specific page, we can do that as well:
|
1 |
await page.SetViewportSizeAsync(1280, 1024); |
Change user agent
We can change the user agent in the context object with this code:
|
1 2 3 4 5 |
var context = await browser.NewContextAsync( new() { UserAgent = "my browser XYZ" }); |
Emulate devices
Playwright allows us to emulate devices. The emulation covers the viewport size, the user agent, if it is a mobile device, and if it supports touch. You can find the list of pre-defined devices and their names here on GitHub.
For codegen, we can use the --device option:
|
1 |
--device="iPhone 12" |
In the code we can get the device configuration and use it to create a new context:
|
1 2 |
var iphone12 = playwright.Devices["iPhone 12"]; await using var context = await browser.NewContextAsync(iphone12); |
Simulate geolocation
We can emulate the location of the browser with the --geolocation option for codegen:
|
1 |
--geolocation="41.890221,12.492348" |
Or we can set the location on the context:
|
1 2 3 4 5 6 7 8 9 |
var context = await browser.NewContextAsync( new() { Geolocation = new Geolocation() { Latitude = 41.890221f, Longitude = 12.492348f } }); |
Next
While not necessary, those tricks may help you to get from Playwright exactly what you need. While you maybe never need to set the geolocation, it is good to know that you could do it. Next week we try to run Playwright on BrowserStack to see if we could switch away from Selenium without losing the real device emulations we can get with this service.