Saturday, April 5, 2025

Leveling Up Your Blazor Apps with E2E Testing

In today's fast-moving development world, consistently delivering high-quality software experiences is crucial. As our web applications become richer and more complex, manual testing alone can no longer keep pace. Enter automated end-to-end (E2E) testing, a powerful approach to ensuring seamless user experiences.

I'm excited to share a recent demo project I've developed showcasing a streamlined integration of Blazor, Reqnroll (formerly SpecFlow), and Playwright .NET to create robust, maintainable automated tests.

The full source is on GitHub: github.com/phmatray/AutoTests.

▸ Why E2E testing matters

End-to-end testing validates the entire application flow from a user's perspective. It ensures:

Functional accuracy: critical user flows work as expected.

Fast feedback: developers quickly identify issues before production.

Scalability: easily handle increasing complexity as your application evolves.

Traceability: direct links between requirements and test cases.

▸ Project highlights

This demo features a simple ticket booking application built with Blazor and fully automated acceptance tests using Reqnroll and Playwright .NET. Here's what makes it special:

BDD with Gherkin: tests written in clear, human-readable Gherkin syntax, allowing collaboration between developers, testers, and business stakeholders.

Reqnroll integration: seamless binding of Gherkin scenarios to automated browser tests, ensuring requirements are always reflected accurately.

Playwright .NET: modern, reliable cross-browser testing for Blazor apps. Fast, stable, and powerful.

Clean architecture: implementing the Page Object pattern keeps tests clean, maintainable, and reusable.

▸ Example scenario

Here's a brief look at how clear and intuitive Gherkin scenarios can be:

Feature: Ticket Booking System
  As a user,
  I want to view available events and book tickets,
  So that I can attend an event.

Scenario: Booking a ticket successfully
  Given I navigate to the booking page for event with id 1
  When I enter "John Doe" into the "User Name" field
  And I click on "Confirm Booking"
  Then I should see a confirmation message "Booking Confirmed"

▸ Behind the scenes with Playwright

With Playwright's powerful APIs and clear structure, automating interactions is straightforward. Here's a snippet using a page object model:

public async Task AssertBookingConfirmedMessage(string expectedMessage)
{
    await _user.WaitForSelectorAsync("h2");
    var message = await ConfirmationMessage.InnerTextAsync();
    message.ShouldContain(expectedMessage);
}

▸ Key benefits achieved

Enhanced collaboration: business and technical teams aligned through clear test scenarios.

Faster releases: reliable automation shortens test cycles, accelerating your development pipeline.

Greater confidence: immediate visibility into potential issues before they reach your users.

▸ Join the conversation

Adopting automated E2E testing is no longer optional, it's essential. Have you integrated E2E tests in your Blazor projects? How has automation impacted your workflow?

I'd love to hear your insights and experiences. Happy testing!

Does this resonate with your team?

Let's talk about how Atypical Consulting can help you move forward.

Contact me