skills.rest
dotnet
dotnetOFFICIAL
Explore all skills by this author →
Website𝕏@dotnetfdnGitHub

validate-blazor-feature

Validate Blazor features interactively in a browser using in-repo Components samples before writing E2E tests.

1.2k|337|Updated Oct 13, 2022
Search Tags:#playwright#webassembly#Validation#E2E Testing#blazor#AspNetCore#render mode
One-click install
npx skills add https://github.com/dotnet/dotnet --skill validate-blazor-feature
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: validate-blazor-feature
Source: https://github.com/dotnet/dotnet/tree/main/src/aspnetcore/.github/skills/validate-blazor-feature
Command: npx skills add https://github.com/dotnet/dotnet --skill validate-blazor-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Verifying a Blazor change in src/Components requires knowing which sample app to use, where to place a test page, how to set the render mode, and how to confirm the app is truly interactive rather than static SSR. This Skill provides a repeatable workflow to exercise a Blazor feature in a real browser before committing to permanent E2E tests.

Core Features & Use Cases

  • Sample Selection Guidance: Choose between BlazorWebAppPerPage, BlazorWebAppGlobal, and BlazorWebAssemblyStandalone, and place pages in the correct project (host vs .Client) for the target render mode.
  • Render Mode Configuration: Set InteractiveServer, InteractiveWebAssembly, InteractiveAuto, static SSR, or disable prerendering, with correct syntax for per-page and global samples.
  • Browser-Driven Validation: Launch samples against the in-tree framework and drive them with Playwright MCP tools, verifying interactivity behaviorally via snapshots, console messages, and network requests.
  • Use Case: After modifying enhanced navigation behavior in src/Components, add a scenario page to BlazorWebAppPerPage, run it with the repo SDK, click through the flow in a browser, and confirm the state changes with zero console errors before writing the E2E test.

Quick Start

Validate my Blazor change by adding a test page to the appropriate Components sample, launching it against the in-tree framework, and driving it in a browser with the Playwright tools to confirm interactivity and check for console errors.

Frequently Asked Questions about validate-blazor-feature

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

FAQPage Schema
How do I test a Blazor feature interactively before writing E2E tests?▼

Pick a sample in src/Components/Samples, add a scenario page with the right render mode, build the framework and Blazor JS, then launch the sample with dotnet run and drive it in a browser using Playwright MCP tools. Confirm interactivity by observing a state change after interaction.

Which Blazor sample app should I use for my feature?▼

Use BlazorWebAppPerPage for most features mixing static SSR with per-page interactivity, BlazorWebAppGlobal for root-level interactivity concerns, and BlazorWebAssemblyStandalone for pure client WebAssembly behavior without a server host.

Why is my Blazor page not interactive after clicking?▼

The render mode was likely not applied, so the page is static SSR which emits identical markup. Add @rendermode to the page in the per-page sample, or set it on Routes and HeadOutlet in the global sample, and ensure WebAssembly components live in the .Client project.

Does InteractiveAuto run on WebAssembly immediately?▼

No. InteractiveAuto runs on the Server circuit on first load while WebAssembly assets download, then switches to WebAssembly on later visits. To force one platform, name InteractiveServer or InteractiveWebAssembly explicitly.

Why does blazor.web.js return 404 when running a sample?▼

The Blazor JS bundle has not been built. Run npm run build in src/Components/Web.JS and confirm dist/Debug/_framework/blazor.web.js exists, otherwise the page serves no script and interactivity never starts.

When should I not use this browser validation workflow?▼

Do not use it for writing permanent E2E, Selenium, or unit tests, for non-Components areas, or for isolated browser API and HTML/CSS experiments unrelated to a Blazor feature. Once an E2E test covers the behavior, revert the sample scenario code.

Related Skills

Explore More Software Engineering Skills→
FortiumPartnersFortiumPartners
11

Blazor Framework - Quick Reference (SKILL.md)

Provide Blazor Server and WebAssembly patterns, templates, and examples for frontend development.

Official
Advanced
anolilabanolilab
214

playwright-best-practices

Guide Playwright test suite creation and debugging in TypeScript.

Official
Advanced
soloamentesoloamente

browser-testing-with-devtools

Inspect DOM, console logs, network requests, and performance metrics via Chrome DevTools MCP.

Community
Advanced
rudironsonirudironsoni

dotnet-blazor-testing

Test Blazor components with bUnit and xUnit for rendering and events.

Community
Intermediate