用途:在编写 E2E 测试之前,用仓库内规范的 Components 示例在浏览器中交互式验证 Blazor 功能或行为。
主要能力:选择合适示例(BlazorWebAppPerPage、BlazorWebAppGlobal、BlazorWebAssemblyStandalone),添加场景页面,设置渲染模式,构建并启动,用 Playwright MCP 在浏览器中驱动并检查错误。
使用方式:示例位于 src/Components/Samples 与 src/Components/WebAssembly/Samples。WebAssembly 或 Auto 组件须放在 .Client 项目;可路由页面需 @page "/your-route"。渲染模式:逐页示例在页面顶部加 @rendermode InteractiveServer(或 InteractiveWebAssembly、InteractiveAuto),静态 SSR 则省略;全局示例改 Components/App.razor 中 <Routes> 与 <HeadOutlet> 的 @rendermode。禁用预渲染用 @rendermode @(new InteractiveServerRenderMode(prerender: false))。构建:先运行 eng\build.cmd,确保 src/Components/Web.JS/dist/Debug/_framework/blazor.web.js 存在(否则在 src/Components/Web.JS 运行 npm run build)。然后 . ./activate.ps1 并 dotnet run --project <示例 csproj> --no-restore,从 stdout 解析实际端口。用 playwright-browser_navigate、_wait_for、_snapshot、_click 等驱动,交互后断言状态变化;仅看渲染标记不算证据。检查控制台错误(level: error,勿设 all: true)与网络请求(blazor.web.js 或 blazor.webassembly.js、_framework/* 应返回 200)。
适用场景:验证 Blazor 交互行为、渲染模式、预渲染路径等,作为 E2E 测试前置步骤。
限制:需先构建框架与 Blazor JS;WebAssembly/Auto 组件位置受限;完成后按流程用 git checkout/git clean 移除示例代码,并停止服务器、清理 .playwright-mcp/ 产物。