playwright-blazor_skill

Overview

This skill helps .NET developers write reliable end-to-end UI tests for Blazor Server and Blazor WebAssembly apps using Playwright. It focuses on navigation, interactions, authentication, SignalR real-time scenarios, and Blazor-specific wait strategies to reduce flakiness. The guidance includes patterns for stable selectors, authentication shortcuts, screenshots, and CI integration.

How this skill works

The skill provides practical Playwright patterns and code snippets that target Blazor rendering semantics: initial HTTP loads, client-side routing, and SignalR-driven updates. It emphasizes waiting for DOM changes and specific selectors rather than network idle, using data-test attributes for stable targeting, and options for authenticating tests via interactive flows or cookie injection. It also covers browser setup, dev-cert handling, and parallelization limits for Blazor Server.

When to use it

• Creating end-to-end UI tests for Blazor Server or WebAssembly applications.
• Testing component interactions, forms, and client-side navigation that does not trigger full page reloads.
• Verifying authentication, authorization, and OAuth flows in automated tests.
• Testing SignalR-powered real-time updates and multi-user scenarios.
• Capturing screenshots for visual regression and debugging responsive layouts.

Best practices

• Use data-test or data-testid attributes for stable selectors instead of brittle CSS/XPath.
• Wait for specific DOM elements, visibility, or URL changes instead of network idle.
• Run headed locally for debugging and headless in CI; pin browser channels for reproducibility.
• Check #blazor-error-ui after actions to catch unhandled exceptions early.
• Limit parallel test execution for Blazor Server to avoid saturating SignalR connections.

Example use cases

• Navigate through client-side routes, click links, and confirm page content with WaitForSelector or WaitForURL.
• Automate login flows with interactive form submission or speed up tests by injecting auth cookies.
• Simulate two users in separate contexts to validate SignalR-driven updates like collaborative drawing.
• Upload files, select options, and submit complex forms, then assert success messages.
• Capture full-page and element screenshots in multiple viewports for visual regression in CI.