前言¶

改完一版 UI，最省心的验证方式是打开浏览器，盯着 localhost:7456 的 Cocos Creator 预览逐页点一遍、看一遍、截一遍图。问题是这套流程全靠手工：页面多了容易漏，按钮藏在 canvas 里，连 browser-skill 自带的 click 都够不到，只能靠肉眼和截图拼凑。

下面介绍的这个 Skill 做的就是这件事的自动化：基于 browser-skill（bsk）对 Cocos Creator 3.x 项目的浏览器预览做 UI 自动化测试，截图走查、模拟鼠标事件点击 canvas 内按钮、断言引擎状态，最后生成可视化 HTML 报告。

这是什么¶

Skill 名称：Cocos 预览自动化测试，坐标 @user_4edac78e/cocos-preview-bsk-test，由社区作者 user_4edac78e 发布，当前版本 1.0.3，来源为 community，分类 dev-programming，基于通用 SKILL.md 格式。

它解决的问题很具体：把「开预览—逐页截图—点按钮进下一页—看节点树和 Label 文本对不对—出报告」这串人工操作，交给浏览器自动化执行，并把结果整理成可以直接给用户看的 HTML 报告。

核心能力¶

1、截图走查：对预览中的各页面逐一截图，用于比对 UI 是否正常。
2、模拟鼠标点击：通过 evaluate 注入真实鼠标事件点击 canvas 内的按钮。bsk 自带的 click 对 canvas 内的可点元素够不到，所以走 evaluate 这条路。
3、引擎状态断言：读取 cc.director 的节点树和 Label 文本，断言当前页面状态是否符合预期，而不是只看截图。
4、HTML 报告：测试完成后生成可视化 HTML 报告，交给用户查看。

安装与启用¶

Skill 官方地址：https://api.skillhub.cn/user_4edac78e/cocos-preview-bsk-test，SkillHub 页面：https://www.skillhub.cn/skills/user_4edac78e/cocos-preview-bsk-test。

已抓取资料中没有提供具体的安装命令或目录约定，标签 requires_api_key=false 说明使用过程不需要配置 API Key。安装方式以官方页面说明为准，这里不杜撰命令。

典型用法¶

这个 Skill 靠意图触发。当用户说下面这些话时使用：

"测试/验证 Cocos 游戏 UI"
"自动截图看页面"
"交互流程测试"
"UI 走查"
"点按钮进页面看看"
"生成测试报告"

命中触发词后，执行流程大致如下：

1、先确认 Cocos Creator 3.x 项目的预览已在 localhost:7456 上跑起来。
2、对当前页面截图，走查 UI。
3、需要进入下一页时，用 evaluate 模拟真实鼠标事件点击 canvas 内的按钮。
4、点击后通过 cc.director 断言节点树和 Label 文本，确认页面状态正确。
5、全部页面走完后，生成可视化 HTML 报告给用户看。

适用场景与注意¶

适合：Cocos Creator 3.x 项目；需要在浏览器预览环境里做 UI 走查、交互流程验证和截图留档的场景；希望把验证结果整理成 HTML 报告交给用户或归档的场景。

限制：只作用于 localhost:7456 的浏览器预览，不涉及真机或原生构建；canvas 内按钮必须走 evaluate 模拟鼠标事件，直接用 bsk click 无效；断言依赖 cc.director 的节点树和 Label 文本，项目里没有暴露这些信息就不好断言。

结尾¶

这个 Skill 的价值在于把 Cocos 预览的 UI 验证从手工点检变成可重复的自动化流程：截图、点击、断言、报告一条龙。它不改变项目本身，也不依赖额外的 API Key，适合在需要反复验证 UI 的 Cocos Creator 3.x 项目里使用。

官方地址：https://api.skillhub.cn/user_4edac78e/cocos-preview-bsk-test