AionUi Skills Hub E2E 测试实现映射解析29 个用例如何落到 10 个测试文件【免费下载链接】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/AionUiSkills Hub技能中心是 AionUi 桌面端统一管理 AI Agent 技能的设置页面支持技能的导入、导出、删除、搜索与分类展示。本文基于tests/e2e/docs/skills-hub/implementation-mapping.zh.md完整还原其记录的 29 个 E2E 测试用例与 10 个实现文件之间的映射关系并结合作战仓库中的需求文档、测试用例设计、测试策略与实际 E2E 代码讲清每一个用例的验证目标、实现位置与底层调用链。读完本文你将掌握如何阅读测试用例 → 实现文件 → 断言模式三层映射如何在 AionUi 中按优先级运行 Skills Hub E2E 测试以及这套 29/29 全覆盖、126 张截图的测试资产是如何组织与维护的。一、映射文档的背景从需求到实现的完整链路implementation-mapping.zh.md是 Skills Hub E2E 测试体系的追踪索引——它不定义测试本身而是记录tests/e2e/docs/skills-hub/test-cases.zh.md中设计的 29 个测试用例v1.3 版实际落在哪些实现文件中。该体系由四份文档构成一条完整链路文档相对路径职责需求文档tests/e2e/docs/skills-hub/requirements.zh.md描述功能、数据模型、边界约束门 1测试策略tests/e2e/docs/skills-hub/test-strategy.zh.md描述如何测试这些功能门 2测试用例tests/e2e/docs/skills-hub/test-cases.zh.md具体测试用例设计门 2实现映射tests/e2e/docs/skills-hub/implementation-mapping.zh.md用例与实现文件的对应关系映射文档的元信息给出了关键上下文生成时间2026-04-21实现目录tests/e2e/features/settings/skills/文档版本test-cases.zh.md v1.3从源码结构看E2E 测试资产与功能实现保持了清晰的分层功能代码位于 packages/desktop/src/renderer/pages/settings/SkillsSettings/SkillsHubSettings.tsx测试代码则统一收敛在tests/e2e/features/settings/skills/目录下测试辅助函数导航、Bridge 断言、数据构造、清理集中在 tests/e2e/helpers/skillsHub.ts。Skills Hub 测试的四大功能板块根据需求文档Skills Hub 页面围绕四类技能来源展开这也正是 29 个测试用例的覆盖对象我的技能My Skills展示用户已导入的 builtin 与 custom 技能支持搜索、刷新、删除仅 custom、导出发现外部技能Discovered External Skills自动扫描 Claude Code、Gemini CLI、OpenCode 等常见 CLI 工具的技能目录支持 Tab 切换、单项/批量导入、自定义路径管理扩展技能Extension Skills由扩展ExtensionRegistry贡献只读展示自动注入技能Auto-injected Skills位于_builtin/目录无需用户选择。映射文档中 29 个用例按 P0/P1/P2/P3 四档优先级组织全部实现、全部通过。二、统计概览29/29 全量覆盖映射文档开篇的统计表是整份文档的核心结论类别文档定义实际实现状态P0 核心交互88✅ 100%P1 功能验证1515✅ 100%P2 边界用例55✅ 100%P3 性能测试11✅ 100%总计2929✅ 100% (29/29)同时文档给出了两个重要的量化指标截图总数126 次takeScreenshot()调用平均截图数/测试4.3 张结合测试策略文档优先级定义如下P0 为核心功能、阻塞发布每次提交执行P1 为重要功能、影响用户体验每日构建执行P2 为辅助功能、边界场景每周回归P3 为极端场景、低频使用发布前回归。每个用例的编号遵循TC-S-Test Case - Skills前缀、从01递增的规则。三、P0 核心交互8/8主干功能全链路验证P0 档覆盖 Skills Hub 的主干操作链路8 个用例分布在core-ui.e2e.ts与refresh-empty-tabs.e2e.ts两个文件中用例 ID用例标题实现文件行号截图数TC-S-01渲染我的技能列表基础场景tests/e2e/features/settings/skills/core-ui.e2e.ts683TC-S-02搜索技能匹配场景tests/e2e/features/settings/skills/search.e2e.ts413TC-S-05删除自定义技能成功场景tests/e2e/features/settings/skills/core-ui.e2e.ts1365TC-S-08渲染外部技能列表单源场景tests/e2e/features/settings/skills/core-ui.e2e.ts2644TC-S-09Tab 切换外部源多源场景tests/e2e/features/settings/skills/refresh-empty-tabs.e2e.ts1374TC-S-10单项导入外部技能成功场景tests/e2e/features/settings/skills/core-ui.e2e.ts3225TC-S-16添加自定义外部路径成功场景tests/e2e/features/settings/skills/core-ui.e2e.ts3867TC-S-19导出技能到外部源成功场景tests/e2e/features/settings/skills/core-ui.e2e.ts4735P0 小计8 个测试36 张截图。TC-S-01渲染我的技能列表该用例验证我的技能板块的基础渲染前置条件要求~/.aionui/skills/中存在 2 个测试技能一个 builtin、一个 custom随后导航到#/settings/skills断言板块容器my-skills-section可见、2 张技能卡片渲染且包含头像、名称、描述、来源标签。实际实现core-ui.e2e.ts:68展示了完整的测试模式先通过createTempExternalSource()创建临时外部源目录用createTestSkill()生成带SKILL.md的真实技能再经 Bridge 导入到我的技能随后以 UI 断言卡片可见、名称文本可见 Bridge 断言getMySkills()返回包含 2 个E2E-Test-前缀技能双重验证最后在finally中清理。TC-S-05删除自定义技能确认弹窗这是最能体现混合断言价值的用例。测试步骤为预置 custom 技能 → Hover 卡片显示删除按钮 → 点击btn-delete-${normalizedName}→ 确认 Modal.modal-delete-skill .arco-modal→ 点击.arco-btn-primary→ 验证 Modal 关闭、成功 Message 出现.arco-message-success、卡片消失并用 Bridge 确认后端列表不再包含该技能。值得注意的实现细节实际代码core-ui.e2e.ts:130使用E2E-Test-Delete-Target-${Date.now()}生成唯一技能名以避免并发冲突并且不校验 i18n 文案注释明确说明dont check i18n text只依赖.arco-message-success这个 Arco Design 组件类名这大大增强了测试对多语言环境的稳定性。TC-S-16 与 TC-S-19添加外部路径与导出这两个用例分别走通添加自定义外部路径和导出技能到外部源的完整 UI 流程。TC-S-19 的实现core-ui.e2e.ts:547有一个值得学习的细节由于后端detectAndCountExternalSkills只返回至少包含 1 个技能的外部源测试必须先向导出目标目录塞一个占位技能E2E-Placeholder-Skill目标源才会出现在 Dropdown 中此外该用例做了文件系统级断言fs.existsSync(exportedSkillPath)与SKILL.md存在并输出完整诊断日志导出目标内容、技能 location、外部源 skills 数量等以便排查失败。这与测试策略文档E2E 不验证 symlink的默认约定略有差异属于实现中的强化。四、P1 功能验证15/15功能完整性与体验细节P1 档是数量最多的一档15 个用例覆盖搜索空态、刷新、删除保护、批量导入、路径校验、URL 高亮、板块渲染与文件夹导入用例 ID用例标题实现文件行号截图数TC-S-03搜索技能无匹配场景tests/e2e/features/settings/skills/search.e2e.ts1123TC-S-04刷新技能列表tests/e2e/features/settings/skills/refresh-empty-tabs.e2e.ts394TC-S-06删除 builtin 技能无删除按钮tests/e2e/features/settings/skills/core-ui.e2e.ts2193TC-S-07空状态展示无技能tests/e2e/features/settings/skills/refresh-empty-tabs.e2e.ts1043TC-S-11批量导入外部技能部分成功场景tests/e2e/features/settings/skills/batch-import.e2e.ts365TC-S-12搜索外部技能匹配场景tests/e2e/features/settings/skills/search.e2e.ts1523TC-S-13搜索外部技能无匹配场景tests/e2e/features/settings/skills/search.e2e.ts2063TC-S-14刷新外部技能列表tests/e2e/features/settings/skills/path-export.e2e.ts454TC-S-17添加自定义路径路径重复场景tests/e2e/features/settings/skills/path-export.e2e.ts1095TC-S-18添加自定义路径必填验证tests/e2e/features/settings/skills/path-export.e2e.ts1697TC-S-20导出技能目标已存在场景tests/e2e/features/settings/skills/path-export.e2e.ts2285TC-S-22URL 参数高亮技能成功场景tests/e2e/features/settings/skills/url-highlight.e2e.ts306TC-S-27渲染扩展技能板块tests/e2e/features/settings/skills/boards-rendering.e2e.ts264TC-S-28渲染自动注入技能板块tests/e2e/features/settings/skills/boards-rendering.e2e.ts604TC-S-29从文件夹导入技能Mock 场景tests/e2e/features/settings/skills/manual-import.e2e.ts296P1 小计15 个测试65 张截图。边界行为的反向断言TC-S-06 与 TC-S-07P1 档中有两个典型的反向/空态验证TC-S-06builtin 技能无删除按钮Hover builtin 技能卡片后断言删除按钮不可见。需求文档明确指出删除按钮仅在skill.source custom时渲染SkillsHubSettings.tsx中skill.source custom条件。实际实现core-ui.e2e.ts:289有一个环境感知的降级策略当运行环境dev sandbox 或全新 CI中没有 builtin 技能时builtin 目录指向 app bundle 资源仅打包构建才会填充测试会test.skip而非硬失败——因为该用例断言的是UI 行为无删除按钮而非夹具存在性这一降级逻辑在源码注释中引用了post-pilot/2026-04-23-skill-library-followups.md §P1-1。TC-S-07空状态展示用户技能目录为空时断言my-skills-section可见、显示No skills found. Import some to get started.空态提示、数量标记为0、无卡片渲染。用例设计文档中的已知问题传承映射文档引用的 test-cases.zh.md 在多个用例下标注了已知问题/已知限制这些信息在实现映射中同样重要TC-S-03搜索无匹配当前实现无法区分无技能与搜索无匹配两种场景两者显示相同提示对应需求文档 §2.1.1TC-S-11批量导入部分成功无 loading 状态、无进度反馈、无取消机制需求文档 §2.2.3TC-S-24特殊字符当前实现无特殊字符过滤依赖文件系统报错需求文档 §5.1.4TC-S-25大规模渲染无虚拟滚动建议技能数量 ≤ 100需求文档 §5.5.1。这些已知问题不是缺陷隐瞒而是 E2E 测试的边界契约——测试验证的是当前真实行为而非理想行为这正是用例设计 → 实现映射体系严谨性的体现。五、P2 边界用例5/5与 P3 性能测试1/1P2边界与异常场景用例 ID用例标题实现文件行号截图数TC-S-15空外部源状态无外部技能tests/e2e/features/settings/skills/edge-cases.e2e.ts564TC-S-21导出技能无外部源场景tests/e2e/features/settings/skills/edge-cases.e2e.ts1004TC-S-23URL 参数高亮技能技能不存在场景tests/e2e/features/settings/skills/edge-cases.e2e.ts1514TC-S-24技能名称包含特殊字符导入场景tests/e2e/features/settings/skills/special-cases.e2e.ts344TC-S-26并发操作连续快速刷新tests/e2e/features/settings/skills/special-cases.e2e.ts1506P2 小计5 个测试22 张截图。这几个用例各有代表性TC-S-15当没有任何外部源预定义路径不存在、无自定义路径时整个发现外部技能板块不渲染external-skills-section不存在——这是一个元素应不存在的负向断言要求测试代码用toBeVisible()的反向断言而不是等待超时。TC-S-23URL 参数?highlightNonExistentSkill指向不存在的技能时应用不崩溃、无滚动动画、无高亮样式且 URL 参数仍被清除。这验证了前端对无效输入的容错。TC-S-24实际实现special-cases.e2e.ts:34覆盖了比用例设计更丰富的特殊字符集——中文名称E2E-Test-中文名称、含空格名称、含连字符名称验证这些名称在 Bridge 导入与 UI 渲染链路中的表现并输出导入结果的success状态日志用于排查。TC-S-26快速连续点击刷新按钮 3 次间隔 100ms断言第二次和第三次点击被阻止按钮禁用或无响应、仅触发 1 次刷新请求、刷新完成后正常显示成功提示。P3性能测试用例 ID用例标题实现文件行号截图数TC-S-25大规模技能列表渲染性能场景tests/e2e/features/settings/skills/special-cases.e2e.ts883P3 小计1 个测试3 张截图。TC-S-25 在用例设计文档中的预期为渲染时间 1 秒、滚动流畅、搜索输入响应延迟 100ms使用 Playwright 的 performance API实际实现则以渲染 20 个技能无性能问题为落点测试函数名为should handle rendering 20 skills without performance issues。从用例设计50 个技能到实现20 个技能的收敛呼应了测试策略文档中的成本考量E2E 成本高、数据构造慢100 由压测覆盖。六、截图数统计126 张截图覆盖全流程映射文档用两张统计表量化了截图覆盖情况这也是E2E 可视化审计的一部分——每张截图即一次界面状态的证据留存便于失败复现与人工审阅。按优先级分组优先级测试数总截图数平均截图数P08364.5P115654.3P25224.4P3133.0总计291264.3按文件分组文件名测试数总截图数core-ui.e2e.ts732path-export.e2e.ts421special-cases.e2e.ts313edge-cases.e2e.ts312search.e2e.ts412refresh-empty-tabs.e2e.ts311boards-rendering.e2e.ts28url-highlight.e2e.ts16manual-import.e2e.ts16batch-import.e2e.ts15总计29126从截图命名规范如skills-hub/tc-s-01/01-initial-my-skills.png可以看出截图按skills-hub/{用例ID}/{序号}-{状态描述}.png组织与takeScreenshot()辅助函数来自tests/e2e/helpers/screenshots.ts配合使用。实际实现中的截图数可能与文档记录略有出入例如 TC-S-01 实际实现只调用 3 次截图、TC-S-05 实际为 5 次文档记录的是定稿时的基准值更新流程中会用grep -c ^\s*await takeScreenshot file重新校准。七、十个实现文件的职责拆解映射文档对 10 个实现文件逐一说明了职责这本身就是按功能维度拆分测试的范例对应测试策略文档 §9.1核心 UI 测试core-ui.e2e.ts32 张截图P0 主干功能的 7 个用例我的技能列表渲染TC-S-01、自定义技能删除TC-S-05、builtin 技能删除按钮验证TC-S-06、外部技能列表渲染TC-S-08、单项导入外部技能TC-S-10、添加自定义外部路径TC-S-16、导出技能到外部源TC-S-19。实际实现中额外包含一个 TC-S-05b 批量删除用例通过btn-batch-manage进入批量管理模式说明该文件在文档记录后仍在演进。搜索功能测试search.e2e.ts12 张截图4 个搜索用例我的技能搜索匹配 TC-S-02 无匹配 TC-S-03、外部技能搜索匹配 TC-S-12 无匹配 TC-S-13。搜索断言属于纯 UI 断言——搜索仅影响前端显示无需 Bridge 验证见测试策略文档场景 3。路径与导出测试path-export.e2e.ts21 张截图4 个用例刷新外部技能列表TC-S-14、添加自定义路径重复场景TC-S-17、必填验证TC-S-18、导出目标已存在TC-S-20。刷新与空态测试refresh-empty-tabs.e2e.ts11 张截图3 个用例刷新我的技能列表TC-S-04、空状态展示TC-S-07、Tab 切换外部源TC-S-09。特殊场景测试special-cases.e2e.ts13 张截图3 个用例特殊字符技能名称TC-S-24、大规模技能列表渲染TC-S-25、并发快速刷新TC-S-26。边界用例测试edge-cases.e2e.ts12 张截图3 个用例空外部源状态TC-S-15、无外部源时导出TC-S-21、URL 高亮不存在的技能TC-S-23。板块渲染测试boards-rendering.e2e.ts8 张截图2 个用例扩展技能板块TC-S-27、自动注入技能板块TC-S-28各 4 张截图。v1.3 定稿时这两用例已移除所有 test.skip 限制无条件断言容器存在。批量导入测试batch-import.e2e.ts5 张截图1 个用例批量导入外部技能部分成功TC-S-11——验证2 skills imported计数与跳过已存在技能的行为。URL 高亮测试url-highlight.e2e.ts6 张截图1 个用例URL 参数高亮技能成功场景TC-S-22——验证scrollIntoView滚动、高亮样式border-primary-5边框 bg-primary-1背景、2 秒后样式消失、URL 参数清除。手动导入测试manual-import.e2e.ts6 张截图1 个用例从文件夹导入技能 Mock 场景TC-S-29——通过electronApp.evaluate覆写dialog.showOpenDialog返回预设路径绕过无法自动化的原生文件选择器。八、测试质量指标与基础设施质量指标映射文档原始数据截图覆盖率所有测试均含截图 29/29100%符合至少 3 张规则 29/29100%用例完整性P0 8/8、P1 15/15、P2 5/5、P3 1/1 全部 100%实现分布均衡性最大文件core-ui.e2e.ts7 个测试占 24.1%最小文件batch-import.e2e.ts、manual-import.e2e.ts、url-highlight.e2e.ts各 1 个测试占 3.4%平均每文件 2.9 个测试。支撑 29 个用例的三类基础设施1. testid 契约所有动态 testid 通过normalizeTestId()将技能名特殊字符转义为-const normalizeTestId (name: string) name.replace(/[:/\s|?*]/g, -); // 示例my:skill → my-skill-card-my-skilltest/skill → my-skill-card-test-skill在 tests/e2e/helpers/skillsHub.ts 中该函数被实际实现第 355 行并在goToSkillsHub()、getMySkills()、getExternalSources()、cleanupTestSkills()等辅助函数中封装了导航、Bridge 查询与数据清理。源码侧SkillsHubSettings.tsx已落地my-skills-section、extension-skills-section、auto-skills-section、input-search-my-skills等 testid见 SkillsHubSettings.tsx 中data-testid属性测试与实现的 testid 契约保持一致。2. Bridge 断言原则来自测试策略文档 §4.1Setup / Assert / Cleanup 允许走 BridgeTrigger 必须走 UI 交互。测试数据构造导入、添加外部路径、清理通过 HTTP Bridge 完成而导入、删除、导出、搜索等被测操作一律模拟真实用户点击。从 tests/e2e/helpers/skillsHub.ts 可以看到Bridge 调用已从早期设计的invokeBridge(fs.xxx)IPC 模式迁移为 HTTP 模式POST /api/skills/import、DELETE /api/skills/{skillName}、GET /api/skills/detect-external、GET /api/skills/external-paths等与渲染层ipcBridge.fs.*.invoke()后置的fetch(/api/skills/*)调用链保持一致——这也印证了 Skills 后端已演进为独立 skill 路由服务源码注释指向crates/aionui-extension/src/skill_routes.rs。3. 数据隔离与清理所有测试数据使用E2E-Test-*前缀技能名与E2E前缀外部源名beforeEach清理遗留数据、afterAll/afterEach清理测试产物避免跨测试污染。每个测试文件的beforeEach执行goToSkillsHub(page)导航至#/settings/skills并等待my-skills-section可见最长 15 秒冷启动超时afterEach执行cleanupTestSkills(page)。并行执行约束映射文档虽未直接提及但整个 Skills E2E 的单实例串行约束来自测试策略文档 §8所有 E2E 测试共享单个 Electron app 实例workers: 1与同一个 SQLite 数据库aionui.db并行会导致写锁冲突与数据污染因此 Skills 与 Assistant 模块测试编写可并行、运行必须串行。九、维护说明映射文档自身的更新流程映射文档不是一次性产物它明确定义了四类更新触发条件与五步更新流程保证用例设计 ↔ 实现始终同步更新触发条件新增测试用例到test-cases.zh.md修改测试用例 ID 或标题调整测试用例优先级重构测试文件结构拆分/合并文件更新流程运行命令grep -c ^\s*await takeScreenshot file重新统计截图数更新统计概览中的数字更新对应的映射表行验证分组小计 总数提交变更并注明修改原因这个流程本身就是一个可执行的审计脚本任何一次截图增删都可以用一条 grep 命令重算出文件级截图数再反推全局 126 这个总数是否仍然成立。映射文档以最后更新2026-04-21、维护者skills-designer-2收尾明确了文档责任归属。十、如何运行与使用这套测试资产测试策略文档给出了具体的运行方式以仓库根目录为起点# 单独运行 Skills E2E本地验证--grep 过滤 bun run test:e2e -- --grep skills # 完整运行所有 E2E提交前必须执行顺序运行含 Assistant Skills bun run test:e2e按优先级分组的执行建议对应 test-cases.zh.md §5.1# P0 核心功能每次提交 npx playwright test --grep p0 # P1 重要功能每日构建 npx playwright test --grep p1 # P2-P3 边界场景发布前 npx playwright test --grep p2|p3对于 CI 环境E2E 框架tests/e2e/fixtures.ts已自动配置 Electron 单实例workers: 1、用户数据目录隔离userData: tmpDir、独立 SQLite 数据库以及AIONUI_EXTENSIONS_PATHexamples/扩展路径。需要说明的是实际技能导入/删除走 HTTP skill 路由/api/skills/*需要后端技能服务在线因此goToSkillsHub()中会轮询/api/skills/paths接口确认后端就绪。十一、总结这份映射文档的价值implementation-mapping.zh.md用三张统计表 十个文件说明 一组质量指标把需求 → 用例 → 实现 → 证据截图完整串联起来。它的核心价值可以概括为三点可追溯性每个TC-S-xx用例都能精确落到文件、行号、测试函数名29/29 的 100% 实现率让测试计划与测试事实之间不存在灰色地带可度量性126 张截图、平均 4.3 张/测试、至少 3 张规则把 E2E 的可视化审计变成了可量化的质量门禁可维护性明确的更新触发条件与 grep 统计流程让映射文档在测试资产持续演进时始终可同步、可校验。对于想要为 AionUi 贡献测试的开发者这份文档就是一张测试地图从 test-cases.zh.md 了解用例设计从 test-strategy.zh.md 学习数据构造与断言原则从 skillsHub.ts 复用导航、查询与清理辅助函数再对照十个实现文件按功能维度增补用例——这正是仓库中设计先行、映射追踪、证据留痕的测试工程范式的完整落地。延伸阅读同一测试体系下的配套文档需求文档tests/e2e/docs/skills-hub/requirements.zh.md测试用例设计tests/e2e/docs/skills-hub/test-cases.zh.md测试策略tests/e2e/docs/skills-hub/test-strategy.zh.md功能源码packages/desktop/src/renderer/pages/settings/SkillsSettings/SkillsHubSettings.tsx【免费下载链接】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），仅供参考