playwright_skill

Overview

This skill develops end-to-end UI tests for Blazor WebAssembly applications using Playwright .NET and NUnit. It focuses on reliable UI validation against a full application stack, including responsive checks, JavaScript error detection, and MudBlazor component interaction. Tests integrate with a distributed test host to run against real service endpoints.

How this skill works

The skill uses Playwright PageTest as the test base and Locator patterns for resilient element targeting (role, text, CSS, and data-testid). Tests start a distributed application host, navigate to the Blazor client endpoint, and use Playwright’s auto-waiting and Expect API for assertions. It also captures console events to detect runtime JavaScript errors and manipulates viewport sizes for responsive verification.

When to use it

• When writing end-to-end tests for Blazor WebAssembly pages
• When validating UI flows that span multiple services in a full-stack test environment
• When testing MudBlazor components and CSS-based widgets
• When checking responsive layouts across device sizes
• When detecting and failing on client-side JavaScript errors

Best practices

• Prefer role-based and data-testid locators for robustness over brittle CSS selectors
• Start and stop the full distributed application host in fixture setup/teardown to test realistic endpoints
• Use Playwright’s auto-wait and Expect assertions to reduce flakiness instead of manual sleeps
• Capture Page.Console events and filter non-critical messages to surface real runtime errors
• Test multiple viewport sizes in one test suite to cover mobile and desktop behaviors

Example use cases

• Verify the Blazor app home page loads and contains expected title and key elements
• Assert that form flows (submit, validation, navigation) work end-to-end against real services
• Detect unexpected JavaScript runtime errors during page load and interactions
• Validate MudBlazor buttons, tables, and dialogs render and respond correctly
• Run responsive checks by switching viewport sizes and asserting visible content