Photo by Hack Capital on Unsplash

End-to-End test a Blazor App with Playwright [Part 1]

As a .Net fan, I am really glad to be able to write End-to-End tests for my Blazor apps in C#. Thanks to Playwright we now have a reliable and efficient way to do it!

Note that you can find all source code used in this article in this repository!

This article is divided in several parts explaining how to:

• Part 1 : Setup our application and our test projects and make an introduction of Playwright;
• Part 2 : Enable Playwright so that you can easily use it (including on your build agents);
• Part 3 : Start you Blazor app in order to debug and test it;
• Part 4 : Write a basic E2E test using the Codegen tool;
• Part 5 : Record and view our E2E test traces;

Note that you can use Playwright to test all kinds of Web applications, regardless of the technology they are based on.

What is Playwright?

Playwright is basically a Web application testing framework promoted by Microsoft.

It offers you the possibility to write E2E tests for your Web application with one single API using many languages (TypeScript, JavaScript, Python, .NET, Java).

It allows you :

• To test on any modern browser engines (Chromium, WebKit, and Firefox);
• To test on mobile Web with native mobile emulation;
• To work on any platform (Windows, Linux, macOS) locally or on CI ;

It also provides you with powerful tooling:

• Codegen to generate tests by recording your actions in any language…
• Playwright inspector to inspect page, generate selectors…
• Trace Viewer to capture all the information or to investigate failures…

Set up the app to test

Photo by Gia Oris on Unsplash

First we need to create the app to test so let’s create a new Blazor project with its dotnet host with Visual Studio or with the following command lines:

$ mkdir MyBlazorApp
$ cd MyBlazorApp
$ dotnet new blazorwasm -ho

You will get the solution file and three projects:

• Client\MyBlazorApp.Client.csproj
  The Blazor WebAssembly application.
• Server\MyBlazorApp.Server.csproj
  The .Net core host application.
• Shared\MyBlazorApp.Shared.csproj
  A shared project between the Client and the Server.

Set up the test project

Once we have the application, we need to create a xUnit test project using the command line as described below from your solution directory and add it to the solution file:

$ dotnet new xunit -o MyAppTests
$ dotnet sln add .\MyAppTests\MyAppTests.csproj
$ cd MyAppTests

Note that in this article I am using the xUnit framework. Don’t worry if this is not the one you use, you can do almost the same things with your favorite testing framework.

Once it is created, we need to install some Nuget packages:

• FluentAssertions:
  A set of extension methods that allow you to more naturally specify the expected outcome of your tests.

$ dotnet add package FluentAssertions

• Microsoft.Playwright:
  The Playwright .Net API and tooling.

$ dotnet add package Microsoft.Playwright

Let’s go next :

Part 2 : Enable Playwright so that you can easily use it (including on your build agents).