dogfood

Dogfood：系統化 Web 應用程式 QA 測試

概述

本 Skill 將指引你運用瀏覽器工具組（browser toolset），對 Web 應用程式進行系統化的探索性 QA 測試。你將在應用程式中進行瀏覽、與各類元件互動、擷取問題事證，並產出結構化的 Bug 報告。

前置條件

• 必須支援並可用瀏覽器工具組（browser_navigate、browser_snapshot、browser_click、browser_type、browser_vision、browser_console、browser_scroll、browser_back、browser_press）
• 由使用者提供目標 URL 與測試範圍

輸入參數

使用者需提供：

1. Target URL — 測試的入口網址
2. Scope — 欲重點測試的區域/功能（若需全面測試可填寫 "full site"）
3. Output directory（選填）— 儲存截圖與報告的目錄路徑（預設：./dogfood-output）

測試工作流程

請遵循以下 5 個階段的系統化工作流程：

階段 1：規劃（Plan）

1. 建立輸出目錄結構：

   {output_dir}/
   ├── screenshots/       # 問題事證截圖
   └── report.md          # 最終報告（於階段 5 生成）
   

2. 根據使用者輸入確認測試範圍。
3. 規劃欲測試的頁面與功能，建立初步的網站地圖（sitemap）：
   • 首頁 / 著陸頁（Landing page）
   • 導覽連結（頁首 Header、頁尾 Footer、側邊欄 Sidebar）
   • 關鍵使用者流程（註冊、登入、搜尋、結帳等）
   • 表單與各類互動元件
   • 極端狀況（Edge cases，如無資料狀態 Empty states、錯誤頁面、404 等）

階段 2：探索（Explore）

針對規劃中的每個頁面或功能：

1. 前往指定頁面：

   browser_navigate(url="https://example.com/page")
   

2. **擷取快照（Snapshot）**以瞭解 DOM 結構：

   browser_snapshot()
   

3. 檢查 Console 是否有 JavaScript 錯誤：

   browser_console(clear=true)
   

   請在每次頁面轉址及每次重要互動後執行此步驟。背景默默發生的靜態/靜默 JS 錯誤（Silent JS errors）是非常具高價值的發現。

4. 擷取標註截圖（Annotated Screenshot），視覺化評估頁面並識別互動元件：

   browser_vision(question="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", annotate=true)
   

   annotate=true 參數會在互動元件上疊加編號標籤 [N]。每個 [N] 均對應後續瀏覽器命令中的引用代號 @eN。

5. 系統化測試互動元件：

   • 點擊按鈕與連結：browser_click(ref="@eN")
   • 填寫表單：browser_type(ref="@eN", text="test input")
   • 測試鍵盤導覽操作：browser_press(key="Tab")、browser_press(key="Enter")
   • 滾動瀏覽內容：browser_scroll(direction="down")
   • 輸入無效資料以測試表單驗證機制
   • 測試空白提交

6. 每次互動後，務必檢查：

   • Console 錯誤：browser_console()
   • 畫面視覺變化：browser_vision(question="What changed after the interaction?")
   • 預期行為與實際行為的差異

階段 3：收集事證（Collect Evidence）

針對發現的每一個問題：

1. 擷取截圖以呈現問題狀況：

   browser_vision(question="Capture and describe the issue visible on this page", annotate=false)
   

   儲存回應中的 screenshot_path —— 後續會在報告中引用此路徑。

2. 記錄詳細資訊：

   • 發生問題的 URL
   • 重現步驟
   • 預期行為
   • 實際行為
   • Console 錯誤（若有）
   • 截圖路徑

3. 進行問題分類，參照問題分類體系（詳見 references/issue-taxonomy.md）：

   • 嚴重程度（Severity）：Critical（致命）/ High（高）/ Medium（中）/ Low（低）
   • 問題類別（Category）：Functional（功能）/ Visual（視覺）/ Accessibility（無障礙）/ Console（控制台）/ UX（使用者體驗）/ Content（內容）

階段 4：整理與歸類（Categorize）

1. 檢視所有收集到的問題。
2. 去重（De-duplicate）—— 將在不同位置顯現的同一 Bug 進行合併。
3. 為每個問題分配最終的嚴重程度與問題類別。
4. 按嚴重程度排序（Critical 最先，其次為 High、Medium、Low）。
5. 統計各嚴重程度與類別的問題數量，用於撰寫執行摘要（Executive Summary）。

階段 5：生成報告（Report）

使用 templates/dogfood-report-template.md 範本生成最終報告。

報告必須包含以下內容：

1. 執行摘要（Executive summary）：包含問題總數、嚴重程度分佈統計以及測試範圍
2. 各別問題詳細章節：包含：
   • 問題編號與標題
   • 嚴重程度與類別標籤（Badges）
   • 發現問題的 URL
   • 問題描述
   • 重現步驟
   • 預期行為 vs 實際行為
   • 截圖引用（使用 MEDIA:<screenshot_path> 以嵌入行內圖片）
   • Console 錯誤訊息（若有）
3. 所有問題的總覽表格（Summary table）
4. 測試備註（Testing notes） — 已測試項目、未測試項目以及任何阻礙測試的因素（Blockers）

將報告儲存至 {output_dir}/report.md。

工具參考指南

工具	用途
browser_navigate	前往指定 URL
browser_snapshot	取得 DOM 文字快照（無障礙樹 / Accessibility tree）
browser_click	透過引用代號（@eN）或文字點擊元件
browser_type	在輸入框中輸入文字
browser_scroll	向上/向下滾動頁面
browser_back	返回瀏覽器上一頁歷史紀錄
browser_press	按下鍵盤按鍵
browser_vision	擷取螢幕截圖 + AI 分析；使用 annotate=true 標註元件編號
browser_console	取得 JS Console 輸出與錯誤訊息

技巧與實用建議

• 在每次轉址與重大互動後，務必執行 browser_console()。 靜默的 JS 錯誤（Silent JS errors）通常是最具價值的發現之一。
• 當你需要判斷互動元件位置或快照引用標號不清晰時，請在 browser_vision 中加入 annotate=true。
• 同時使用有效與無效資料進行測試 —— 表單驗證缺陷非常常見。
• 完整滾動瀏覽長頁面 —— 首屏以下（Below the fold）的內容可能存在渲染問題。
• 完整測試導覽與操作流程 —— 端到端（End-to-end）點擊並完成多步驟流程。
• 檢查響應式切換行為，觀察截圖中是否有任何版面錯置或視覺異常。
• 切勿遺漏極端狀況（Edge cases）：無資料狀態（Empty states）、超長文字、特殊字元、連續快速點擊等。
• 向使用者匯報截圖時，請包含 MEDIA:<screenshot_path>，以便在行內直接展示問題事證。