透過自動化 UI 稽核，讓你更有信心發佈
手動測試既緩慢又容易出錯，還會拖慢團隊進度。每次我推出變更時，以前都會擔心正式網站上潛藏著失效連結或 console 錯誤。每星期都要花上好幾小時手動點擊，只為了維持基本品質。
我開始使用 webapp-testing 技能，把這些工作交給 Eigent。結合 Playwright 的自動化與 Eigent 的 agentic 工作流程，我現在只需一個提示，就可以執行完整的網站稽核——包括視覺快照與日誌檢查。
以下是我如何設定這個工作流程來測試 Eigent.ai 網站。
準備測試腳本
我先在 Python 腳本中定義測試邏輯。利用 Playwright 的 async API，我可以在導覽時追蹤 console 訊息與網絡（network）失敗。這個腳本就像整個流程的大腦，精準告訴 Eigent 要檢查什麼——從指定的導覽連結到整頁截圖。
使用 webapp-testing 技能，對網站 https://www.eigent.ai/ 進行全面的功能與 UI 測試。
設定錯誤監聽器
這個工作流程其中一個最有價值的部分，就是能捕捉靜默失敗。我在腳本中設定了監聽瀏覽器 console 錯誤和失敗的網絡請求。這樣 Eigent 就能記錄技術問題，例如我發現缺少的 PostHog token——這種設定錯誤在手動檢查時很容易被忽略。
自主瀏覽網站
Eigent 會主導導覽流程。它從首頁開始，識別主要導覽連結，例如 Environments 和 Enterprise。透過點擊這些區塊並等待網絡閒置（network idle），它確保每次頁面轉換都順暢，且內容如預期載入。
擷取視覺快照
截圖是驗證各頁面 UI 一致性的最佳方式。在測試期間，Eigent 會自動擷取首頁與內頁的整頁快照。我擷取了幾個畫面，包括：
- Homepage: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
- Environments Page: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
- Enterprise Page: /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 的流動式設計（mobile responsiveness），並擷取 375x812 解析度的截圖。 檢查網站上所有 blog post 是否有失效圖片，並列出任何 404 錯誤。 驗證 Enterprise 頁面上的 'Book a Demo' 按鈕是否正確開啟排程 modal。
以上每項都運用了同一個 webapp-testing 技能——無需額外設定。
提升結果的提示
- 使用 networkidle 等待狀態。 這可確保非同步資產與追蹤腳本在 Eigent 截圖或檢查錯誤之前已完成載入。
- 過濾 aborted requests。 很多瀏覽器在快速導覽或 lazy loading 時會中止請求。把這些請求過濾掉，有助你聚焦真正的 404 與伺服器錯誤。
- 明確指定角色。 在指示 Eigent 點擊按鈕時，使用基於角色的選擇器，例如 link 或 button，可讓測試對 CSS 變更更具韌性。
