Cocos 预览自动化测试

要解决什么问题

Cocos Creator 的游戏 UI 渲染在 WebGL canvas 里，而不是 DOM 中。常规浏览器自动化的 bsk click 依赖 DOM 元素，snapshot 拿到的 aria 树对 canvas 几乎无效——你只能看到 Cocos 调试工具栏，看不到游戏按钮。这意味着按钮点击、状态验证、UI 回归测试都无法用现成手段完成。

核心能力与工作方式

这个技能围绕这个痛点做了完整设计：

• 前置检查：每次动手前确认预览端口（默认 localhost:7456）、bsk 安装状态、编辑器编译状态。改了 .ts 后浏览器看不到新效果，通常是编辑器最小化导致 watch 停止——拉回前台即可，无需 reload。
• canvas 内点击：按钮是纯代码 Node（不是 cc.Button 组件），按 Label 文本遍历定位节点，用 Node.getWorldPosition 算屏幕坐标（getComponent(cc.UITransform) 会返回 null），再经 bsk evaluate 派发 Pointer + Mouse 双事件模拟真实点击。
• 双重验证：截图走查（Read 工具读 PNG）加引擎状态断言。颜色语义断言可抓出危险红误用；画布边界断言检查顶栏、侧栏等贴边元素是否被设计分辨率裁剪，关键容器四边距需 ≥ 5px。
• 报告产出：结果整理为 result.json，生成单文件自包含 HTML 报告（截图 base64 内嵌、状态徽章、问题按严重度分级）。

适用边界

• 测试发现问题 ≠ 授权修改代码：未经用户逐项确认，禁止直接改游戏代码；改完只做视觉验证，不跑 tsc/lint/build。
• 页面重置优先走游戏状态机回主菜单，少用 bsk reload——编辑器编译中 reload 可能拉不到 polyfills bundle 触发错误弹窗。
• 颜色阈值断言需用实测值校准，按语义按钮的实际 RGB 调整，别直接套默认值。