前言¶

改完一版 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