This article will discuss about testing web applications with the help of Playwright.NET. And run the tests in Azure DevOps as part of CI/CD pipeline. Few months back I wrote an article on Testing Web Applications with PlayWright and C#, this was using a non Microsoft package - PlaywrightSharp. Right now Microsoft is offering an official package - Microsoft.Playwright. In this article you will learn about how to write test case using Microsoft.Playwright nuget package and how to deploy the test app and execute it as part of the CI / CD pipeline in Azure DevOps.
To get started, you need to install the playwright CLI. You can do this by executing following command - dotnet tool install --global Microsoft.Playwright.CLI. Once you install the CLI you can use the CLI tools to download browsers. It is required only once for project. You can also this tool to record the tests.
To create your first test execute the following command - dotnet new nunit. Next you need to add two nuget package references - Microsoft.Playwright and Microsoft.Playwright.NUnit. After installing the packages the project file will look something like this.
Next let’s write our first test case. In this test I am opening the https://playwright.dev/dotnet url. Toggling the dark mode checkbox and verifies whether the page switched to dark mode or light mode.
I am also taking before and after screenshots of the page and adding as attachment to TestContext which will help to verify the screenshots in case of failure. Next you need to build the project using dotnet build command. After build you can install the browsers using playwright install command. And to run the test you can use dotnet test command - which will display results like this.
Next to record a test you can run playwright codegen command. This command will launch the Playwright recorder window and a chromium window. You need to provide the URL of the site you like to test in the browser and you can click and record the steps. The explore option text box will help you to find elements with XPath or Regex in the Html code.
Recorder will also give some pseudo assert statements as well. You can copy the code statements and execute it as part of the tests. Here is the one test I recorded using the tool.
I modified the code little bit and changed it like this.
Next let us deploy the tests to Azure DevOps and run it along with your CI/CD pipeline. For the demo I am running it in the build pipeline. I created a ASP.NET Core build pipeline. And removed all the steps. And then in the pipeline, I am using .NET Core 5.0. Then I am installing the playwright CLI locally. And installing the browsers using playwright install command. And finally executing the tests using dotnet test command. Here is the YAML file.
And here is the build pipeline running on Azure DevOps.
And you will be able to see the Test Results and Screenshots under the Test Plans > Runs, like this.
Using Playwright you will be able to test the webapps and run the tests in Azure DevOps.