testing-playwright-blazor

Automate end-to-end UI testing for Blazor applications with Playwright.

3|Updated Jan 24, 2024
One-click install
npx skills add https://github.com/akoken/dotfiles --skill testing-playwright-blazor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: testing-playwright-blazor
Source: https://github.com/akoken/dotfiles/tree/main/config/.copilot/skills/testing-playwright-blazor
Command: npx skills add https://github.com/akoken/dotfiles --skill testing-playwright-blazor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Blazor applications (Server or WebAssembly) require reliable automated UI tests to verify navigation, data binding, and user flows across real browser environments. This skill provides structured Playwright-based patterns to author robust tests for Blazor components and real-time updates via SignalR.

Core Features & Use Cases

  • End-to-end testing for Blazor Server and WebAssembly: verify navigation, forms, and authentication flows.
  • Stable selectors for Blazor: use data-test attributes, roles, and text to avoid brittle selectors.
  • Authentication & real-time testing: cover login flows and SignalR-driven updates.
  • Visual checks & fault diagnosis: screenshot captures and error UI detection.

Quick Start

Install Playwright browsers and dependencies, then run your UITests projects with dotnet test.

Frequently Asked Questions about testing-playwright-blazor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write end-to-end UI tests for Blazor applications with Playwright?

End-to-end UI testing for Blazor with Playwright requires a .NET test project using Microsoft.Playwright alongside MSTest or xUnit. You author tests to verify navigation, component interactions, and authentication flows against a running Blazor app environment.

Can I use Playwright to test SignalR real-time updates in Blazor Server?

Yes, Playwright can test SignalR-driven real-time updates in Blazor Server applications. The testing patterns cover verifying dynamic UI changes and data updates pushed via SignalR connections across desktop and mobile viewports.

What is the best way to find stable selectors for Blazor components in e2e testing?

Stable selectors for Blazor components rely on data-test attributes, accessible roles, and text content. Using these structural and semantic cues avoids brittle DOM selectors that break during UI updates.

Do I need a running Blazor environment to get deterministic Playwright test results?

Yes, a running Blazor app environment is required to achieve deterministic Playwright test results. The tests execute against live browser instances interacting with your deployed or locally hosted Blazor Server or WebAssembly application.

Does Playwright testing support both Blazor WebAssembly and Blazor Server scenarios?

Playwright testing supports both Blazor WebAssembly and Blazor Server scenarios. The testing patterns cover navigation, forms, authentication, and component interactions across both hosting models in real browser environments.

How do I capture screenshots and diagnose UI faults during Blazor Playwright tests?

You can capture screenshots and detect error UI states using Playwright's built-in visual check capabilities. The testing patterns include screenshot captures and error UI detection to help diagnose faults in Blazor components.