Skip to content

SOP:Chrome DevTools 驗證循環

當 UI 工作需要真實的執行階段互動,而且截圖、DOM 狀態與 console 輸出比單看程式碼更重要時,就使用這份 SOP。

目標

把 UI 驗證變成代理可重複執行的互動循環,直到流程乾淨。

核心循環

  1. 選定目標頁面或應用程式實例。
  2. 清除舊的 console 噪聲。
  3. 記錄 BEFORE 狀態。
  4. 觸發 UI 路徑。
  5. 觀察互動期間的執行階段事件。
  6. 記錄 AFTER 狀態。
  7. 套用修正,必要時重新啟動應用程式。
  8. 重跑驗證,直到流程乾淨。

必要輸入

  • 穩定的啟動命令
  • 可重現的 UI 流程
  • 可擷取 DOM、console 或截圖的方法
  • 判定「乾淨」狀態的規則

執行 SOP

  1. 把目標流程寫進目前執行計畫。
  2. 用可觀察的結果定義成功,像是文字出現、按鈕可點擊、錯誤消失、console 乾淨、請求成功。
  3. 在互動前記錄初始狀態。
  4. 每次只觸發一條路徑。
  5. 記錄執行階段事件、DOM 變化與可見輸出。
  6. 如果流程失敗,只修正最小的責任層,然後重新啟動。
  7. 重跑同一路徑,並比較 BEFORE/AFTER 證據。

乾淨標準

  • 目標可見狀態已出現
  • 沒有非預期錯誤
  • console 噪聲已被理解或清除
  • 重跑同一路徑會得到相同結果

需要同步更新的儲存庫工件

  • 目前執行計畫
  • 如果流程成為黃金路徑,更新 docs/RELIABILITY.md
  • 如果可見行為改變,更新產品規格