#Sorcha UI 开发技巧 Sorcha.UI 的测试驱动 UI 开发。每个页面更改都与针对 Docker 环境运行的 Playwright E2E 测试配对（“docker-compose up -d”）。测试会自动验证控制台错误、网络故障、MudBlazor CSS 运行状况，并在失败时截取屏幕截图。 ## 先决条件 Docker 必须与所有服务一起运行： docker-compose up -d # 用户界面位于 http://localhost:5400 | API 网关位于 http://localhost:80 # 登录：admin@sorcha.local / Dev_Pass_2025！ ## 工作流程：构建页面对于您构建或修改的每个页面，请按顺序执行以下步骤： ### 第 1 步：创建页面对象创建 `tests/Sorcha.UI.E2E.Tests/PageObjects/{PageName}Page.cs`：使用 Microsoft.Playwright；使用Sorcha.UI.E2E.Tests.Infrastruct；使用Sorcha.UI.E2E.Tests.PageObjects.Shared；命名空间 Sorcha.UI.E2E.Tests.PageObjects; 公共类 WalletListPage { 私有只读 IPage _page； public WalletListPage(IPage page) => _page = page; // 使用data-testid作为主要选择器策略 public ILocator WalletCards => MudBlazorHelpers.TestIdPrefix(_page, "钱包卡-"); public ILocator CreateButton => MudBlazorHelpers.TestId(_page, "create-wallet-btn"); public ILocator EmptyState => MudBlazorHelpers.TestId(_page, "钱包空状态"); public Ilocator SearchInput => _page.Locator("input[placeholder*='搜索']"); // 回退到 MudBlazor 类选择器公共ILocator表=> MudBlazorHelpers.Table(_page); 公共ILocator LoadingSpinner => MudBlazorHelpers.CircularProgress(_page); 公共异步任务 NavigateAsync() { 等待_page.GotoAsync($"{TestConstants.UiWebUrl}{TestConstants.AuthenticatedRoutes.Wallets}"); 等待 _page.WaitForLoadStateAsync(LoadState.NetworkIdle); 等待 MudBlazorHelpers.WaitForBlazorAsync(_page); } 公共异步任务 GetWalletCountAsync() =>等待WalletCards.CountAsync(); 公共异步任务 IsEmptyStateVisibleAsync() => 等待 EmptyState.CountAsync() > 0 && 等待 EmptyState.IsVisibleAsync(); } ### 步骤 2：编写剧作家测试（测试优先）创建 `tests/Sorcha.UI.E2E.Tests/Docker/{Feature}Tests.cs`：使用Sorcha.UI.E2E.Tests.Infrastruct；使用Sorcha.UI.E2E.Tests.PageObjects；命名空间 Sorcha.UI.E2E.Tests.Docker； [可并行化（ParallelScope.Self）] [测试治具] [类别（“Docker”）] [类别（“钱包”）] [类别（“已验证”）] 公共类 WalletListTests ：AuthenticatedDockerTestBase { 私人 WalletListPage _walletList = null!; [设置] 公共覆盖异步任务 BaseSetUp() { 等待base.BaseSetUp(); _walletList = new WalletListPage(页面); } [测试] [重试(2)] 公共异步任务 WalletList_LoadsWithoutErrors() { 等待 NavigateAuthenticatedAsync(TestConstants.AuthenticatedRoutes.Wallets); // 基类自动检查控制台错误、网络 5xx、CSS 健康状况 } [测试] 公共异步任务 WalletList_ShowsEmptyStateOrWallets() { 等待 _walletList.NavigateAsync(); var count = wait _walletList.GetWalletCountAsync(); 如果（计数==0） { Assert.That(await _walletList.IsEmptyStateVisibleAsync(), Is.True, “空系统应显示空状态消息”）； } 否则 { Assert.That(count, Is.GreaterThan(0)); } } } ### 步骤 3：构建 Blazor 页面编辑 `src/Apps/Sorcha.UI/Sorcha.UI.Web.Client/Pages/{Page}.razor`： @page“/钱包” @layout主布局 @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false)) @属性[授权] @inject HttpClient Http 钱包 - Sorcha @if(_正在加载) { } 否则如果（_wallets.Count == 0） { 没有找到钱包。创建您的第一个钱包即可开始。 } 否则 { @foreach（_wallets 中的 var 钱包） { <泥卡内容> @wallet.Name } } 创建钱包 ### 第 4 步：运行测试 # 为您刚刚构建的功能运行测试 dotnet test 测试/Sorcha.UI.E2E.Tests --filter“类别=钱包” # 运行所有冒烟测试（快速 CI 门） dotnet test 测试/Sorcha.UI.E2E.Tests --filter "Category=Smoke" # 运行所有 Docker 测试 dotnet test 测试/Sorcha.UI.E2E.Tests --filter "Category=Docker" ### 步骤 5：检查失败的工件任何测试失败时，屏幕截图都会保存到“tests/Sorcha.UI.E2E.Tests/bin/Debug/net10.0/screenshots/”。测试输出中报告控制台错误和网络故障。 ## 关键概念概念|用途 |地点 ---|---|--- `DockerTestBase` |未经身份验证的测试与自动错误捕获 | `基础设施/DockerTestBase.cs` `经过身份验证的DockerTestBase` |登录一次，跨测试重复使用身份验证状态 | `基础设施/AuthenticatedDockerTestBase.cs` `测试常量` | URL、凭据、路由、超时 | `基础设施/TestConstants.cs` 页面对象 |封装每页的选择器和操作 | `PageObjects/*.cs` `MudBlazorHelpers` |共享 MudBlazor 定位器和布局验证 | `PageObjects/Shared/MudBlazorHelpers.cs` `数据测试id` |弹性测试的主要选择器策略|添加到 Razor 组件类别 |按功能或关注点过滤测试 |测试类上的“[类别(“钱包”)]` ## 测试继承 PageTest（剧作家 NUnit） └── DockerTestBase（控制台错误、网络故障、截图） ├── ComponentHealthTests、LoginTests（未经身份验证） └── AuthenticatedDockerTestBase（登录一次，重用状态，布局健康） ├── 仪表板测试 ├── 导航测试 ├── 钱包测试 └── ...（每个功能区域一个） ## 测试类别类别 |范围 |使用 ---|---|--- '烟' |所有页面均已加载，没有 JS 错误 | CI门 `Docker` |所有针对 Docker 的测试 |完整的 Docker 套件 `验证` |登录、注销、重定向 |认证功能 `已验证` |所有测试均需登录 |登录后功能 `仪表板` |仪表板页面 |仪表板开发 `导航` |抽屉、应用栏、路由 |布局变化 `组件` | CSS、MudBlazor、响应式 |样式/组件更改 `钱包` |钱包页面 |钱包功能 `蓝图` |蓝图页|蓝图功能 `寄存器` |注册页面 |寄存器功能 `模式` |模式库 |架构特征 `管理员` |管理页面|管理功能 ## 文件位置什么 |哪里 ---|--- Blazor 页面 | `src/Apps/Sorcha.UI/Sorcha.UI.Web.Client/Pages/` 共享组件| `src/Apps/Sorcha.UI/Sorcha.UI.Core/` 布局| `src/Apps/Sorcha.UI/Sorcha.UI.Web.Client/Components/Layout/` 测试基础设施| `测试/Sorcha.UI.E2E.测试/基础设施/` 页面对象 | `测试/Sorcha.UI.E2E.Tests/PageObjects/` Docker 测试 | `测试/Sorcha.UI.E2E.Tests/Docker/` MudBlazor 助手 | `测试/Sorcha.UI.E2E.Tests/PageObjects/Shared/MudBlazorHelpers.cs` ## 另请参阅 * [patterns]() \- 页面实现和测试模式 * [工作流程]() \- 开发工作流程和清单 ## 相关技能 * 请参阅 Blazor WASM 组件架构的 **blazor** 技能 * 请参阅 **playwright** 技能以获取 Playwright API 参考 * 请参阅 MudBlazor 样式的 **前端设计** 技能 * 请参阅页面调用的后端 API 端点的 **minimal-apis** 技能 * 请参阅 **jwt** 认证令牌处理技巧 ## 文档资源 > 使用 Context7 获取最新的 Playwright .NET 和 MudBlazor 文档。 **图书馆 ID：** * `/websites/playwright_dev_dotnet` (Playwright .NET) * `/websites/mudblazor` （MudBlazor 组件库） **推荐查询：** *“定位器选择器数据-testid” *“NUnit测试夹具并行” *“MudBlazor 卡表对话框” *“MudBlazor 表单验证” *“浏览器存储状态验证”

索查·乌伊

包含技能