# Playwright Blazor Testing

Write UI tests for Blazor applications (Server or WebAssembly) using Playwright.

- Repository: https://github.com/Aaronontheweb/dotnet-skills (1244 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Aaronontheweb/dotnet-skills --skill playwright-blazor-testing -g -a claude-code -y`
Codex: `npx skills add Aaronontheweb/dotnet-skills --skill playwright-blazor-testing -g -a codex -y`
Cursor: `npx skills add Aaronontheweb/dotnet-skills --skill playwright-blazor-testing -g -a cursor -y`
Gemini CLI: `npx skills add Aaronontheweb/dotnet-skills --skill playwright-blazor-testing -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Aaronontheweb/dotnet-skills`

## Description

Write UI tests for Blazor applications (Server or WebAssembly) using Playwright. Covers navigation, interaction, authentication, selectors, and common Blazor-specific patterns.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

```xml
<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:

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

## Pattern 1: Basic Playwright Setup

```csharp
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();

The rest: https://github.com/Aaronontheweb/dotnet-skills/blob/HEAD/skills/playwright-blazor/SKILL.md