# AI 瀏覽器自動化：Playwright CLI 如何省 Token、如何與 Agent 整合
傳統的 AI 瀏覽器自動化方案（如 MCP 模式）通常會將整個網頁的 DOM 結構或大量截圖塞入 AI 的上下文視窗，這不僅導致 Token 消耗巨大，更常因為資訊過載導致 AI 判斷失誤。本文介紹的 **Playwright CLI + Skill** 框架，透過「按需讀取」與「技能固化」的核心邏輯，能有效降低 4 倍以上的 Token 成本，甚至實現 0 Token 的全自動化生產線。
---
## 一、為什麼傳統方案燒 Token？
要理解 Playwright CLI 的省錢之道，先得看清楚舊方案的問題在哪。
**MCP 模式的瓶頸**
在 MCP（Model Context Protocol）這類整合模式下，AI 每執行一個瀏覽器操作，框架就會把當前頁面的完整 DOM 樹或截圖打包進 Context。一個普通的電商頁面，DOM 輕易超過 10 萬 token；附上截圖更可能讓單次請求飆破 20 萬 token。即便 AI 只是想「點一個按鈕」，也得先「讀完整本書」才能找到那一行字。
**Playwright CLI 的核心差異：按需讀取**
Playwright CLI 是一個微軟開源的**命令行瀏覽器控制工具**，它給 AI 的回傳資訊不是整個 DOM，而是一份**精簡的網頁摘要（Accessibility Snapshot）**，只包含可互動元素的描述（按鈕、輸入框、連結等）與當前快照的本地路徑。
流程如下：
```
AI 下指令
↓
playwright-cli 執行動作，僅回傳摘要 (~500 token)
↓
AI 判斷摘要，決定下一步
↓
如需確認細節，AI 才主動讀取本地快照檔
↓
完成任務
```
對比 MCP 每步都丟 10 萬 token，Playwright CLI 每步的基礎消耗大約在幾百 token 左右。這就是「**4 倍省 Token**」的核心機制。
---
## 二、與 AI Agent 整合的原理：Skill 系統
光靠 CLI 還不夠。如果每次任務都讓 AI 從零開始「思考如何操作瀏覽器」，該思考過程本身就得消耗 Token。**Skill（技能）** 就是解決這個問題的第二層優化。
**Skill 的本質**
Skill 是一份 Markdown 格式的說明文件，放在 Agent 框架（如 Antigravity / Cloud Code / Codex）可以讀取的技能目錄下。文件寫清楚：
- 這個工具/流程的用途
- 可用的指令與參數
- 常見的操作步驟範例
- 已知的坑與處理方式
Agent 框架在啟動時會讀取這份文件，之後 AI 執行相關任務時就不用重新「想」如何操作，直接調用技能中的知識庫，**大幅壓縮推理 Token**。
**Skill 目錄放置位置**
| Agent 框架 | Skill 目錄 |
|---|---|
| Antigravity | `.gemini/antigravity/skills/` |
| Cloud Code | `.claude/skills/` |
| Codex | `.codex/skills/` |
---
## 三、一步一步示範：從任務到 0 Token 自動化
以下用「抓取電商評論並存成 CSV」為例，走完三個階段。
---
### 第一步：探索（讓 AI 初次嘗試）
用自然語言下指令，讓 AI 帶著 Playwright CLI 去試水溫：
> **提示詞：**
> 「請使用 playwright-cli 打開 `https://example-shop.com/product/123`，加上 `--headed --persistent` 參數。找到評論區塊，抓取前 100 條用戶評論（包含用戶名、星級、內容），存成 `comments.csv`。過程中遇到截圖才讀快照，其他步驟只用摘要回覆。」
`--headed` 讓瀏覽器視窗可見，方便你觀察；`--persistent` 保存登錄狀態，不用每次重新驗證碼。
AI 會開始逐步執行，每步回覆摘要，遇到找不到元素才讀快照。整個過程的 Token 消耗大概只有 MCP 方案的 **20~25%**。
---
### 第二步：固化（把經驗鎖進 Skill）
AI 成功完成任務後，立刻要求它把這次的操作邏輯提煉成 Skill：
> **提示詞：**
> 「太好了。現在把剛才的完整流程——打開頁面、定位評論區、處理分頁、保存 CSV——還有遇到的坑（例如評論用了 lazy-load 要等待）都整理成一份 Skill 文件，存到 `.claude/skills/scrape-comments.md`。格式要讓以後我說『幫我抓評論』，你就直接照這個流程走，不用重新想。」
這份 Skill 文件建立之後，下次執行「抓評論」任務時，AI 不需要再推理流程，直接調用技能，**Token 消耗從 40% 降至 5% 以下**。
---
### 第三步：腳本化（0 Token 的全自動生產線）
對於完全固定的重複任務，可以更進一步，讓 AI 把成功的操作序列直接輸出成腳本：
> **提示詞：**
> 「把剛才所有成功的 playwright-cli 命令匯總成一個 PowerShell 腳本 `scrape.ps1`。每一步之間加入合理的等待（等頁面載入、等評論出現）。腳本執行後應能全程無人值守，完成抓取並存檔。」
腳本一旦生成，定時執行就是系統層面的工作（Task Scheduler / Cron Job），**AI 完全退場，Token 消耗歸零**。
---
## 四、三個階段的 Token 對比
| 階段 | 方式 | AI 介入程度 | Token 消耗 |
|---|---|---|---|
| 探索 | Playwright CLI + 自然語言 | 高（逐步推理） | ~20% vs MCP |
| 固化 | Playwright CLI + Skill | 低（直接調用） | ~5% vs MCP |
| 腳本化 | 純腳本執行 | 無 | 0 Token |
---
## 五、實戰補充：哪些任務最適合這套框架？
- **定期資料抓取**：電商評論、股價、新聞標題——固化後即可零 Token 排程。
- **WebAPP 自動化測試**：讓 AI 讀源碼理解邏輯，再用 playwright-cli 跑回歸測試，比手工 QA 快 10 倍。
- **社群圖文發布**：先 Python 腳本預處理圖片，再讓 playwright-cli 模擬貼文上傳流程，解決平台不提供 API 的痛點。
---
透過這套 **CLI + Skill** 的工作流，開發者能將 AI 從「單純的對話機器人」轉變為「精通業務流程的操作員」。探索、固化、腳本化，三個階段環環相扣，最終讓 AI 的介入越來越少，生產力卻持續提升。
