Agent (CUA)## 前言：當 AI 開始「操作」你的電腦

2025 年初，OpenAI 推出了 Operator——一個能夠操控瀏覽器、操作滑鼠點擊、填寫表單的 AI Agent。這個看起來像宣傳片花絮的功能，背後的技術堆疊卻是近十年來網頁自動化領域最重要的進展之一。

本文不是要告訴你 Operator 有多強大，而是要拆解它背後的 Computer Use Agent（CUA）架構，以及這個技術方向對開發者意味著什麼。

什麼是 CUA？電腦使用 Agent 的核心原理

CUA（Computer-Using Agent）並不是 OpenAI 發明的名詞。它來自 2023 年 Anthropic 發布的 Claude Computer Use 功能——讓 Claude 能夠直接操作滑鼠和鍵盤，控制瀏覽器完成任務。

CUA 的核心原理並不複雜：

輸入：自然語言指令（"幫我預約這家餐廳"）
↓
任務規劃：LLM 將指令拆解成滑鼠座標點擊/鍵盤輸入序列
↓
執行：CDP（Chrome DevTools Protocol）將操作指令轉化為瀏覽器底層事件
↓
反饋：截圖/頁面狀態回傳 LLM，判斷任務是否完成
↓
循環：重複步驟直到達成目標或超時

這個流程看起來像是傳統 RPA（機器人流程自動化）的 LLM 版本。實際上，底層 CDP 的使用方式，幾乎和 Playwright、Puppeteer 完全相同。

CDP：所有瀏覽器自動化的共同底層

無論是 Operator、Claude Computer Use 還是 Browser Agent，它們共同使用的核心工具都是 CDP——Chrome DevTools Protocol。

CDP 讓外部程式可以對 Chrome 進行幾乎所有操作：

• 輸入事件：Mouse move/click/drag、Keyborad input、Touch event
• 頁面控制：Navigate、Reload、JavaScript 注入
• 截圖與DOM讀取：DOM snapshot、Full-page screenshot、Console log capture
• 效能監控：Network interception、Performance trace、Memory profiling

對開發者來說，這些能力早就存在於 Playwright 和 Puppeteer 的 API 中。Operator 的創新在於把 LLM 的推理能力接入這個迴圈，讓電腦操作不再需要人去定義每一個步驟。

從 Playwright 到 AI Agent：技術棧的演進

如果要追溯這個技術方向的演進，Playwright 的開發者應該最有感觸。

2019 年，Microsoft 推出了 Playwright，提供統一的 API 操控 Chromium、Firefox、WebKit。當時的願景是「一次寫碼，多瀏覽器執行」的測試自動化。

2023 年，開發者社群開始用 LLM 串接 Playwright——讓 GPT-4 理解自然語言指令，動態生成 Playwright 操作序列。

2024 年，Anthropic 發布 Claude Computer Use，證明了 LLM + CDP 的閉環可以完成多步驟的電腦操作任務。

2025 年，OpenAI Operator 發布，將這個能力包裝成消費級產品，並擴展到了滑鼠軌跡預測、動態頁面適應等更高階的能力。

這個技術棧的演進脈絡，其實就是一個「測試自動化工具 → Agent 自動化工具」的過程。

三種 CDP 應用場景的技術解析

理解 CDP 的能力邊界，對判斷 AI Agent 的應用範圍很重要。

場景一：表單填寫與資料擷取

CDP 最擅長的場景之一是結構化資料填寫。例如：從一個網站抓取商品資訊，然後填入 Google Sheet。

// 傳統 Playwright 寫法：每一步都需要明確定義
await page.goto('https://example.com/products');
const products = await page.$$eval('.product', els => els.map(e => ({
  name: e.querySelector('.name')?.innerText,
  price: e.querySelector('.price')?.innerText
})));

// AI Agent 寫法：只需要描述目標
// "抓取所有商品的名稱和價格，存成 JSON"

兩種寫法的差異在於：前者需要開發者定義每一個 DOM 選擇器路徑，後者只需要 LLM 理解頁面結構後動態生成操作序列。

場景二：跨平台工作流程串接

更複雜的場景是跨多個網站的工作流程自動化。例如：打開電商網站查詢商品規格 → 複製到比較表格 → 發送 email 通知。

這種場景在傳統 RPA 中屬於「高價值但高維護成本」的應用。AI Agent 的優勢在於：即使頁面結構改變，LLM 也能根據新的 UI 調整操作序列，而不是直接失敗。

場景三：網頁效能監控與自動化回報

CDP 的 Network interception 能力，讓 AI Agent 可以監控頁面的 API 請求回應。例如：當某個關鍵 API 的回應時間超過閾值，自動截圖並釘選開發團隊的 Slack channel。

這類應用的技術價值在於：不再需要人工盯著 Grafana 儀表板，AI 可以根據上下文判斷什麼樣的效能數據「異常」需要通報。

AI Agent 的技術限制：什麼情況下 CDP 會失效

CDP 並非萬能。了解它的限制，才能正確評估 AI Agent 的適用範圍。

限制一：動態載入頁面的截圖時機

CDP 截圖是「當下 DOM 狀態」的靜態影像。但現代網頁大量使用懶加載（Lazy Load）、無限滾動（Infinite Scroll）——這些頁面在初次截圖時，目標元素尚未載入。

AI Agent 需要具備「等待目標元素出現」的能力。這通常透過兩種方式實現：

方式一：輪詢等待（Poll-based wait）
while (true) {
  const target = await page.$('.target-element');
  if (target) break;
  await page.waitForTimeout(1000);
}

方式二：MutationObserver（觀察 DOM 變化）
const observer = new MutationObserver(cb);
observer.observe(document.body, { childList: true, subtree: true });

OpenAI Operator 對這個問題的解法是：用 LLM 預測元素出現時機，結合多次截圖比對，動態調整等待策略。

限制二：CAPTCHA 與機器人偵測

這是 CDP 應用最大的限制。當頁面有 reCAPTCHA、hCaptcha 或 Cloudflare Bot Management 時，CDP 的操作會被識別為機器人流量。

即使是最先進的 AI Agent，面對「識別圖片中所有機車」這類複雜 CAPTCHA 時，成功率仍然極低。這也是為什麼目前 Operator 主要應用在內部工具場景，而非面向消費者的網頁。

限制三：iframe 嵌套與 Shadow DOM

現代網頁大量使用 iframe 嵌套和 Web Component 的 Shadow DOM。CDP 可以穿越 iframe，但 Shadow DOM 的隔離性讓外部操作幾乎不可能直接存取內部元素。

iframe 嵌套：CDP 可以切換 frame context
Shadow DOM：需要通過 page.evaluate(() => element.shadowRoot) 進入

這兩個限制讓 AI Agent 在處理複雜企業軟體時，經常遇到「看得見但點不到」的困境。

開發者該如何準備面對 Agent 時代

作為開發者，這個技術趨勢對你有什麼具體啟示？

啟示一：UI 穩定性會成為新的技術債

過去的技術債是「沒有測試覆蓋」、「文件不完整」。Agent 時代的新技術債是「UI 選擇器不穩定」。

當團隊開始使用 AI Agent 輔助內部流程時，頻繁變化的 class name、非標準化的 DOM 結構，會讓 Agent 的操作失敗率大幅上升。

建議：將 component 的選擇器策略納入 Code Review 標準，用 data-testid 或 semantic class 取代 hash-based class name。

啟示二：API-first 的產品會更有竞争力

如果你的產品同時提供 API 和網頁介面，AI Agent 會更傾向使用 API 完成任務（更穩定、更快速、更不容易被Bot偵測）。

這強化了 API-first 設計的商業價值：不只是提供開發者集成接口，也是讓 AI Agent 能穩定操作的前提。

啟示三：理解 CDP 是未來的必備技能

即使你不打算構建 AI Agent，理解 CDP 的能力邊界，可以幫助你：

1. 評估流程自動化的技術可行性
2. 設計對 AI Agent 友好的網頁結構
3. 在 Agent 故障時，快速識別問題根源

CDP 的文件在 Chrome 官方網站是公開的。建議開發者至少花兩小時親自動手操作一次，感受它的能力邊界。

結語：工具變了，原理不變

OpenAI Operator 的出現，讓「AI 操控電腦」從科幻場景變成了實際可用的產品。但拆解到底層，我們看到的仍然是 CDP + LLM 的組合。

對開發者來說，這不是「AI 來搶工作了」的焦慮信號，而是「自動化邊界又往前推進了一步」的技術訊號。

理解這個技術原理，才能在應用層做出正確的判斷。