Photo by Kelly Sikkema on Unsplash

Write a basic E2E test using the Codegen tool [Part 4]

Write a basic E2E test

We are now ready to write a test so let’s play with the codegen tool to make it!

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

• 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;

Use the Playwright codegen tool

If you look in the test project directory where you added the Playwright Nuget package reference, you can notice that a power shell script is present.

In our example it is located here:

MyAppTests\bin\Debug\net6.0\playwright.ps1

This script is a bootstrap to run the playwright tools. If you are using VisualStudio you can use the “Package Manager Console” to run it.

First make sure the app is running:

$ cd Server
$ dotnet run

Once it is running, we can start the playwright codegen tool:

$ playwright.ps1 codegen https://localhost:7231/

Note that you may need to run the install command the first time:

$ playwright.ps1 install

Note that on your compute the app is maybe not using the same port number.

While the codegen tool is running you will see 2 windows:

• One do display our web app
• And one to dispay the codegen tool

Playwright codegen window.

Record and generate the browser actions

As you can see the codegen is already recording (Record is red) so if you interact with your application on the second window, you will see that all action you do will be translated into line of code in the codegen source window.

Let’s have a look on the generated code if I want to make sure that when I click on the “Home” button I get the page displaying the Hello world message:

I clicked on the Home button and on the title in order to generate click “Home” event and click on “Hello, world!” title.

// Click text=Home
await page.Locator("text=Home").ClickAsync();
await page.WaitForURLAsync("https://localhost:7231/");
// Click text=Hello, world!
await page.Locator("text=Hello, world!").ClickAsync();

Adjust the generated code

In our test, we will just replace the last ClickAsync with IsVisibleAsync resulting in the code below:

// Click text=Home
await page.Locator("text=Home").ClickAsync();
await page.WaitForURLAsync("https://localhost:7231/");
// Click text=Hello, world!
await page.Locator("text=Hello, world!").IsVisibleAsync();

Now I want to test that when I click on Counter button I navigate to counter page with the right title. Then I will test that when I click on “Click me” I will increment the value in the text resulting in this code:

// Click text=Counter
await page.Locator("text=Counter").ClickAsync();
await page.WaitForURLAsync("https://localhost:7231/counter");
// Click h1:has-text("Counter")
await page.Locator("h1:has-text(\"Counter\")").IsVisibleAsync();
// Click text=Current count: 0
await page.Locator("text=Current count: 0").IsVisibleAsync();
// Click text=Click me
await page.Locator("text=Click me").ClickAsync();
// Click text=Current count: 1
await page.Locator("text=Current count: 1").IsVisibleAsync();

Of course this is a really basic example but this is really just to given you an idea of what you can do with the tool.

Write the full test

Here is the result of all previous steps:

/// <summary>
/// The test class that is using the PlaywrightFixture
/// </summary>
[Collection(PlaywrightFixture.PlaywrightCollection)]
public class MyTestClass
{
  private readonly PlaywrightFixture playwrightFixture;
  /// <summary>
  /// Setup test class injecting a playwrightFixture instance.
  /// </summary>
  /// <param name="playwrightFixture">The playwrightFixture
  /// instance.</param>
  public MyTestClass(PlaywrightFixture playwrightFixture)
  {
    this.playwrightFixture = playwrightFixture;
  }
  [Fact]
  public async Task MyFirstTest()
  {
    var url = "https://localhost:5000";
    // Create the host factory with the App class as
    // parameter and the url we are going to use.
    using var hostFactory =
      new WebTestingHostFactory<WeatherForecastController>();
    hostFactory
      // Override host configuration to mock stuff if required.
      .WithWebHostBuilder(builder =>
      {
        // Setup the url to use.
        builder.UseUrls(url);
        // Replace or add services if needed.
        builder.ConfigureServices(services =>
        {
          // services.AddTransient<....>();
        })
        // Replace or add configuration if needed.
        .ConfigureAppConfiguration((app, conf) =>
        {
          // conf.AddJsonFile("appsettings.Test.json");
        });
      })
      // Create the host using the CreateDefaultClient method.
      .CreateDefaultClient();
    // Open a page and run test logic.
    await this.playwrightFixture.GotoPageAsync(
      url,
      async (page) =>
      {
        // Apply the test logic on the given page.
        // Click text=Home
        await page.Locator("text=Home").ClickAsync();
        await page.WaitForURLAsync($"{url}/");
        // Click text=Hello, world!
        await page.Locator("text=Hello, world!").IsVisibleAsync();
        // Click text=Counter
        await page.Locator("text=Counter").ClickAsync();
        await page.WaitForURLAsync($"{url}/counter");
        // Click h1:has-text("Counter")
        await page.Locator(
          "h1:has-text(\"Counter\")").IsVisibleAsync();
        // Click text=Click me
        await page.Locator("text=Click me").ClickAsync();
        // Click text=Current count: 1
        await page.Locator(
          "text=Current count: 1").IsVisibleAsync();
        // Click text=Click me
        await page.Locator("text=Click me").ClickAsync();
        // Click text=Current count: 2
        await page.Locator(
          "text=Current count: 2").IsVisibleAsync();
      },
      Browser.Chromium);
  }
}

Let’s go next :

Part 5 : Record and view our E2E test traces.