前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读本文以 wp-calypso 仓库中 Help Center UI 测试技能文档 为核心骨架系统讲解如何借助 Chrome 浏览器自动化对 WordPress.com Help Center 进行系统性的 UI 审查覆盖 Calypso Dashboard、WP Admin、编辑器三种宿主界面从打开帮助中心、搜索、文章渲染、AI 对话、人工客服转接、导航与历史记录到多视口响应式验证的完整检查清单。读完本文你将掌握一套可落地的测试执行流程、错误监控点、结果结构化输出格式以及将缺陷以 GIF 证据上报到 Linear 并进入修复闭环的完整方法。一、技能定位这是一份可执行的 UI 审查技能仓库中的.claude/skills/help-center-ui-test/SKILL.md定义了一个名为help-center-ui-test的 Claude 技能Skill其用途是对 WordPress.com Help Center 在多个宿主界面surface上进行基于浏览器的 UI 审查寻找视觉与行为问题。其元信息frontmatter明确了能力边界name:help-center-ui-testdescription: 在多个界面上运行基于浏览器的 Help Center UI 审查查找视觉与行为问题当被要求测试 Help Center UI时使用allowed-tools: Read、Glob、Grep、AskUserQuestion、Bash、Agent、ToolSearch该技能依赖Claude in Chrome浏览器扩展提供 Chrome 自动化能力标签页管理、页面元素查找、控制台与网络请求读取、GIF 录制等。它本质上是一份操作手册 检查清单 缺陷上报协议适合在人工审查或 Agent 自动化执行时按步骤复现。为什么 Help Center 需要多界面测试Help Center 不是单一应用它运行在多种宿主环境中。仓库 apps/help-center/README.md 明确指出它运行在多种不同环境Calypsomy.wordpress.com主界面Simple sites作为 Gutenberg 编辑器的插件运行同时以 wpadminbar 菜单项存在Atomic sites同样有两种形态——作为 Gutenberg 编辑器插件Jetpack 连接时为完整插件未连接时退化为仅链接到wp.com/help的极简插件以及作为 wpadminbar 菜单项连接 Jetpack 时打开 Help Center未连接时退化为极简链接。这也是技能文档中要求依次测试Calypso Dashboard、WP Admin、Editor三种界面的根本原因——同一套 Help Center 组件被嵌入到三种完全不同的宿主 DOM 与样式环境中任何一处的布局、事件或样式隔离问题都可能在另一种界面中表现不同。应用层的多入口文件如 help-center-wp-admin.jsx、help-center-gutenberg.jsx、help-center-ciab-admin.jsx分别负责在各自宿主中挂载 Help Center正好对应了技能中的三个测试表面。二、前置条件与 Setup前置条件PrerequisitesClaude in Chrome 浏览器扩展必须已安装并连接。在 Claude Code 中若未连接先运行/chrome命令。用户必须已在 Chrome 中登录 WordPress.com否则 Help Center 会以未登录态渲染部分功能如客服转接、历史记录将不可用。Setup 步骤使用ToolSearch加载 Chrome 工具select:mcp__claude-in-chrome__tabs_context_mcp。调用mcp__claude-in-chrome__tabs_context_mcp获取当前标签页列表。使用mcp__claude-in-chrome__tabs_create_mcp创建一个新标签页。说明mcp__claude-in-chrome__*是 Claude in Chrome 扩展暴露的 MCPModel Context Protocol工具命名空间本文所有步骤中的工具名均以此格式引用实际使用时需确保扩展已连接。三、错误监控贯穿全程的 Console 与 Network 检查技能要求在每个表面打开 Help Center 后、以及每次关键交互之后都进行错误检查Console 错误调用mcp__claude-in-chrome__read_console_messages使用正则模式pattern: (error|Error|ERROR)捕获 JS 错误。网络错误调用mcp__claude-in-chrome__read_network_requests检查是否存在 HTTP 状态码 400 的请求。必须检查错误的 6 个节点在每个表面打开 Help Center 之后执行一次搜索之后加载一篇文章之后收到 AI 聊天回复之后发起人工客服转接之后每个表面测试结束时最终错误扫描。发现的错误需要记录到测试结果中并分类为Console Error或Network Error。这一设计对应了 Help Center 的实际数据链路搜索与文章加载会命中wpcom/v2/help/search等接口AI 对话走 Odie/支持交互接口客服转接则涉及 Zendesk 会话。任何一个环节的状态码异常或 JS 异常都可能是缺陷的直接证据——例如技能结果模板中给出的示例Calypso 表面下/wpcom/v2/help/search返回 500WP Admin 表面下出现TypeError: ...。四、测试表面Test Surfaces与打开流程技能要求逐个one at a time在以下三个表面测试#表面URL1Calypso Dashboardhttps://my.wordpress.com/sites2WP Adminhttps://en.support.wordpress.com/wp-admin/3Editorhttps://en.support.wordpress.com/wp-admin/post-new.php每个表面的标准打开流程导航到对应 URL使用mcp__claude-in-chrome__find定位?帮助图标若未找到用mcp__claude-in-chrome__computeraction: wait等待 3 秒后重试点击?图标打开 Help Center使用mcp__claude-in-chrome__find确认搜索框或首页内容已出现若未找到等待 3 秒后重试。从源码看这个?帮助图标的点击逻辑在宿主入口中有明确实现。以 help-center-wp-admin.jsx 为例handleToggleHelpCenter会先通过recordHostTracksEvent记录图标交互事件再触发setShowHelpCenter( ! isShown )切换面板显隐同时 WP Admin 入口还会通过document.getElementById( wp-admin-bar-agents-manager ) || document.getElementById( wp-admin-bar-help-center )找到主工具条按钮在面板打开时为其添加active类、有未读消息时添加has-unread类见 help-center-wp-admin.jsx。测试时可通过这些类名快速判断面板状态是否被正确驱动。五、测试检查清单Test Checklist技能为每个表面定义了 7 大检查项下面逐项展开并补充可验证要点。1. 首页Home Screen布局渲染正确无重叠、无间距破坏推荐/上下文相关指南正常展示WP Admin 表面应展示 WP Admin 专属指南——这与仓库中的语境化支持文章机制直接相关见本文第七节若有会话历史应出现最近对话卡片对应源码组件 help-center-recent-conversations.tsx搜索框可见且可用。2. 搜索Search输入真实查询词例如domain用mcp__claude-in-chrome__find确认搜索结果已出现若未出现等待 3 秒重试。验证结果包含标题和描述清空搜索后输入无意义字符串例如xyzqwfoobar123确认空状态出现并验证有兜底操作例如 Ask AI assistant 按钮可供用户继续求助。搜索是 Help Center 的核心路径仓库中packages/help-center/src/components/下的 help-center-search.tsx 与 help-center-search-results.tsx 分别负责搜索控件与结果列表渲染而route-to-query-mapping.ts位于 packages/help-center/src/route-to-query-mapping.ts负责把当前页面路由映射为默认搜索词。测试时如果首页未显示预期指南可重点怀疑该映射是否命中。3. 文章渲染Article Rendering从首页或搜索结果打开一篇指南/文章用mcp__claude-in-chrome__find确认文章标题已渲染未出现则等待 3 秒重试检查标题、图片、视频、链接、列表、可折叠区块collapsible sections、内嵌 UI 卡片是否渲染正确。4. 支持助手 / AI 对话Support Assistant, AI Chat通过 Get help 或类似入口打开 AI 对话验证欢迎语渲染正确发送一个问题例如 How do I change my site title?用mcp__claude-in-chrome__find确认AI 回复已出现AI 回复可能耗时更长未出现时等待 5 秒再重试验证 AI 回复的渲染质量文本格式、链接、反馈图标赞/踩、复制展开Sources来源下拉验证其展示相关文档链接。从源码可以印证头部标题随路由切换的逻辑help-center-header.tsx 中的useHeaderText依据当前路径返回不同标题——/显示 Help Center、/odie在存在 Zendesk 事件时显示 Support Team、否则显示 Support Assistant。测试中欢迎语渲染正确的检查可结合该标题逻辑与 AI 回复内容共同判断。5. 人工客服转接Live Support Handoff在 AI 对话中输入Talk with a human验证 AI 提供 Talk with a human 按钮或类似的转接机制若系统询问关于进行中会话的事宜选择 No, connect me with someone new验证转接过渡头部标题变为Support Team、出现CHAT WITH SUPPORT TEAM STARTED分隔线、输入框出现附件按钮。这一行为同样可在 help-center-header.tsx 中找到对应实现当currentSupportInteraction?.events中存在event_source zendesk的事件时/odie路由的头部标题即显示 Support Team与技能文档描述的转接后 UI 变化完全吻合。6. 导航Navigation返回按钮Back在 Help Center 内部返回上一屏关闭X关闭 Help Center 面板最小化/最大化Minimize/MaximizeHelp Center 可被最小化并恢复三点菜单Three-dot menu显示选项——Minimize最小化、New chat新对话、Support history支持历史、Turn off sound notifications关闭声音通知。三点菜单的源码实现位于 help-center-header.tsx 的EllipsisMenu组件它使用wordpress/components的DropdownMenu渲染菜单项包含 Minimize调用setIsMinimized( true )、New chatclearChat并导航到/odie、Support historyhandleViewChats导航到/chat-history、声音通知开关setAreSoundNotificationsEnabled仅登录用户可见。测试时应逐一核对这些菜单项的行为是否与源码逻辑一致。7. 支持历史Support History从三点菜单打开Support history验证历史会话被列出点击某个会话验证打开的是正确的那一个而非其他会话。支持历史界面的源码实现是 help-center-chat-history.tsx组件通过useGetHistoryChats获取recentConversations加载中显示 Spinner空列表时渲染空状态插画与提示文案点击某条会话应通过getFirstMessage等工具还原首条消息内容。测试时打开正确会话这一条正是为了捕捉列表索引错位、会话 ID 串线之类的回归缺陷。六、多视口Viewport响应式测试完成每个表面的桌面尺寸全量清单后还需在额外视口验证响应式布局。视口预设名称宽度高度Desktop桌面1280800Mobile移动端375812流程对每个表面桌面清单完成后使用mcp__claude-in-chrome__resize_window切换到Mobile375×812打开 Help Center 并验证首页布局无重叠、无间距破坏、无水平溢出搜索结果布局Help Center 面板尺寸不超出视口使用mcp__claude-in-chrome__resize_window恢复到Desktop1280×800再进入下一个表面。375×812 对应 iPhone 12/13/14 等主流机型逻辑分辨率是移动端回归测试的常见基准1280×800 则代表典型的桌面笔记本视口。七、语境化支持文章按路由定制搜索词与推荐文章技能检查清单中WP Admin 表面应展示 WP Admin 专属指南的要求落地到仓库中是两套路由映射机制详见 apps/help-center/README.md 的 Contextualized Support articles 一节按页面/路由指定搜索词在packages/help-center/src/route-to-query-mapping.ts对应技能文档所述 JSON 结构的 TS 版本实际数据文件路径为packages/help-center/src/route-to-query-mapping.ts中可以按页面 URL/路由指定 Help Center 使用的搜索词。示例// 用户访问 wordpress.com/home 时使用 home 作为搜索词 /home/: home, // 用户访问 {site}/wp-admin/post-new.php 时使用 new post 作为搜索词 /wp-admin/post-new.php: new post按页面/路由推荐具体文章在packages/help-center/src/下的tailored-post-ids-mapping.json中可以指定从某个 blog 拉取指定post_ids的文章展示在指定路由// 在 /home 展示 blog_id 9619154 的两篇文章 /home/: [ { locale: en, post_ids: [ 248292, 150414 ], blog_id: 9619154 } ], // 在 {site}/wp-admin/post-new.php 展示 blog_id 33534099 的三篇文章 /wp-admin/post-new.php: [ { locale: en, post_ids: [ 99385, 99879, 99982 ], blog_id: 33534099 } ]优先级规则定制文章tailored articles在结果中拥有最高优先级会出现在顶部但只要用户主动提供了搜索词定制文章就不再参与匹配。这套机制直接解释了测试中的两个断言WP Admin 应显示 WP Admin 专属指南由 route-to-query-mapping 与 tailored-post-ids-mapping 共同驱动以及搜索真实查询后结果正常用户主动搜索会覆盖路由默认映射。八、测试结果的结构化输出格式每次测试运行必须以如下结构化格式产出摘要技能文档原文格式## Test Results Summary ### Surface: [Calypso Dashboard / WP Admin] | # | Check | Viewport | Status | Issue | Evidence | |---|-------|----------|--------|-------|----------| | 1 | Home Screen — layout | Desktop | PASS/FAIL | Description | screenshot.png | | 2 | Home Screen — guides | Desktop | PASS/FAIL | Description | | | ... | ... | ... | ... | ... | ... | ### Console Network Errors | Surface | Type | Message/URL | HTTP Status | |---------|------|-------------|-------------| | Calypso | Network | /wpcom/v2/help/search | 500 | | WP Admin | Console | TypeError: ... | — | ### Overall: X passed, Y failed, Z errors关键约定每条检查一行标注检查项、视口、PASS/FAIL 状态、问题描述、证据文件Console/Network 错误单独成表注明所在表面、类型、消息/URL、HTTP 状态码末尾汇总X 通过 / Y 失败 / Z 错误只有 FAIL 行与错误才需要上报为 Linear issuePASS 行无需上报。九、采集证据为每个缺陷录制 GIF技能要求测试中发现的每个问题都必须用mcp__claude-in-chrome__gif_creator录制GIF作为证据。流程调用gif_creatoraction: start_recording目标为 Help Center 所在标签页立即截图捕获初始状态作为首帧执行能复现问题的动作点击、滚动、输入等停止录制前立即截图捕获最终状态调用gif_creatoraction: stop_recording。GIF 命名要具有描述性例如search-clear-button-bug.gif。对于静态视觉问题录制单帧 GIF开始 → 截图 → 停止即可满足证据要求。十、问题上报与修复闭环测试全部结束后若发现问题1. 向用户汇报并询问处理方式向用户展示全部问题摘要询问用户希望在 Linear 中提交 issue直接在代码库中尝试修复两者都做修复并提交 issue。2. 创建 Linear issue默认Linear project为 Help Center Polish and Maintenance需请用户确认或改选使用ToolSearch加载 Linear 工具linear save issue对每个问题调用mcp__linear-server__save_issue包含Title清晰简洁的缺陷描述DescriptionMarkdown使用如下模板## Bug Report ### Steps to Reproduce 1. ... ### Expected Behavior ... ### Actual Behavior ... ### Surface - [X] Calypso Dashboard - [ ] WP AdminTeam询问用户或默认 Dotcom Support InfrastructureDOTSUPProject用户指定的项目。3. 修复问题若用户选择尝试修复以 Linear issue ID 命名创建新分支例如git checkout -b DOTSUP-448调查根因并实施修复修复后询问用户是否提交并创建 PR。4. 将 GIF 证据附加到 Linear issueGIF 录制作用域限定于标签页组tab group因此可以直接导出到 Linear 标签页导航到 Linear issue与 Help Center 处于同一标签页组的 Chrome 标签页https://linear.app/a8c/issue/ISSUE-ID并用mcp__claude-in-chrome__find确认 issue 描述可见未出现则等待 3 秒重试导出 GIF调用mcp__claude-in-chrome__gif_creatoraction: exporttabId设为Linear 标签页coordinate指向 issue 描述区域内的某个点GIF 会被嵌入描述精确位置可能略有偏差验证截图 Linear 标签页确认图片已嵌入。十一、实用技巧Tips技能文档末尾给出的一组操作建议能显著提升测试效率与稳定性用mcp__claude-in-chrome__read_page配合filter: interactive查找可点击元素用mcp__claude-in-chrome__find做自然语言元素搜索例如 Help Center close button而非依赖固定选择器用mcp__claude-in-chrome__computer的action: left_click配合ref参数按元素引用 ID 点击用元素查找替代固定延时 sleep动作之后用find确认元素出现若未找到用computeraction: wait,duration: 3等待 3 秒并重试最多重试 3 次若 Help Center 意外关闭再次点击?图标重新打开即可。十二、测试方法论要点与适用前提证据驱动每个 FAIL 必须附带 GIF/截图证据Console 与 Network 错误单独记录避免凭印象报 bug双视口覆盖桌面1280×800跑全量清单移动端375×812至少覆盖首页、搜索结果与面板尺寸三项防止样式隔离与溢出回归路由语境是功能而非偶然WP Admin 显示专属指南源于route-to-query-mapping.ts与tailored-post-ids-mapping.json的映射配置测试断言应围绕这些机制设计适用范围本流程要求 Chrome 已登录 WordPress.com 且安装并连接 Claude in Chrome 扩展未连接 Jetpack 的 Atomic 站点上 Help Center 会退化为仅链接到wp.com/help的极简形态见 apps/help-center/README.md此时多数交互检查不适用。延伸阅读技能原始文档.claude/skills/help-center-ui-test/SKILL.mdHelp Center 应用说明与开发部署流程apps/help-center/README.mdWP Admin 宿主挂载实现apps/help-center/help-center-wp-admin.jsx头部组件三点菜单、标题、最小化/关闭packages/help-center/src/components/help-center-header.tsx支持历史界面packages/help-center/src/components/help-center-chat-history.tsx路由到搜索词映射packages/help-center/src/route-to-query-mapping.ts搜索相关组件packages/help-center/src/components/help-center-search.tsx、help-center-search-results.tsx赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐Hermes Agent 新手指南3 分钟装好5 个功能跑通你的第一个智能体Hermes Agent 新手指南3 分钟装好5 个功能跑通你的第一个智能体 整理 300 篇参考文献你花了一整个周末Hermes Agent 是一个由AI Agent人工智能AI 应用工具调用Agent 记忆交互助手RAG任务调度MCP 服务nowinandroid自动化测试UI自动化与端到端测试nowinandroid自动化测试UI自动化与端到端测试 痛点现代Android应用测试的复杂性挑战 在当今快速迭代的移动应用开发环境中你是否经常面临这样移动开发wp-calypso 测试体系指南Jest 单元测试、快照测试与端到端 E2E 全覆盖路线图wp calypso 测试体系指南Jest 单元测试、快照测试与端到端 E2E 全覆盖路线图 wp calypso 是 JavaScript 驱动、API 赋前端CMS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
看程序执行：参数、环境与报错排查全解析)
