學習如何在使用 ChatGPT App Codex GPT‑5.6 操作 Browser 時，透過分層架構、Playwright、Stagehand 等框架，降低 Token 使用量並保持高準確度。
目標
- 節省 Token：在使用 ChatGPT App Codex GPT‑5.6 進行 Browser 操作時，減少不必要的推理步驟。
- 保持準確度：仍能保留 GPT‑5.6 的高精度決策能力，尤其在複雜頁面或失敗重試時。
- 可落地：提供可直接套用的框架與實作範例，並說明 Reddit 與 GitHub 上的共識與熱門專案。
為什麼 Token 會爆炸？
- 重複性高、技術含量低的操作（登入、點擊、填表、下載）仍被送進 GPT‑5.6 進行推理。
- 每一步都傳送完整 DOM / 影像，造成輸入 Token 大幅增加。
- 長流程：每次操作都重新讀取頁面、送給模型、再回傳結果，累積效應可達數十萬 Token。
關鍵：Token 不是單純由模型決定，而是「輸入大小 × 步驟數 × 重試次數 × 模型單價」的乘積。
先決策：API / MCP / HTTP
| 先決策 | 何時使用 | 節省 Token 的原因 |
|---|---|---|
| 直接 API | 有官方 API | 直接結構化資料，無需模型推理 |
| MCP / Plugin | 支援插件 | 只傳遞必要參數，避免 DOM 解析 |
| HTTP Request | 需要抓取靜態資料 | 只傳遞 URL，模型不參與 |
| DOM Extraction | 需要結構化表格 | 只傳遞表格資料，省去畫面解析 |
| Browser Automation | 無 API | 需要視覺操作，才使用 Browser Agent |
| Vision Browser Agent | 需要 Canvas 或視覺判斷 | 只在必要時使用，避免頻繁截圖 |
實務：先盡量走 API 或 MCP，只有在「無法直接取得資料」時才落到 Browser。
分層升級式 Browser Agent
- Playwright CLI + Skills（固定流程）
- 生成一次 Playwright 腳本，之後直接執行，無需 GPT‑5.6 推理。
- 適用於登入、表單、下載、上傳等重複性任務。
- Stagehand / Skyvern（自動化 SDK）
- 初次探索時使用 GPT‑5.6 產生 selector，之後緩存並直接 replay。
- 只有 selector 失效或頁面結構變動時才重新呼叫 GPT‑5.6。
- Browser Use（通用框架）
- 適合未知網站或需要自然語言指令的情境。
- 需配合「小模型」處理日常操作，僅在複雜場景才切回 GPT‑5.6。
- Vision Fallback（畫面截圖）
- 只在無法透過 DOM 或 selector 取得目標時使用。
- 由多模態模型（如 Gemini 1.5 Flash）判斷，避免頻繁截圖。
核心原則：GPT‑5.6 只負責「決策」與「失敗修復」，Playwright 或 Stagehand 負責「執行」。
Reddit 上的共識
| 層級 | 主要工具 | 主要優點 |
|---|---|---|
| API / MCP | 官方 API、OpenAI Computer Use | 省 Token、結構化 |
| Accessibility Tree | Stagehand、Skyvern | 只傳遞可點擊元素、輸入框、可見文字 |
| 固定流程 Replay | Playwright CLI、Stagehand | 只執行 selector，無需推理 |
| 小模型 + 大模型分工 | Browser Use + Gemini 1.5 Flash | 低成本日常操作，複雜時切回 GPT‑5.6 |
| Vision Fallback | Gemini 1.5 Flash、DeepSeek Vision | 只在必要時使用，避免頻繁截圖 |
實際案例：多位 Reddit 用戶報告，使用 Stagehand + Gemini 1.5 Flash 後，單次任務 Token 下降 70% 以上。
GitHub 上的熱門 Repo
| Repo | Stars | 主要定位 | 適用場景 | Token 效率 |
|---|---|---|---|---|
browser-use/browser-use |
106k | 通用 Browser Agent | 任意網站、開放式任務 | 中（需控制步驟） |
microsoft/playwright-mcp |
35k | Playwright MCP | 固定流程、Coding Agent | 高 |
browserbase/stagehand |
23k | AI + Playwright SDK | 生產自動化、流程快取 | 高 |
skyvern-ai/skyvern |
22k | AI Workflow Automation | 跨網站企業流程 | 高 |
nanobrowser/nanobrowser |
13k | Chrome Extension Agent | 個人快速部署 | 中 |
steel-dev/steel-browser |
7k | Browser Infrastructure | 自架或雲端 Browser | 取決於實作 |
openclaw/openclaw |
384k | Agent Orchestrator | 多工具長時間 Agent | 取決於實作 |
選擇建議：若你需要固定流程（如報表下載），首選 Playwright CLI；若需要自動化 SDK，Stagehand 或 Skyvern；若是個人快速部署，Nanobrowser。
實作範例：Playwright + Stagehand
# 1️⃣ 先用 GPT‑5.6 產生 Playwright 腳本（一次性）
import openai
openai.api_key = "YOUR_KEY"
response = openai.ChatCompletion.create(
model="gpt-5.6",
messages=[
{"role": "system", "content": "Generate a Playwright script to log into example.com and download the latest report."},
{"role": "user", "content": "Sure, here is the script:"}
]
)
playwright_script = response.choices[0].message.content
# 2️⃣ 儲存腳本
with open("login_and_download.py", "w") as f:
f.write(playwright_script)
# 3️⃣ 執行腳本（無需 GPT‑5.6）
import subprocess
subprocess.run(["python", "login_and_download.py"], check=True)
說明：腳本生成後，所有後續執行都不再呼叫 GPT‑5.6，Token 只消耗於一次生成。
常見陷阱與解決方案
| 陷阱 | 原因 | 解決方案 |
|---|---|---|
| DOM 變動頻繁 | selector 失效 | 使用 Stagehand 的 selector cache + fallback to GPT‑5.6 |
| 大量歷史訊息 | context 佔用 Token | 只傳遞必要的歷史片段，或使用 context.compress() |
| 頻繁截圖 | Vision Token 高 | 只在無法透過 DOM 判斷時截圖，並使用多模態模型快速判斷 |
| API 失效 | 網站改版 | 先用 GPT‑5.6 重新抓取 API 端點，或切回 Browser Agent |
結論
- 先決策：盡量走 API / MCP，避免不必要的 Browser 操作。
- 分層升級：Playwright CLI + Stagehand 形成「決策‑執行」分離，減少 GPT‑5.6 的推理次數。
- 小模型 + 大模型：日常操作用低成本模型，複雜場景再切回 GPT‑5.6。
- 實際落地：選擇最符合你工作流程的框架（Playwright、Stagehand、Skyvern、Nanobrowser），並遵循上述分層原則，即可在保持高準確度的同時，將 Token 消耗降至最低。
下一步：根據你目前的工作流程，挑選一個框架並嘗試上述分層實作；若遇到具體問題，歡迎在社群或專案 Issue 中討論。