跳到主要內容

Dogfood

對 Web 應用程序進行系統性的探索性 QA 測試——發現缺陷、捕獲證據並生成結構化報告

技能元數據​

來源捆綁（默認安裝）
路徑skills/dogfood
版本1.0.0
標籤qa, testing, browser, web, dogfood

參考：完整 SKILL.md​

信息

以下是 Hermes 在觸發此技能時加載的完整技能定義。這是技能激活時代理所看到的指令。

Dogfood：系統性 Web 應用程序 QA 測試

概述​

此技能指導你使用瀏覽器工具集對 Web 應用程序進行系統性的探索性 QA 測試。你將導航應用程序、與元素交互、捕獲問題證據，並生成結構化的缺陷報告。

前提條件​

  • 必須可用瀏覽器工具集（browser_navigate、browser_snapshot、browser_click、browser_type、browser_vision、browser_console、browser_scroll、browser_back、browser_press）
  • 用戶提供目標 URL 和測試範圍

輸入​

用戶提供：

  1. 目標 URL — 測試的入口點
  2. 範圍 — 需要關注的區域/功能（或“全站”以進行全面測試）
  3. 輸出目錄（可選）— 保存截圖和報告的位置（默認：./dogfood-output）

工作流​

遵循以下 5 個階段的系統性工作流：

階段 1：計劃​

  1. 創建輸出目錄結構： 
    {output_dir}/
    ├── screenshots/       # Evidence screenshots
    └── report.md          # Final report (generated in Phase 5)
  2. 根據用戶輸入確定測試範圍。
  3. 通過規劃要測試的頁面和功能來構建粗略的站點地圖：
    • 落地頁/主頁
    • 導航鏈接（頁眉、頁腳、側邊欄）
    • 關鍵用戶流程（註冊、登錄、搜索、結賬等）
    • 表單和交互元素
    • 邊界情況（空狀態、錯誤頁面、404 頁面）

階段 2：探索​

對於計劃中的每個頁面或功能：

  1. 導航至該頁面：

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

  2. 拍攝快照以瞭解 DOM 結構：

    browser_snapshot()

  3. 檢查控制檯是否有 JavaScript 錯誤：

    browser_console(clear=true)

    在每次導航後以及每次重要交互後執行此操作。靜默的 JS 錯誤是高價值的發現。

  4. 拍攝帶標註的截圖以直觀評估頁面並識別交互元素：

    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. 每次交互後，檢查以下內容：

    • 控制檯錯誤：browser_console()
    • 視覺變化：browser_vision(question="What changed after the interaction?")
    • 預期行為與實際行為

階段 3：收集證據​

對於發現的每個問題：

  1. 拍攝截圖以展示問題：

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

    保存響應中的 screenshot_path — 你將在報告中引用它。

  2. 記錄詳細信息：

    • 問題發生的 URL
    • 復現步驟
    • 預期行為
    • 實際行為
    • 控制檯錯誤（如果有）
    • 截圖路徑

  3. 使用問題分類法對問題進行分類（參見 references/issue-taxonomy.md）：

    • 嚴重程度：嚴重 (Critical) / 高 (High) / 中 (Medium) / 低 (Low)
    • 類別：功能 (Functional) / 視覺 (Visual) / 無障礙 (Accessibility) / 控制檯 (Console) / 用戶體驗 (UX) / 內容 (Content)

階段 4：分類​

  1. 審查所有收集到的問題。
  2. 去重 — 合併在不同位置表現的同一缺陷的問題。
  3. 為每個問題分配最終的嚴重程度和類別。
  4. 按嚴重程度排序（首先是嚴重，然後是高、中、低）。
  5. 按嚴重程度和類別統計問題數量，用於執行摘要。

階段 5：報告​

使用 templates/dogfood-report-template.md 中的模板生成最終報告。

報告必須包括：

  1. 執行摘要，包含問題總數、按嚴重程度細分以及測試範圍
  2. 每個問題的部分，包含：
    • 問題編號和標題
    • 嚴重程度和類別徽章
    • 觀察到的 URL
    • 問題描述
    • 復現步驟
    • 預期行為與實際行為
    • 截圖引用（使用 MEDIA:<screenshot_path> 嵌入圖片）
    • 相關的控制檯錯誤
  3. 所有問題的彙總表
  4. 測試說明 — 測試了什麼、未測試什麼、任何阻礙因素

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

工具參考​

工具用途
browser_navigate訪問 URL
browser_snapshot獲取 DOM 文本快照（無障礙樹）
browser_click通過引用（@eN）或文本點擊元素
browser_type在輸入字段中輸入內容
browser_scroll在頁面上向上/向下滾動
browser_back在瀏覽器歷史記錄中後退
browser_press按下鍵盤按鍵
browser_vision截圖 + AI 分析；使用 annotate=true 獲取元素標籤
browser_console獲取 JS 控制檯輸出和錯誤

提示​

  • 在導航後以及進行重要交互後，務必檢查 browser_console()。 靜默的 JS 錯誤是最有價值的發現之一。
  • 當需要推理交互式元素的位置或快照引用不明確時，在 browser_vision 中使用 annotate=true。
  • 使用有效和無效輸入進行測試 — 表單驗證錯誤很常見。
  • 滾動瀏覽長頁面 — 首屏下方的內容可能存在渲染問題。
  • 測試導航流程 — 端到端地點擊完成多步驟流程。
  • 通過注意截圖中可見的任何佈局問題來檢查響應式行為。
  • 不要忘記邊界情況：空狀態、非常長的文本、特殊字符、快速點擊。
  • 向用戶報告截圖時，請包含 MEDIA:<screenshot_path>，以便他們可以內聯查看證據。