playwright-e2e-patterns

Automate Playwright E2E test pattern creation for Blazor Server apps.

1|Updated Jun 27, 2025
One-click install
npx skills add https://github.com/d-kishi/ubiquitous-lang-mng --skill playwright-e2e-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-e2e-patterns
Source: https://github.com/d-kishi/ubiquitous-lang-mng/tree/main/.claude/skills/playwright-e2e-patterns
Command: npx skills add https://github.com/d-kishi/ubiquitous-lang-mng --skill playwright-e2e-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solves? Manual E2E test creation is slow and error-prone, especially with Blazor Server's asynchronous UI and SignalR. This Skill automates the process, reducing test creation time by 93.3% and ensuring robust, reliable tests.

Core Features & Use Cases

  • Efficient data-testid Design: Standardized naming for robust selectors, resilient to UI changes, making tests easier to write and maintain.
  • Blazor Server & SignalR Handling: Provides proven patterns for waiting on StateHasChanged(), SignalR connections, and Toast notifications, eliminating flaky tests.
  • Playwright MCP Tooling: Guides on using playwright_navigate, playwright_snapshot, playwright_click, playwright_fill, playwright_select, and playwright_wait_for for optimal test automation.
  • Use Case: Quickly generate reliable E2E tests for new Blazor Server features, ensuring UI stability and functionality without manual scripting, and drastically cutting down QA cycles.

Quick Start

Generate an E2E test for the new user registration flow in the Blazor Server application, ensuring SignalR connections are handled correctly and success messages are verified.

Frequently Asked Questions about playwright-e2e-patterns

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

FAQPage Schema
How do I automate end-to-end tests for Blazor Server applications?

Automate E2E tests for Blazor Server by using Playwright with standardized data-testid selectors and built-in patterns for SignalR handling, async UI updates, and component validation. This approach reduces test creation time by 93% compared to manual scripting.

How do I handle SignalR and asynchronous UI updates in Playwright tests?

Handle SignalR readiness and async Blazor Server UI by applying proven wait patterns for StateHasChanged(), NetworkIdle waits, and explicit synchronization. These patterns eliminate flaky tests caused by timing issues in real-time component updates.

What's the best way to design data-testid attributes for reliable Playwright selectors?

Design data-testid attributes using standardized naming conventions that remain stable across UI changes. Robust selector design makes tests resilient to layout refactoring and reduces maintenance overhead when Blazor components evolve.

Can I use Playwright to test Blazor Server login flows and user management workflows?

Yes. Playwright tests work for Blazor Server login, member management, and component workflows. The Skill provides phase-specific patterns for these scenarios, including toast and alert validation for user feedback verification.

Do I need special tooling to orchestrate Playwright commands for E2E test generation?

Use Playwright MCP tools—playwright_navigate, playwright_click, playwright_fill, playwright_wait_for, and playwright_snapshot—for automated test orchestration. These tools integrate with Generator and Healer agents to create and validate test patterns autonomously.

What are the limitations of automated E2E testing for Blazor Server applications?

Automated E2E testing works best when components include data-testid attributes and handle SignalR synchronization correctly. Tests may require adjustment if UI state depends on complex client-side logic or undocumented async behavior not captured by standard wait patterns.