用途:该技能用于在 @shm/editor 包中运行并手动测试编辑器 E2E 测试台,覆盖移动端视口模拟、超级编号徽标渲染及移动端评论交互等场景。
环境要求:需在 frontend/packages/editor 目录下操作,使用 Node 22.22.x;若 mise/corepack 受限,可使用 /home/ubuntu/.local/bin/pnpm 作为回退。测试台基于 Vite,pnpm test:harness 会在 http://localhost:5180 启动 vite --config e2e/vite.config.ts。
运行方式:配置 PATH 后进入目录执行 pnpm test:harness;浏览器打开如 http://localhost:5180/?real=1&fixture=allBlocks&badges=1 的 real-mode fixture URL。其中 real=1 挂载真实 DocumentEditor 与模拟文档机,fixture=allBlocks 渲染 e2e/test-app/TestEditor.tsx 中定义的全部块类型,badges=1 为每个 fixture 块提供模拟引用/评论计数以渲染超级编号徽标。
移动端视口模拟:通过远程调试端口 29229 使用 CDP 设置移动视口,可调用 Page.navigate、Emulation.setDeviceMetricsOverride(width 390、height 844、deviceScaleFactor 2、mobile true)和 Emulation.setTouchEmulationEnabled。文中提供了 /tmp/set-mobile-viewport.js 示例脚本及验证方式(检查 window.innerWidth 与 window.innerHeight)。
关键 DOM 选择器与运行时全局对象:编辑器容器 [data-testid="editor-container"]、块节点 [data-node-type="blockNode"][data-id]、段落内容、超级编号徽标 .bn-supernumber-badge、块悬停操作卡、范围选择气泡等;window.TEST_EDITOR、window.TEST_MACHINE、window.TEST_BLOCK_TOOL_CALLS 可暴露悬停操作、选择状态、文档机状态及块工具调用记录。
触发交互:BlockHoverActions 插件仅响应 pointerType 非 mouse 的 pointerdown/pointerup;真实触摸长按可触发 RangeSelection 气泡,CDP 模拟下可通过同时设置原生选择与 ProseMirror 选择并派发 mouseup 来可靠触发。
常见陷阱:badges=1 为渲染徽标所必需;Emulation.setTouchEmulationEnabled 在新版 CDP 中已弃用;allBlocks fixture 故意包含损坏的 web-embed URL 和草稿嵌入,其错误提示属预期;不要将 TextSelection 设为块节点边界位置(如 0、1、19),否则会触发警告并可能无法显示目标 UI。