AionUi Assistant 设置页 E2E 实现映射指南从 38 条测试用例到可执行 Playwright 代码的追踪与质量保障【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20 more CLI Agent | Customize your assistants | Team them upStar if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi导读本文基于 AionUi 仓库中 implementation-mapping.zh.md 这一实现映射文档完整剖析 Assistant助手设置页补充 E2E 测试从用例定义到代码落地的全过程38 个测试用例如何分布到 3 个实现文件、37 个活跃用例的优先级统计与截图质量标准、废弃用例的判定逻辑、实现偏差检查方法以及设计Designer与实施Engineer两阶段的关键协作记录。读完本文你将掌握如何为复杂设置页建立用例文档 ↔ 测试代码的可追溯映射表并理解如何用统计指标覆盖率、截图数、达标率为 E2E 套件的质量设卡把关。1. 背景为什么需要实现映射文档AionUi 的 Assistant 设置页是一个管理所有 AI 助手的复杂界面助手按来源分为三类来源requirements.zh.md 第 1 节Builtin内置由ASSISTANT_PRESETS预置ID 前缀builtin-Extension扩展由已加载的 extension 贡献ID 前缀ext-Custom自定义用户自行创建当测试需求文档 test-cases.zh.md 将需求文档第 8 章的补充测试清单细化为 38 条可执行的 Playwright 用例后就面临一个工程问题如何证明文档里写的用例确实变成了仓库里的测试代码且二者行为一致这正是实现映射文档的职责——它是需求门 1→ 用例门 2→ 代码门 3这条流水线的最终对账清单。该文档的元信息如下来源文档头部生成时间2026-04-21实现目录tests/e2e/features/assistants/文档版本test-cases.zh.md v1.32. 总体统计概览覆盖率、截图数与达标率映射文档开篇即给出四张关键统计表这是整套测试质量的仪表盘。2.1 优先级维度统计类别文档定义实际实现状态P0 核心交互66✅ 100%P1 UI 状态2726⚠️ P1-17 废弃P2 边界用例55✅ 100%总计3837✅ 97%37/38 active2.2 截图密度统计截图总数173 次takeScreenshot()调用平均截图数/测试4.7 张按优先级分组P0 平均 4.84~6P1 平均 4.13~8P2 平均 6.44~8达标率≥3 张三个优先级均为 100%37/37这一截图数 ≥3 张的质量标准意味着每个用例不仅要断言通过还要留下足够多、覆盖关键状态节点的可视化证据便于后续人工 review 与缺陷回溯。文档明确注明截图数不足 3 的用例0 个——所有活跃用例均达标。从实现端验证三个实现文件均导入了takeScreenshothelper见 core-interactions.e2e.ts、ui-states.e2e.ts、edge-cases.e2e.ts且截图路径均按assistants/用例ID/序号-语义.png的约定组织例如p0-3/01-delete-preview.png、p2-1/04-final-state.png方便按用例归档。3. P0 核心交互6/6搜索、点击隔离、删除预览、高亮与技能弹窗P0 是必测级别聚焦最核心的用户交互。全部 6 条用例落在 core-interactions.e2e.ts 中映射关系如下用例 ID用例标题实现行号测试函数名P0-1搜索栏展开/折叠按钮行为 图标切换22test(P0-1: search toggle — expand/collapse with icon change)P0-2卡片点击区域隔离主体 vs 右侧操作区61test(P0-2: card click isolation — body opens drawer, actions do not)P0-3Delete 确认弹窗含助手预览卡片130test(P0-3: delete modal shows assistant preview card)P0-4highlightId 滚动到卡片并高亮 2 秒之后清 query196test(P0-4: highlight assistant card via query param)P0-5AddSkillsModal 搜索框过滤 无结果文案239test(P0-5: skills modal search filters and shows empty state)P0-6Extension 助手 Skills 区渲染验证286test(P0-6: extension assistant shows skills section)这些用例覆盖的需求编号可在 requirements.zh.md 中逐一溯源。例如P0-1覆盖 F-S-01/F-S-02/F-S-03/F-S-08对应源码 AssistantListPanel.tsx 中搜索切换按钮的图标切换Search ↔ CloseSmall、再次点击清空searchQuery并折叠以及searchQuery非空时即使折叠搜索栏也保持可见的行为。P0-2覆盖 F-L-07/B-08/B-09核心是验证点击卡片主体打开编辑器而点击 Switch / Duplicate 因stopPropagation不触发卡片主体的 onClick。实现中通过[data-testid^assistant-card-]取卡片、switch-enabled-id验证 Switch 切换后 Drawer 保持关闭并断言 Duplicate 打开的编辑器 Save 按钮文案为 CreateisCreatingtrue。P0-3覆盖 F-R-03/F-R-04/F-R-05验证删除弹窗 DeleteAssistantModal.tsx 中渲染 Avatar 名称 描述确认按钮为 danger 样式、文案 Delete。用例中的确认流程与源码data-testidmodal-delete-assistant对应。P0-4验证路由?highlightid交互流程需求 3.2 节滚动到卡片、添加border-primary-5 bg-primary-1高亮 2 秒、随后清空 query。对应 AssistantListPanel.tsx 中约 66-81 行的useEffectsetTimeout2 秒 cleanup。注意当前仓库中 Assistant 设置页 UI 已从右侧 Drawer 编辑器演化为全页编辑器见 AssistantEditorPage.tsx因此实现文件中的 P0 用例函数名已相应更新为create assistant opens full-page editor and save returns to list、card body opens editor, switch toggles in place等见 core-interactions.e2e.ts。映射文档记录的是当时冻结的用例标题阅读时以实际代码为准。4. P1 UI 状态26/27 实现1 废弃对细节状态的穷举验证P1 是推荐测级别针对大量 UI 状态细节。26 个活跃用例全部落在 ui-states.e2e.ts 中可归为以下几类4.1 搜索行为P1-1、P1-2P1-1search input auto-focuses on expand验证展开搜索后输入框自动聚焦对应 F-S-04。P1-2search with blank query does not filter验证仅空格查询trim 后为空串不过滤列表对应 F-S-07/B-01源码逻辑见assistantUtils.ts的归一化判断。4.2 来源标签与行级操作P1-3、P1-5、P1-12P1-3custom assistant shows source tag, builtin does notCustom 卡片显示来源标签Builtin 不显示F-L-06。P1-5duplicate button only visible on hoverDuplicate 按钮默认不可见、hover 可见、移开后再次不可见F-L-03。P1-12main agent dropdown shows extension tagMain Agent 下拉中opt.isExtensiontrue的选项显示 Extension tagF-E-10。4.3 Drawer 结构与响应式P1-7、P1-8、P1-22、P1-23、P1-24P1-7 / P1-8右上 Close 图标、footer Cancel 按钮均能关闭 DrawerF-E-02/F-E-05。P1-22drawer width responds to viewport size在 480/1024/2048 viewport 下验证公式Math.min(1024, Math.max(480, width * 0.5))期望宽度分别为 480px / 512px / 1024pxF-E-01。P1-23session storage intent opens assistant editor写入sessionStorage[guid.openAssistantEditorIntent]后导航到页面Drawer 自动打开且 intent 被清理需求 3.3 节对应 index.tsx 中读取 intent 后sessionStorage.removeItem的逻辑。P1-24mobile layout stacks buttons vertically and full width375px 移动端下按钮/搜索区flex-col纵向排列Create 按钮!w-full且!h-36pxF-L-10。4.4 Rules 区P1-9、P1-10、P1-11P1-9rules section expand collapse toggles heightExpand 后容器高度变为 420pxCollapse 后恢复初始 260/220pxF-E-06。P1-10rules section edit preview tab switchEdit 显示 textareaPreview 空内容显示占位文案、有内容渲染 MarkdownF-E-07/F-E-08。P1-11rules preview shows empty placeholder专门验证 No content to preview 占位文案F-E-08。4.5 Skills 区状态P1-13 ~ P1-21、P1-25、P1-27P1-13skills section header shows count and status dot分组 Header 显示 N/M 格式计数 8px 状态点激活绿、无灰。P1-14 / P1-15无 Pending 时不显示 PENDING 标签、无 Custom 时不显示 CUSTOM 标签空态验证F-SK-05/F-SK-06。P1-16builtin skill checkbox unchecks without modalBuiltin 技能通过 Checkbox 取消勾选不触发删除弹窗F-SK-08实现细节见下文偏差分析。P1-18auto-injected section shows when configured有 Auto-injected 配置的 Builtin 助手显示该分组F-SK-10。P1-19custom skills section shows empty stateImported/Custom 分组空态文案 No custom skills addedF-SK-11。P1-20 / P1-21AddSkillsModal 顶部外部源 pill 渲染与激活切换、已添加技能显示 Added 且 disabledF-A-01/F-A-05。P1-25skills modal clears search on closeModal 关闭时清空searchExternalQuery重开后搜索框为空F-A-07。P1-26section headers show countEnabled/Disabled 区段标题显示 (N) 数量F-L-05。P1-27summary skills count tag shows correct initial stateSummary 区技能计数 Tag 颜色0gray0greenF-E-09。P1 用例如下的实现行号与函数名对应关系节选用例 ID实现行号测试函数名P1-127test(P1-1: search input auto-focuses on expand)P1-389test(P1-3: custom assistant shows source tag, builtin does not)P1-13419test(P1-13: skills section header shows count and status dot)P1-16609test(P1-16: builtin skill checkbox unchecks without modal)P1-20976test(P1-20: skills modal source pills render and switch)P1-22819test(P1-22: drawer width responds to viewport size)P1-23883test(P1-23: session storage intent opens assistant editor)P1-27772test(P1-27: summary skills count tag shows correct initial state)5. P2 边界用例5/5清理、组合过滤与弹窗校验P2 是可选/辅助级别全部落在 edge-cases.e2e.ts 中用例 ID用例标题实现行号测试函数名P2-1高亮动画中途离开页面无 warning12test(P2-1: highlight animation cleanup on unmount)P2-2搜索 Tab 过滤同时生效空态57test(P2-2: search and tab filter both apply empty state)P2-3Pending/Custom 技能 hover 显示删除按钮104test(P2-3: skill delete button visible on hover)P2-4AddCustomPathModal OK 按钮 disabled 规则192test(P2-4: add custom path ok button disabled when empty)P2-5AddCustomPathModal 选择目录按钮触发 dialog.showOpen275test(P2-5: add custom path folder button triggers dialog)几个值得注意的实现细节P2-1监听page.on(console)收集 error/warning导航离开后断言不存在包含memory/timer/cleanup的警告验证高亮useEffect的 cleanup 正确清理 timer对应需求 B-14源码见 AssistantListPanel.tsx 中return () clearTimeout(timer)。P2-3实现比文档更细粒度——先通过fs在测试进程中创建临时技能目录并写入SKILL.md再通过httpPost(page, /api/skills/external-paths, ...)注册外部技能源实际验证 Pending/Custom 技能的 hover 删除按钮并在结尾通过httpInvoke(page, DELETE, /api/skills/external-paths, ...)rmSync完成环境清理。P2-4穷举 4 种输入组合Name 空 / Path 空 / 两者仅空格 / 两者均非空验证 OK 按钮 disabled/enabled 规则对应 F-P-03源码见 AddCustomPathModal.tsx 的 trim 校验。P2-5在真实 E2E 环境中无法轻易 mock Electron 原生dialog.showOpenDialog实现退化为验证点击文件夹按钮不崩溃、Path 值保持不变测试用例文档中则给出了用window.electron.dialog.showOpenmock 返回路径的方案见 test-cases.zh.md P2-5两者对 F-P-02 的验证深度不同属于文档与实现的可接受差异。6. 废弃用例深度解析P1-17 为什么被砍掉P1-17Pending/Custom 技能删除弹窗是 38 个用例中唯一被废弃的映射文档给出了四条明确理由Pending Skills 是 React state 临时数据invokeBridge无法构造这种纯前端运行态数据无法在测试中稳定前置Custom Skills 需预置外部文件系统路径依赖真实磁盘路径测试环境难以保证Builtin Skills 无删除按钮只能通过 Checkbox 取消勾选这正是 P1-16 验证的行为不存在删除弹窗入口F-SC-01/F-SC-02 在补充测试范围内不可测删除弹窗需求本身无法通过当前 bridge 能力覆盖。该用例的废弃记录位置在 discussion-log.zh.md2026-04-21 · 门 3 · Designer 第 3 轮修订。P1-14/P1-15 的空态验证已覆盖 PENDING/CUSTOM 标签的渲染逻辑因此删除该用例不损失标签层的覆盖率。这一案例的工程价值在于当测试用例依赖无法构造的前置数据时与其强行 mock 或写脆弱测试不如明确废弃并说明理由用相邻用例补位。7. 实现偏差检查文档与代码的逐项对账映射文档记录了实现偏差检查的方法论与结论7.1 检查方法三步走读取 test-cases.zh.md 中的验证步骤读取对应实现文件的测试代码对比验证点、断言、交互步骤是否一致。7.2 检查结果✅ 无重大偏差——所有 37 个活跃用例实现与文档定义一致包括前置条件构造正确、验证步骤完整、断言目标准确、清理操作到位。7.3 两处实现比文档更全面的微小差异P1-16 Builtin Skills Checkbox 取消勾选文档定义 8 个测试步骤实现包含更详细的分支判断逻辑——先查找第一个已勾选的 skill若无则勾选第一个再取消勾选。状态✅ 实现比文档更全面。P2-3 Pending/Custom 技能 hover 显示删除按钮文档描述单一 hover 行为实现拆分为两个子测试Pending Custom分别验证。状态✅ 实现比文档更细粒度。这类实现 文档的差异不影响覆盖度反而说明实施阶段对边界情况做了更充分的考虑。8. 门 3 设计师跟进记录设计阶段就解决可测性问题映射文档还沉淀了设计Designer与实施Engineer协作中解决的三类关键问题这是整份文档中最具方法论价值的部分。8.1 设计阶段发现的三个可测性问题问题根因解决方案影响用例问题 1P1-14~18 原设计依赖外部数据Pending/Custom Skills外部数据在测试环境不可控调整为空态验证v1.1P1-14, P1-15, P1-16, P1-17, P1-18问题 2P1-16 原设计假设 Builtin Skills 有删除按钮源码显示 Builtin Skills 只有 Checkbox、无删除按钮完全重写 P1-16改为验证 Checkbox 取消勾选不触发删除弹窗v1.3P1-16, P1-17废弃问题 3P1-18 原设计假设大部分 Builtin 无 Auto-injected SkillsassistantPresets.ts显示几乎所有 Builtin 都有defaultEnabledSkills反转验证逻辑改为正向验证有 Auto-injected 时显示该分组v1.2P1-18问题 3 尤其值得注意当假设数据不存在的用例因真实数据分布而站不住脚时把断言方向反转从不显示改为显示往往能让用例变得稳定且更有价值。8.2 实施阶段的三项协助协助 1v1.2所有用例的清理操作从文字描述改为可执行代码块解决 Drawer 未关闭导致后续测试失败的问题——清理操作可执行化是串行 E2E 套件稳定性的关键。协助 2v1.2 → v1.3P1-16 skill card 定位器从[class*skill-card]不存在改为div.flex.items-start.gap-8px.p-8px实际 DOM 结构——以真实 DOM 结构校准定位器避免选择器匹配空集导致测试假通过。协助 3v1.3P1-16 添加 skip 逻辑新 assistant 无 Builtin Skills 时跳过测试——数据不满足前置条件时显式 skip 而非失败这是依赖外部数据的用例的标准做法。8.3 最终交付状态✅ test-cases.zh.md v1.3 与实现 100% 对应✅ 37/37 活跃用例全部通过0 skip/fixme/only✅ 173 张截图覆盖所有测试场景✅ discussion-log.zh.md 完整记录 3 轮修订历史✅ 无重大实现偏差9. 从映射文档提炼的 E2E 工程实践要点结合 test-cases.zh.md 的测试实施注意事项一节与实现文件可以提炼出如下可复用的工程实践9.1 数据依赖处理能 skip 就 skip别硬造用例数据依赖处理策略P0-6, P1-6存在 Extension 助手ID 前缀ext-无则test.skip(true, ...)P1-14 ~ P1-17外部技能源 / Pending/Custom 技能mock 或 skipP1-18Builtin 助手有 Auto-injected Skills用builtin-agent如有P1-21已添加的技能skip 或 mock9.2 缺失 contenteditable="false">【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20 more CLI Agent | Customize your assistants | Team them upStar if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
AionUi Assistant 设置页 E2E 实现映射指南：从 38 条测试用例到可执行 Playwright 代码的追踪与质量保障
AionUi Assistant 设置页 E2E 实现映射指南从 38 条测试用例到可执行 Playwright 代码的追踪与质量保障【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20 more CLI Agent | Customize your assistants | Team them upStar if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi导读本文基于 AionUi 仓库中 implementation-mapping.zh.md 这一实现映射文档完整剖析 Assistant助手设置页补充 E2E 测试从用例定义到代码落地的全过程38 个测试用例如何分布到 3 个实现文件、37 个活跃用例的优先级统计与截图质量标准、废弃用例的判定逻辑、实现偏差检查方法以及设计Designer与实施Engineer两阶段的关键协作记录。读完本文你将掌握如何为复杂设置页建立用例文档 ↔ 测试代码的可追溯映射表并理解如何用统计指标覆盖率、截图数、达标率为 E2E 套件的质量设卡把关。1. 背景为什么需要实现映射文档AionUi 的 Assistant 设置页是一个管理所有 AI 助手的复杂界面助手按来源分为三类来源requirements.zh.md 第 1 节Builtin内置由ASSISTANT_PRESETS预置ID 前缀builtin-Extension扩展由已加载的 extension 贡献ID 前缀ext-Custom自定义用户自行创建当测试需求文档 test-cases.zh.md 将需求文档第 8 章的补充测试清单细化为 38 条可执行的 Playwright 用例后就面临一个工程问题如何证明文档里写的用例确实变成了仓库里的测试代码且二者行为一致这正是实现映射文档的职责——它是需求门 1→ 用例门 2→ 代码门 3这条流水线的最终对账清单。该文档的元信息如下来源文档头部生成时间2026-04-21实现目录tests/e2e/features/assistants/文档版本test-cases.zh.md v1.32. 总体统计概览覆盖率、截图数与达标率映射文档开篇即给出四张关键统计表这是整套测试质量的仪表盘。2.1 优先级维度统计类别文档定义实际实现状态P0 核心交互66✅ 100%P1 UI 状态2726⚠️ P1-17 废弃P2 边界用例55✅ 100%总计3837✅ 97%37/38 active2.2 截图密度统计截图总数173 次takeScreenshot()调用平均截图数/测试4.7 张按优先级分组P0 平均 4.84~6P1 平均 4.13~8P2 平均 6.44~8达标率≥3 张三个优先级均为 100%37/37这一截图数 ≥3 张的质量标准意味着每个用例不仅要断言通过还要留下足够多、覆盖关键状态节点的可视化证据便于后续人工 review 与缺陷回溯。文档明确注明截图数不足 3 的用例0 个——所有活跃用例均达标。从实现端验证三个实现文件均导入了takeScreenshothelper见 core-interactions.e2e.ts、ui-states.e2e.ts、edge-cases.e2e.ts且截图路径均按assistants/用例ID/序号-语义.png的约定组织例如p0-3/01-delete-preview.png、p2-1/04-final-state.png方便按用例归档。3. P0 核心交互6/6搜索、点击隔离、删除预览、高亮与技能弹窗P0 是必测级别聚焦最核心的用户交互。全部 6 条用例落在 core-interactions.e2e.ts 中映射关系如下用例 ID用例标题实现行号测试函数名P0-1搜索栏展开/折叠按钮行为 图标切换22test(P0-1: search toggle — expand/collapse with icon change)P0-2卡片点击区域隔离主体 vs 右侧操作区61test(P0-2: card click isolation — body opens drawer, actions do not)P0-3Delete 确认弹窗含助手预览卡片130test(P0-3: delete modal shows assistant preview card)P0-4highlightId 滚动到卡片并高亮 2 秒之后清 query196test(P0-4: highlight assistant card via query param)P0-5AddSkillsModal 搜索框过滤 无结果文案239test(P0-5: skills modal search filters and shows empty state)P0-6Extension 助手 Skills 区渲染验证286test(P0-6: extension assistant shows skills section)这些用例覆盖的需求编号可在 requirements.zh.md 中逐一溯源。例如P0-1覆盖 F-S-01/F-S-02/F-S-03/F-S-08对应源码 AssistantListPanel.tsx 中搜索切换按钮的图标切换Search ↔ CloseSmall、再次点击清空searchQuery并折叠以及searchQuery非空时即使折叠搜索栏也保持可见的行为。P0-2覆盖 F-L-07/B-08/B-09核心是验证点击卡片主体打开编辑器而点击 Switch / Duplicate 因stopPropagation不触发卡片主体的 onClick。实现中通过[data-testid^assistant-card-]取卡片、switch-enabled-id验证 Switch 切换后 Drawer 保持关闭并断言 Duplicate 打开的编辑器 Save 按钮文案为 CreateisCreatingtrue。P0-3覆盖 F-R-03/F-R-04/F-R-05验证删除弹窗 DeleteAssistantModal.tsx 中渲染 Avatar 名称 描述确认按钮为 danger 样式、文案 Delete。用例中的确认流程与源码data-testidmodal-delete-assistant对应。P0-4验证路由?highlightid交互流程需求 3.2 节滚动到卡片、添加border-primary-5 bg-primary-1高亮 2 秒、随后清空 query。对应 AssistantListPanel.tsx 中约 66-81 行的useEffectsetTimeout2 秒 cleanup。注意当前仓库中 Assistant 设置页 UI 已从右侧 Drawer 编辑器演化为全页编辑器见 AssistantEditorPage.tsx因此实现文件中的 P0 用例函数名已相应更新为create assistant opens full-page editor and save returns to list、card body opens editor, switch toggles in place等见 core-interactions.e2e.ts。映射文档记录的是当时冻结的用例标题阅读时以实际代码为准。4. P1 UI 状态26/27 实现1 废弃对细节状态的穷举验证P1 是推荐测级别针对大量 UI 状态细节。26 个活跃用例全部落在 ui-states.e2e.ts 中可归为以下几类4.1 搜索行为P1-1、P1-2P1-1search input auto-focuses on expand验证展开搜索后输入框自动聚焦对应 F-S-04。P1-2search with blank query does not filter验证仅空格查询trim 后为空串不过滤列表对应 F-S-07/B-01源码逻辑见assistantUtils.ts的归一化判断。4.2 来源标签与行级操作P1-3、P1-5、P1-12P1-3custom assistant shows source tag, builtin does notCustom 卡片显示来源标签Builtin 不显示F-L-06。P1-5duplicate button only visible on hoverDuplicate 按钮默认不可见、hover 可见、移开后再次不可见F-L-03。P1-12main agent dropdown shows extension tagMain Agent 下拉中opt.isExtensiontrue的选项显示 Extension tagF-E-10。4.3 Drawer 结构与响应式P1-7、P1-8、P1-22、P1-23、P1-24P1-7 / P1-8右上 Close 图标、footer Cancel 按钮均能关闭 DrawerF-E-02/F-E-05。P1-22drawer width responds to viewport size在 480/1024/2048 viewport 下验证公式Math.min(1024, Math.max(480, width * 0.5))期望宽度分别为 480px / 512px / 1024pxF-E-01。P1-23session storage intent opens assistant editor写入sessionStorage[guid.openAssistantEditorIntent]后导航到页面Drawer 自动打开且 intent 被清理需求 3.3 节对应 index.tsx 中读取 intent 后sessionStorage.removeItem的逻辑。P1-24mobile layout stacks buttons vertically and full width375px 移动端下按钮/搜索区flex-col纵向排列Create 按钮!w-full且!h-36pxF-L-10。4.4 Rules 区P1-9、P1-10、P1-11P1-9rules section expand collapse toggles heightExpand 后容器高度变为 420pxCollapse 后恢复初始 260/220pxF-E-06。P1-10rules section edit preview tab switchEdit 显示 textareaPreview 空内容显示占位文案、有内容渲染 MarkdownF-E-07/F-E-08。P1-11rules preview shows empty placeholder专门验证 No content to preview 占位文案F-E-08。4.5 Skills 区状态P1-13 ~ P1-21、P1-25、P1-27P1-13skills section header shows count and status dot分组 Header 显示 N/M 格式计数 8px 状态点激活绿、无灰。P1-14 / P1-15无 Pending 时不显示 PENDING 标签、无 Custom 时不显示 CUSTOM 标签空态验证F-SK-05/F-SK-06。P1-16builtin skill checkbox unchecks without modalBuiltin 技能通过 Checkbox 取消勾选不触发删除弹窗F-SK-08实现细节见下文偏差分析。P1-18auto-injected section shows when configured有 Auto-injected 配置的 Builtin 助手显示该分组F-SK-10。P1-19custom skills section shows empty stateImported/Custom 分组空态文案 No custom skills addedF-SK-11。P1-20 / P1-21AddSkillsModal 顶部外部源 pill 渲染与激活切换、已添加技能显示 Added 且 disabledF-A-01/F-A-05。P1-25skills modal clears search on closeModal 关闭时清空searchExternalQuery重开后搜索框为空F-A-07。P1-26section headers show countEnabled/Disabled 区段标题显示 (N) 数量F-L-05。P1-27summary skills count tag shows correct initial stateSummary 区技能计数 Tag 颜色0gray0greenF-E-09。P1 用例如下的实现行号与函数名对应关系节选用例 ID实现行号测试函数名P1-127test(P1-1: search input auto-focuses on expand)P1-389test(P1-3: custom assistant shows source tag, builtin does not)P1-13419test(P1-13: skills section header shows count and status dot)P1-16609test(P1-16: builtin skill checkbox unchecks without modal)P1-20976test(P1-20: skills modal source pills render and switch)P1-22819test(P1-22: drawer width responds to viewport size)P1-23883test(P1-23: session storage intent opens assistant editor)P1-27772test(P1-27: summary skills count tag shows correct initial state)5. P2 边界用例5/5清理、组合过滤与弹窗校验P2 是可选/辅助级别全部落在 edge-cases.e2e.ts 中用例 ID用例标题实现行号测试函数名P2-1高亮动画中途离开页面无 warning12test(P2-1: highlight animation cleanup on unmount)P2-2搜索 Tab 过滤同时生效空态57test(P2-2: search and tab filter both apply empty state)P2-3Pending/Custom 技能 hover 显示删除按钮104test(P2-3: skill delete button visible on hover)P2-4AddCustomPathModal OK 按钮 disabled 规则192test(P2-4: add custom path ok button disabled when empty)P2-5AddCustomPathModal 选择目录按钮触发 dialog.showOpen275test(P2-5: add custom path folder button triggers dialog)几个值得注意的实现细节P2-1监听page.on(console)收集 error/warning导航离开后断言不存在包含memory/timer/cleanup的警告验证高亮useEffect的 cleanup 正确清理 timer对应需求 B-14源码见 AssistantListPanel.tsx 中return () clearTimeout(timer)。P2-3实现比文档更细粒度——先通过fs在测试进程中创建临时技能目录并写入SKILL.md再通过httpPost(page, /api/skills/external-paths, ...)注册外部技能源实际验证 Pending/Custom 技能的 hover 删除按钮并在结尾通过httpInvoke(page, DELETE, /api/skills/external-paths, ...)rmSync完成环境清理。P2-4穷举 4 种输入组合Name 空 / Path 空 / 两者仅空格 / 两者均非空验证 OK 按钮 disabled/enabled 规则对应 F-P-03源码见 AddCustomPathModal.tsx 的 trim 校验。P2-5在真实 E2E 环境中无法轻易 mock Electron 原生dialog.showOpenDialog实现退化为验证点击文件夹按钮不崩溃、Path 值保持不变测试用例文档中则给出了用window.electron.dialog.showOpenmock 返回路径的方案见 test-cases.zh.md P2-5两者对 F-P-02 的验证深度不同属于文档与实现的可接受差异。6. 废弃用例深度解析P1-17 为什么被砍掉P1-17Pending/Custom 技能删除弹窗是 38 个用例中唯一被废弃的映射文档给出了四条明确理由Pending Skills 是 React state 临时数据invokeBridge无法构造这种纯前端运行态数据无法在测试中稳定前置Custom Skills 需预置外部文件系统路径依赖真实磁盘路径测试环境难以保证Builtin Skills 无删除按钮只能通过 Checkbox 取消勾选这正是 P1-16 验证的行为不存在删除弹窗入口F-SC-01/F-SC-02 在补充测试范围内不可测删除弹窗需求本身无法通过当前 bridge 能力覆盖。该用例的废弃记录位置在 discussion-log.zh.md2026-04-21 · 门 3 · Designer 第 3 轮修订。P1-14/P1-15 的空态验证已覆盖 PENDING/CUSTOM 标签的渲染逻辑因此删除该用例不损失标签层的覆盖率。这一案例的工程价值在于当测试用例依赖无法构造的前置数据时与其强行 mock 或写脆弱测试不如明确废弃并说明理由用相邻用例补位。7. 实现偏差检查文档与代码的逐项对账映射文档记录了实现偏差检查的方法论与结论7.1 检查方法三步走读取 test-cases.zh.md 中的验证步骤读取对应实现文件的测试代码对比验证点、断言、交互步骤是否一致。7.2 检查结果✅ 无重大偏差——所有 37 个活跃用例实现与文档定义一致包括前置条件构造正确、验证步骤完整、断言目标准确、清理操作到位。7.3 两处实现比文档更全面的微小差异P1-16 Builtin Skills Checkbox 取消勾选文档定义 8 个测试步骤实现包含更详细的分支判断逻辑——先查找第一个已勾选的 skill若无则勾选第一个再取消勾选。状态✅ 实现比文档更全面。P2-3 Pending/Custom 技能 hover 显示删除按钮文档描述单一 hover 行为实现拆分为两个子测试Pending Custom分别验证。状态✅ 实现比文档更细粒度。这类实现 文档的差异不影响覆盖度反而说明实施阶段对边界情况做了更充分的考虑。8. 门 3 设计师跟进记录设计阶段就解决可测性问题映射文档还沉淀了设计Designer与实施Engineer协作中解决的三类关键问题这是整份文档中最具方法论价值的部分。8.1 设计阶段发现的三个可测性问题问题根因解决方案影响用例问题 1P1-14~18 原设计依赖外部数据Pending/Custom Skills外部数据在测试环境不可控调整为空态验证v1.1P1-14, P1-15, P1-16, P1-17, P1-18问题 2P1-16 原设计假设 Builtin Skills 有删除按钮源码显示 Builtin Skills 只有 Checkbox、无删除按钮完全重写 P1-16改为验证 Checkbox 取消勾选不触发删除弹窗v1.3P1-16, P1-17废弃问题 3P1-18 原设计假设大部分 Builtin 无 Auto-injected SkillsassistantPresets.ts显示几乎所有 Builtin 都有defaultEnabledSkills反转验证逻辑改为正向验证有 Auto-injected 时显示该分组v1.2P1-18问题 3 尤其值得注意当假设数据不存在的用例因真实数据分布而站不住脚时把断言方向反转从不显示改为显示往往能让用例变得稳定且更有价值。8.2 实施阶段的三项协助协助 1v1.2所有用例的清理操作从文字描述改为可执行代码块解决 Drawer 未关闭导致后续测试失败的问题——清理操作可执行化是串行 E2E 套件稳定性的关键。协助 2v1.2 → v1.3P1-16 skill card 定位器从[class*skill-card]不存在改为div.flex.items-start.gap-8px.p-8px实际 DOM 结构——以真实 DOM 结构校准定位器避免选择器匹配空集导致测试假通过。协助 3v1.3P1-16 添加 skip 逻辑新 assistant 无 Builtin Skills 时跳过测试——数据不满足前置条件时显式 skip 而非失败这是依赖外部数据的用例的标准做法。8.3 最终交付状态✅ test-cases.zh.md v1.3 与实现 100% 对应✅ 37/37 活跃用例全部通过0 skip/fixme/only✅ 173 张截图覆盖所有测试场景✅ discussion-log.zh.md 完整记录 3 轮修订历史✅ 无重大实现偏差9. 从映射文档提炼的 E2E 工程实践要点结合 test-cases.zh.md 的测试实施注意事项一节与实现文件可以提炼出如下可复用的工程实践9.1 数据依赖处理能 skip 就 skip别硬造用例数据依赖处理策略P0-6, P1-6存在 Extension 助手ID 前缀ext-无则test.skip(true, ...)P1-14 ~ P1-17外部技能源 / Pending/Custom 技能mock 或 skipP1-18Builtin 助手有 Auto-injected Skills用builtin-agent如有P1-21已添加的技能skip 或 mock9.2 缺失 contenteditable="false">【免费下载链接】AionUiOpen-source 24/7 Cowork app for OpenClaw, Hermes, Claude Code, Codex, OpenCode and 20 more CLI Agent | Customize your assistants | Team them upStar if you like it!项目地址: https://gitcode.com/GitHub_Trending/ai/AionUi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
