Testing Blazor Applications with Playwright

When to Use This Skill

Use this skill when:

• Writing end-to-end UI tests for Blazor Server or WebAssembly applications
• Testing interactive components, forms, and user workflows
• Verifying authentication and authorization flows
• Testing SignalR-based real-time updates in Blazor Server
• Capturing screenshots for visual regression testing
• Testing responsive designs and mobile emulation
• Debugging UI issues with browser developer tools

Core Principles

1. Wait for Rendering - Blazor renders asynchronously; use proper wait strategies
2. Test Attributes - Use data-test or data-testid attributes for stable selectors
3. Headless by Default - Run tests headless in CI, headed for local debugging
4. Handle Error UI - Always check for #blazor-error-ui to catch unhandled exceptions
5. Avoid Network Wait States - Blazor navigation doesn't trigger network loads; wait for DOM changes
6. Pin Browser Channels - Use specific browser channels (msedge, chrome) for reproducibility

Required NuGet Packages

<ItemGroup>
  <PackageReference Include="Microsoft.Playwright" Version="*" />
  <PackageReference Include="Microsoft.Playwright.MSTest" Version="*" />
  <!-- OR for xUnit -->
  <PackageReference Include="xunit" Version="*" />
  <PackageReference Include="xunit.runner.visualstudio" Version="*" />
</ItemGroup>

Installation

Before running tests, install Playwright browsers:

pwsh -Command "playwright install --with-deps"

Pattern 1: Basic Playwright Setup

using Microsoft.Playwright;

public class PlaywrightFixture : IAsyncLifetime
{
    private IPlaywright? _playwright;
    private IBrowser? _browser;

    public IBrowser Browser => _browser
        ?? throw new InvalidOperationException("Browser not initialized");

    public async Task InitializeAsync()
    {
        _playwright = await Playwright.CreateAsync();