Playwright Blazor Testing

If you're testing Blazor apps with Playwright, the main gotcha is that internal navigation doesn't trigger page reloads, so the usual network idle waits don't work. This skill walks through the patterns that actually matter: waiting for DOM changes instead of network activity, using data-test attributes for stable selectors, handling authentication via cookie injection to skip the login dance, and catching Blazor-specific errors through the blazor-error-ui element. It covers both Server and WebAssembly modes, with concrete examples for forms, routing, and SignalR interactions. The setup is straightforward, just install the Microsoft.Playwright package and run the browser install command.

skills.sh installs: 560
GitHub stars: 1.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aaronontheweb/dotnet-skills --skill playwright-blazor-testing --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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