透過自動化 UI 稽核，安心發布
手動測試既緩慢又容易出錯，還會拖慢開發進度。每次我推送變更時，以前總會擔心正式網站上潛藏的失效連結或 console 錯誤。光是每週為了維持基本品質，就得花上好幾個小時反覆點擊。
我開始使用 webapp-testing 技能，把這些工作交給 Eigent。結合 Playwright 的自動化能力與 Eigent 的 agentic workflow（代理式工作流程），我現在只需要一個 prompt，就能執行完整的網站稽核——包含視覺快照與日誌檢查。
以下是我為測試 Eigent.ai 網站所設定的工作流程。
準備測試腳本
我會先用 Python 腳本定義測試邏輯。透過 Playwright 的 async API，我可以在瀏覽時追蹤 console 訊息與網路失敗。這支腳本就像整個作業的大腦，精準告訴 Eigent 要檢查什麼——從特定導覽連結到整頁截圖。
使用 webapp-testing 技能，對網站 https://www.eigent.ai/ 進行全面的功能與 UI 測試。
設定錯誤監聽器
這個工作流程最有價值的部分之一，就是能抓出默默失敗的情況。我設定腳本監聽瀏覽器 console 錯誤與失敗的網路請求。這讓 Eigent 能記錄技術問題，例如我發現的缺少 PostHog token——這種設定錯誤在手動檢查時很容易被漏掉。
自主瀏覽網站
Eigent 會主導導覽流程。它從首頁開始，辨識出主要導覽連結，例如 Environments 和 Enterprise。透過點擊這些區段並等待網路閒置，它能確保每次頁面切換都順暢，且內容能如預期載入。
擷取視覺快照
截圖是驗證不同頁面 UI 一致性的最佳方式。在測試過程中，Eigent 會自動擷取首頁與內頁的整頁快照。我擷取了幾個視圖，包括：
- 首頁： /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
- Environments 頁面： /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
- Enterprise 頁面： /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png
產生自動化報告
導覽完成後，Eigent 會將所有內容整理成 Markdown 報告。內容包含發現摘要、console 錯誤清單，以及所有截圖的絕對路徑。把這些資料集中在同一處，能讓審查流程變得即時。
分析發現
我會檢視輸出結果，找出任何關鍵阻斷問題。這次稽核發現了 PostHog 初始化錯誤，並標記出 task_splitting.mp4 的影片資產中止。這些不只是 bug，更是讓客戶看到之前就能改善使用體驗的機會。
在不增加額外成本下擴大量化品質
這不只是為了抓出幾個 console 錯誤。這個工作流程展示了 Eigent 如何把像 Playwright 這樣的技術工具，轉化為自主的品質夥伴。與其為每次細微的 UI 變更撰寫並維護複雜的測試套件，我只要把 Eigent 指向一個 URL，就能拿到完整報告。
自動化 QA 中「無聊」的部分，能讓開發者專注於功能開發，同時確保既有網站維持穩定可靠。
接下來可以嘗試什麼
稽核 https://eigent.ai/pricing 的行動版響應式設計，並擷取 375x812 解析度的截圖。 檢查網站上所有博客文章是否有損壞圖片，並列出任何 404 錯誤。 驗證 Enterprise 頁面上的 'Book a Demo' 按鈕是否能正確開啟排程對話框。
以上每一項都能運用同樣的 webapp-testing 技能——不需要額外設定。
取得更好結果的技巧
- 使用 networkidle 等待狀態。 這可確保非同步資產與追蹤腳本在 Eigent 截圖或檢查錯誤之前都已完成載入。
- 過濾中止的請求。 許多瀏覽器在快速導覽或延遲載入時會中止請求。將這些請求過濾掉，有助於聚焦真正的 404 與伺服器錯誤。
- 明確指定角色。 當指示 Eigent 點擊按鈕時，使用像 link 或 button 這類以角色為基礎的選擇器，能讓測試對 CSS 變更更具韌性。
