Playwright is a reliable end-to-end testing framework for web applications. It is open-source and available for C#, Java, JavaScript, and Python. While it is similar to Selenium and Cypress, Playwright has its own twist on testing and offers a nice set of tools to make writing tests less tedious. Since Microsoft is putting a lot of resources into Playwright, I expect it to be around for the long haul.
The main point that interests me in Playwright is the focus on reliability. The biggest pain point with end-to-end tests is usually flaky tests. Playwright comes with a fully isolated Chrome, Firefox, and Webkit browser to run your tests. The tests are fast and with the combination of auto-waiting and automatically retried assertions we end up with an unseen robustness.
I heard the first time of Playwright a few weeks back at NDC Oslo 2022. Therefore, I do not have much experience and I write about Playwright as I learn it myself. I hope to get a realistic picture of Playwright over the next few weeks, and you are welcome to follow along. If you spot an error, please leave a comment so that I can fix it.
Installation
The Playwright installation has two parts. First, we need to add the NuGet package to our test project:
|
1 |
NuGet\Install-Package Microsoft.Playwright |
If NuGet installed the package, we need to build the project so that the debug folder gets the scripts we need for the second part:
|
1 |
dotnet build |
Next, we need to go to the output folder and run the playwright.ps1 script to install the infrastructure for Playwright:
|
1 2 |
cd bin\Debug\net6.0\ powershell .\playwright.ps1 install |
Depending on your internet connection, it may take a while for the script to download the three browsers. If it completes without an error, we can proceed to our first test.
Create a test
I use NUnit for my examples with Playwright and I suggest you do the same (MS Test is available, but I advise against it). Add a test class with this content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
using System.Text.RegularExpressions; using System.Threading.Tasks; using Microsoft.Playwright.NUnit; using NUnit.Framework; namespace PlaywrightTests; [Parallelizable(ParallelScope.Self)] [TestFixture] public class Tests : PageTest { [Test] public async Task FirstStep() { await Page.GotoAsync("https://playwright.dev"); // Expect a title "to contain" a substring. await Expect(Page).ToHaveTitleAsync(new Regex("Playwright")); // create a locator var getStarted = Page.Locator("text=Get Started"); // Expect an attribute "to be strictly equal" to the value. await Expect(getStarted).ToHaveAttributeAsync("href", "/docs/intro"); // Click the get started link. await getStarted.ClickAsync(); // Expects the URL to contain intro. await Expect(Page).ToHaveURLAsync(new Regex(".*intro")); } } |
This test code is directly from the official documentation and shows us the basic concepts of Playwright. We can use it to automate the browser and read values for our asserts in the test code. I only changed the name to FirstStep to type less when I filter for that test.
The Page object represents your browser instance on a specific page. The magic (like initialisation and setup) happens in the class PageTest from which your test class inherits.
Run the test
We can run the test in Visual Studio with the (ReSharper) Test Runner or in the command line. Inside Visual Studio, this test runs in 3 seconds or less. That includes the initialisation of NUnit, the start of the web browser and all the commands in the test that access the network.
For the command line we can use the usual dotnet test and filter for our test case:
|
1 |
dotnet test --filter "Name=FirstStep" |
The tests run in the headless browser by default. If you want to change that, you can set the option HEADED to 1:
|
1 2 |
set HEADED=1 dotnet test --filter "Name=FirstStep" |
Next
This post gets us up and running with Playwright. The interesting parts are jet to come, and I am looking forward for to take a deeper look at Codegen. Unfortunately, there is one bug that needs to be fixed before that makes sense. Therefore, next week we first look at ways to automate a browser with Playwright.