playwright-blazor-testing

1# Testing Blazor Applications with Playwright
2 
3## When to Use This Skill
4 
5Use this skill when:
6- Writing end-to-end UI tests for Blazor Server or WebAssembly applications
7- Testing interactive components, forms, and user workflows
8- Verifying authentication and authorization flows
9- Testing SignalR-based real-time updates in Blazor Server
10- Capturing screenshots for visual regression testing
11- Testing responsive designs and mobile emulation
12- Debugging UI issues with browser developer tools
13 
14## Core Principles
15 
161. **Wait for Rendering** - Blazor renders asynchronously; use proper wait strategies
172. **Test Attributes** - Use `data-test` or `data-testid` attributes for stable selectors
183. **Headless by Default** - Run tests headless in CI, headed for local debugging
194. **Handle Error UI** - Always check for `#blazor-error-ui` to catch unhandled exceptions
205. **Avoid Network Wait States** - Blazor navigation doesn't trigger network loads; wait for DOM changes
216. **Pin Browser Channels** - Use specific browser channels (msedge, chrome) for reproducibility
22 
23## Required NuGet Packages
24 
25```xml
26<ItemGroup>
27  <PackageReference Include="Microsoft.Playwright" Version="*" />
28  <PackageReference Include="Microsoft.Playwright.MSTest" Version="*" />
29  <!-- OR for xUnit -->
30  <PackageReference Include="xunit" Version="*" />
31  <PackageReference Include="xunit.runner.visualstudio" Version="*" />
32</ItemGroup>
33```
34 
35## Installation
36 
37Before running tests, install Playwright browsers:
38 
39```bash
40…