"Playwright"
- Playwright 瀏覽器驗證流程
用 Playwright 驗證 web 版本的 UI 行為 — test 結構、selector 策略、和 widget test 的互補關係
- 螢幕截圖比對
Visual regression testing — 用螢幕截圖比對偵測非預期的視覺變化、baseline 管理和 diff 閾值設定
- 在開發循環裡早一點用 playwright 看真實結果
靜態 CSS 推理跟視覺截圖溝通有極限 — 當行為與預期不符 ≥ 2 次，stop 推理、改用 playwright browser_evaluate 直接讀 live DOM。本文說明工具引入時機。
- 用前端測試把排版問題自動化
排版問題傳統靠人眼檢查、容易遺漏邊界 case。當一個版型被 debug 兩次以上、就值得寫成 playwright 測試把規範固定下來。本文展開測試替代手動檢查的時機。
- 驗證方法的選擇時機
靜態 CSS 推理 ≥ 2 次失敗就主動提『啟個 server、用 playwright 看 live DOM 比較快』、不要繼續猜。本文展開驗證工具的引入時機。
- Frontend with Playwright — SKILL 入口
框架無關的前端開發 + Playwright 驗證 SKILL 入口：三大支柱、六大原則速查、六份情境 reference 的觸發路由。
- Playwright in the Development Loop — 開發循環的三個位置
frontend-with-playwright reference：Playwright 三個位置（假設 / 行為 / 互動驗證）的 evaluate 範例、寫成 layout test 的時機與模板、最低門檻 setup。
- Tool Switching Timing — 推理 / DevTools / Playwright 的切換時機
requirement-protocol reference：四種 debug 工具的 ROI 對照、切換訊號、playwright 三個位置（假設 / 行為 / 互動驗證）。