在自主 AI 代理人 (Autonomous Agents) 技術飛速發展的今天，讓 AI 不僅具備對話能力，更能自主走入真實網路世界執行端到端 (End-to-End) 的複雜任務，已成為工程領域最令人振奮的探索方向。本文將以 Hermes Agent 為核心主角，詳實記錄一場由代理人自主挑戰「高山國家森林遊樂區線上訂房系統」的實戰全過程。

面對熱門的高山渡假山莊訂房，系統不僅具備嚴格的 「入住日前 2 個月開放」 規則，更設有連線人數限制、動態驗證碼以及多重彈窗機制。本文記錄了 Hermes Agent 如何透過瀏覽器自動化工具自主探索頁面、解決透明圖形驗證碼辨識難題、優化 CDP (Chrome DevTools Protocol) 彈窗通訊，並在取消訂房與例外狀況中建立零成本的安全退路機制。

📋 目錄

  1. 任務背景：當 Hermes Agent 接到搶房任務
  2. 系統架構與自動化流程設計
  3. 核心挑戰與攻防破解實錄
  4. 訂房完整成功路徑 (Happy Path)
  5. 取消訂房流程與例外安全退路機制
  6. 可複製的 Agentic 瀏覽器自動化經驗總結
  7. 結論與未來進階

🌟 任務背景：當 Hermes Agent 接到搶房任務

高山森林遊樂區的住宿資源極為珍稀，每到熱門季節往往在一開放時便秒殺一空。為了驗證自主代理人在真實多步驟表單與互動式 Web 應用中的適應力，我們向 Hermes Agent 下達了一項端到端的預訂與管理測試任務。

🤖 Agent Prompt: 「請前往高山國家森林遊樂區線上訂房系統，依據指定的使用者偏好，自主探索並預訂一個月後的雙人或背包客房型。遇到驗證碼或彈窗請自行判斷破解；完成訂房後記錄訂單資料，並進行取消訂房流程測試。」

訂房系統基本規格與限制

項目系統規範
目標系統高山森林遊樂區線上訂房系統 (https://reservation.national-forest.example.gov)
開放時段每日 08:00 至 23:50
預訂範圍入住日期前 2 個月 ，每日早上 08:00 正式釋出當日配額
並行限制線上伺服器承載上限為 50 人，滿載時需等待排隊
標準流程1. 選擇房型 → 2. 確認日期 → 3. 確認訂單 → 4. 填寫旅客資訊 → 5. 簡訊驗證與虛擬帳戶繳費

🏗️ 系統架構與自動化流程設計

在傳統的腳本式爬蟲中，任何 UI 微調或非預期彈窗都會導致任務中斷；而 Hermes Agent 結合了 LLM 推理核心 與 瀏覽器控制工具箱 ，能動態觀察 DOM 樹狀態、辨識畫面異常並自我修正。

graph TD Start[啟動任務並接收訂房偏好] --> Nav[瀏覽器導航至訂房首頁] Nav --> Captcha{遇到圖形驗證碼} Captcha --> Canvas[Canvas 白底重繪處理] Canvas --> OCR[Vision OCR 辨識文字] OCR --> InputCap[填入驗證碼並進入系統] InputCap --> SelectRoom[選取指定森林木屋房型] SelectRoom --> CheckDate[分析月曆狀態與可訂範圍] CheckDate --> FillForm[填寫旅客資料與勾選條款] FillForm --> DialogCheck{檢測 CDP 彈窗} DialogCheck -->|存在 Alert 或 Confirm| HandleDialog[主動接受或關閉 Dialog] DialogCheck -->|無彈窗| SMS[輸入簡訊驗證碼完成訂房] HandleDialog --> SMS SMS --> OrderSuccess[取得訂單編號與虛擬帳號] OrderSuccess --> TestCancel[執行取消訂房與安全驗證]

💻 核心挑戰與攻防破解實錄

在實際自動化操作過程中，Hermes Agent 遇到了數個關鍵瓶頸。以下記錄代理人如何一步步排查根因並給予精準解法：

1. 圖形驗證碼辨識失敗：透明背景的 Premultiply 陷阱

【問題現象】 進入訂房系統前必須輸入 5 碼英數字圖形驗證碼。Agent 起初嘗試使用一般 OCR 辨識或下載圖片，但頻頻遭遇辨識錯誤：

  • 使用一般的終端下載指令 (curl) 抓取驗證碼圖片，結果圖片 全黑 。
  • 直接截圖進行文字辨識，OCR 模型完全無法讀出文字。
# 初始嘗試：直接下載圖片（失敗：缺少 Session 且背景透明處理失真）
curl -O https://reservation.national-forest.example.gov/captcha.png

【根因分析】

  1. 伺服器端驗證碼與瀏覽器 Session Cookie 強烈綁定，外部獨立請求會拿到無效圖片。
  2. 該驗證碼圖片採用 「黑色文字 + 透明背景 (Alpha Channel)」 設計。當影像處理工具在沒有指定背景色的情況下轉檔時，預乘透明度 (Premultiplied Alpha) 會將透明像素預設轉為黑色，導致圖片變成 「黑底黑字」 ，OCR 演算法自然無法提取任何邊緣。

【Agent 最佳解法】 Hermes Agent 直接在瀏覽器執行環境內注入 JavaScript，建立白底 Canvas 重新繪製後輸出：

// 在瀏覽器控制台中建立白底 Canvas 處理透明背景
function extractCleanCaptcha(imgElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.naturalWidth;
  canvas.height = imgElement.naturalHeight;
  const ctx = canvas.getContext('2d');
  
  // 先填滿純白底色，消除 Alpha 通道預乘問題
  ctx.fillStyle = '#FFFFFF';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 繪製黑色驗證碼文字
  ctx.drawImage(imgElement, 0, 0);
  return canvas.toDataURL('image/png');
}

透過將 Base64 轉換為純白底黑字的乾淨 PNG，再呼叫 Vision OCR 引擎，成功率達到 100% （精準辨識出如 gax23、ma6bg 等動態字串）。

2. CDP 通訊逾時：JavaScript Alert 與 Confirm 阻塞

【問題現象】 在點擊「送出表單」或「確認訂單」時，瀏覽器自動化工具頻繁回報 TimeoutError。

【根因分析】 傳統訂房網頁大量使用同步的 window.alert() 與 window.confirm() 彈出式視窗。當這些對話框跳出時，瀏覽器的渲染引擎會暫停執行緒，並阻塞 Chrome DevTools Protocol (CDP) 的指令回應。

【Agent 最佳解法】 Agent 建立了前置攔截與非同步對話框監控邏輯：

  1. 每次觸發點擊前，先使用 page_info() 輪詢當前分頁是否有未處理的 dialog。
  2. 透過 Page.handleJavaScriptDialog 主動發送 accept 或 dismiss 訊號，防止 CDP 卡死。

💡 經驗分享： 常見的系統攔截彈窗包括：「驗證碼輸入錯誤」、「訂房時間錯誤！」、「已超過訂房操作時間，請重新訂房！」以及「是否確認訂單內容？」。將彈窗處理封裝為全域監聽器，是保障 Agent 穩定運行的關鍵。

3. 可訂範圍判斷：預先理解商業邏輯的重要性

【問題現象】 Agent 在月曆上看到 2 個月後的日期為白色（非客滿的灰色），嘗試點擊下訂卻彈出「訂房時間錯誤！」。

【根因分析】 系統的規則是： 「入住日前 2 個月當日早上 08:00 開放」 。

  • 例如：欲預訂 10 月 31 日入住，系統必須等到 8 月 31 日 08:00 才會正式開放。
  • 月曆上的白色未客滿狀態僅代表「非額滿」，但不等於「當前已開放預訂」。

【Agent 修正策略】 Agent 調整日期計算演算法，將可選區間動態鎖定在 [當前日期, 當前日期 + 2個月] 內，並設定智慧排程器，在每日 08:00 準時發動搶房。

4. DOM 動態狀態與表單同步陷阱

在操作進階表單時，Agent 記錄了另外三項寶貴的 Web 自動化技巧：

  • 按鈕語意動態變更：確認訂單頁的按鈕文字為 「確認訂房」 ，但進入旅客資料頁後卻變為 「確認訂單」 。Agent 改採基於上下文的多層選擇器 (Selector)，不再依賴單一靜態文字。
  • 條款 Checkbox 強制驗證：送出前必須確實將隱私權與入住須知勾選框 (input[name="agree"]) 設為 checked = true。
  • DOM Value 與內部狀態同步：直接修改 input.value 有時不會觸發前端框架的雙向綁定 (Two-way binding)。Agent 在填值後主動呼叫 dispatchEvent(new Event('change')) 與 dispatchEvent(new Event('input'))，確保資料正確同步。

🤖 訂房完整成功路徑 (Happy Path)

在克服上述挑戰後，Hermes Agent 順利完成了高山森林木屋的完整訂購：

  1. 進入系統：突破首頁圖形驗證碼，建立合法 Session。
  2. 鎖定房型：選擇森林渡假園區的「經典台灣杉景觀雙人房／背包客床位」。
  3. 設定日期：動態計算合法區間，提交指定入住日期（如 9 月底週末假期）。
  4. 填寫旅客資料：填入去識別化之旅客姓名、身分證字號、聯絡電話與電子信箱。
  5. 雙重認證 (2FA)：接收手機簡訊驗證碼並即時填入送出。
  6. 取得訂購單：成功產生訂房明細，並產生公庫銀行之虛擬帳號（提供 3 天內繳納定金）。
【訂房成果清單（已去識別化）】
- 預訂房型：高山森林景觀背包客床位 (男性專屬房)
- 入住區間：2026-09-26 (六) ～ 2026-09-27 (日)
- 房價總額：NT$ 1,300
- 應付定金：NT$ 400
- 繳費途徑：公營銀行虛擬帳號轉帳
- 目前狀態：訂購成功（等待定金匯入）

🔄 取消訂房流程與例外安全退路機制

身為一個負責任的自主代理人，在驗證訂房可行性後，必須立即測試 「取消訂房」 流程，避免佔用公共資源。

取消訂房操作步驟

  1. 查詢入口：進入「查詢／取消訂房」專區，此處同樣需先通過 Canvas 白底驗證碼辨識。
  2. 輸入查詢鍵值：填寫「訂單編號」與「訂房 Email」。
    • ⚠️ 前端欄位小陷阱：雖然介面提供手機號碼查詢選項，但底層驗證仍強制要求填寫 Email。直接以 Email 作為主查詢鍵最為穩固。
  3. 輸入二次驗證碼：系統會發送確認碼至旅客信箱。
  4. 確認取消：進入訂單明細頁點擊「取消訂房」，並在彈出的 confirm 視窗中確認，訂單狀態隨即轉為 「已取消」 ，應付金額歸零。

🛡️ 實戰例外應變：未繳定金訂單的「安全退路」

在 8 月 21 日的實測中，Agent 遇到了真實世界常見的邊緣情況 (Edge Case)：伺服器的 Email 驗證碼發生延遲或漏信，導致取消流程無法立即在線上完成。

此時 Hermes Agent 啟動了預先設計的 安全退路邏輯 (Fail-Safe Mechanism)：

🛡️ 安全退路原則：

  1. 線上訂房成立後，系統皆給予 3 天的繳費寬限期 。
  2. 若訂單尚未支付定金，只要 不執行匯款動作 ，系統時間一到便會 自動將訂單逾期作廢並釋出配額 。
  3. 該過程 完全不會產生任何手續費或違約金 ，具備零成本、零財務風險的特性。
  4. 當驗證碼系統卡死時，代理人應記錄狀態並安心退場，毋須無止境輪詢等待。

💡 可複製的 Agentic 瀏覽器自動化經驗總結

透過這次高山森林遊樂區訂房的實戰洗禮，我們為自主代理人的 Web 自動化沉澱出以下黃金法則：

  1. 影像前處理優先於模型升級：遇到奇怪的驗證碼或圖示，先檢查 Alpha 透明通道與底色設定。善用 Canvas 填白底往往比更換昂貴的視覺模型更具奇效。
  2. 彈窗非同步解耦：CDP 自動化中最忌諱被原生 alert/confirm 阻塞。必須建立全域的 Dialog 監聽與自動決策管道。
  3. 業務邏輯優先於頁面外觀：深入理解系統背後的業務規則（如幾點開放、幾個月前開賣、時效 Session 限制），能避免代理人盲目嘗試無效操作。
  4. 永遠設計例外退路 (Fail-Safe)：在涉及金融交易或預訂的流程中，必須釐清「未繳費自動失效」等冷卻機制，確保代理人在遇到不可抗力時能安全降級。

🚀 結論與未來進階

本篇實戰充分證明了 Hermes Agent 配合適當工具鏈，已具備處理複雜、動態且具備多重防護機制的真實 Web 互動能力。從圖形處理、DOM 操作到例外安全退路，代理人展現了遠超傳統自動化腳本的適應力與彈性。

未來，我們可以進一步將此流程封裝為專屬的 Hermes Skill / MCP Tool ，並串接排程通知（如 Telegram Bot 或 Slack），實現真正全天候、無人值守的高智慧個人生活助理！

記錄時間：2026-08-21 ｜ 測試核心：Hermes Agent + 瀏覽器自動化 (CDP) + macOS Vision OCR