AI 自動化開源工具 MCP 2026-07-13 ｜ AutoDev AI

Alibaba Page-Agent 完整教學：DOM-in-Page AI Automation（2026）

如果你曾用 Puppeteer、Playwright 或 Selenium 寫網頁自動化，你一定遇過最痛的問題：截圖識別率不穩定、坐標偏移、頁面每改一次就要重寫 selector。阿里巴巴開源的 Page-Agent 🔥 GitHub 15K+ ★ 用了一個根本不同的方法——不截圖，直接讀 live DOM 當作文字輸入給 AI，讓 LLM 理解網頁結構後下指令給瀏覽器執行。

本文是目前網路上最完整的繁中 Page-Agent 教學，從原理到實作一次說清楚。

💡 一句話理解：Page-Agent 讓 AI 像「看懂網頁原始碼的工程師」一樣操作瀏覽器，而不是像「猜截圖座標的機器人」。

什麼是 Page-Agent？

Page-Agent（alibaba/page-agent）是阿里巴巴 2026 年發布的開源 AI 瀏覽器自動化框架，目前在 GitHub 擁有 15,000+ stars，MIT 授權，支援 Python 與 TypeScript。

它的核心創新是 DOM-as-Text：將整個頁面的 DOM 樹轉換為結構化的文字表示，直接送給 LLM（Claude、GPT-4o、Qwen 等）做推理，LLM 根據用戶指令決定要點哪個元素、填什麼欄位、執行什麼操作，再回傳 action 給瀏覽器執行。

傳統 vs Page-Agent 架構對比

方法	輸入	AI 理解	穩定性	維護成本
截圖型（BrowserUse / Computer Use）	PNG 截圖	圖像識別坐標	⚠️ 受解析度、主題影響	高（UI 改版即失效）
Selector 型（Playwright / Puppeteer）	CSS / XPath	不用 AI	⚠️ Selector 脆弱	高（需人工維護）
DOM-in-Page （Page-Agent ✅）	DOM 文字樹	語義理解	✅ 元素語義穩定	低（AI 自動適配）

Page-Agent 的核心技術

1. DOM Serializer

Page-Agent 在頁面中注入一段 JavaScript，將 DOM 樹轉成結構化的 YAML/JSON 文字（移除不必要的視覺節點如廣告、裝飾性 div），每個互動元素（按鈕、輸入框、連結）都標上 唯一 ID（pageid） 和語義屬性（role、aria-label、placeholder 等）。

# 例：DOM 序列化輸出片段
[12] button "登入" role=button data-action=submit
[13] input type=email placeholder="請輸入 Email" required
[14] input type=password placeholder="密碼"
[15] a href="/forgot" "忘記密碼？"

2. LLM 推理層

上述 DOM 文字 + 用戶指令一起送給 LLM，例如：

指令：「登入帳號 test@example.com，密碼 demo1234」

LLM 推理：
1. 找到 [13] input type=email → fill("test@example.com")
2. 找到 [14] input type=password → fill("demo1234")
3. 找到 [12] button "登入" → click()

3. Action Executor

LLM 回傳 structured action list，Page-Agent 透過 Playwright/CDP 執行到真實瀏覽器，支援：click、fill、scroll、navigate、extract、wait、screenshot 等 20+ 動作類型。

4. Enterprise Security Guardrails

Page-Agent 內建企業級安全護欄（為阿里巴巴內部生產環境設計）：

Domain Allowlist：只允許 Agent 在授權域名內操作
Action Filter：可封鎖特定 action（如禁止 fill 到密碼欄位）
PII Masking：自動遮蔽 DOM 中的電話、身份證等敏感資訊再送 LLM
Audit Log：每一步 action + LLM decision 都記錄可供審計

安裝 Page-Agent（5 分鐘上手）

Page-Agent 支援 Python 3.10+ 和 Node.js 18+，以下以 Python 為例。

1前置需求

Python 3.10+
Playwright 已安裝（pip install playwright && playwright install chromium）
LLM API Key（支援 OpenAI、Anthropic Claude、阿里通義 Qwen）

2安裝 page-agent

pip install page-agent

或從 GitHub 安裝最新版：

pip install git+https://github.com/alibaba/page-agent.git

3設定 API Key

# .env 檔案
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxx
# 或使用 OpenAI
OPENAI_API_KEY=sk-xxxxxxxxxx
# 或阿里通義
DASHSCOPE_API_KEY=sk-xxxxxxxxxx

4第一個自動化腳本

import asyncio
from page_agent import PageAgent

async def main():
    agent = PageAgent(
        llm="claude-3-5-sonnet",  # 或 "gpt-4o"、"qwen-max"
        headless=False             # True 為無頭模式
    )
    
    result = await agent.run(
        url="https://news.ycombinator.com",
        task="找出今天排名前 5 的文章標題和分數，回傳 JSON 格式"
    )
    
    print(result)
    await agent.close()

asyncio.run(main())

執行後，你會看到瀏覽器自動打開 Hacker News，AI 讀取 DOM 結構，識別標題和分數欄位，並回傳結構化 JSON——全程不需要你寫任何 selector。

🚀 想系統學習 Python AI 自動化？

DataCamp 提供從 Python 基礎到 AI/LLM 應用的完整學習路徑，包含互動式程式碼練習。

免費試用 DataCamp →

實戰範例：3 個常見使用場景

範例 1：電商價格監控

每天自動抓取競品定價，不怕對方改版：

from page_agent import PageAgent

async def monitor_prices():
    agent = PageAgent(llm="claude-3-5-sonnet")
    
    urls = [
        "https://shop-a.com/product/123",
        "https://shop-b.com/items/456",
    ]
    
    results = []
    for url in urls:
        data = await agent.run(
            url=url,
            task="取得商品名稱、現在售價、是否有折扣，回傳 JSON"
        )
        results.append(data)
    
    await agent.close()
    return results

範例 2：自動填寫表單

批量送出申請、訂單、或測試用資料：

agent = PageAgent(
    llm="gpt-4o",
    security={
        "allowed_domains": ["internal.company.com"],
        "block_actions": []    # 允許所有動作
    }
)

await agent.run(
    url="https://internal.company.com/apply",
    task="""
    填寫以下申請表並提交：
    - 姓名：王小明
    - 部門：工程部
    - 申請項目：開發環境 VPN 存取
    - 理由：遠端工作需求
    """
)

範例 3：SaaS 後台數據抓取

把散落在各 SaaS 後台的數據整合到你自己的 dashboard：

results = await agent.run(
    url="https://dashboard.yoursaas.com/analytics",
    task="""
    從 Analytics 頁面抓取：
    1. 本月 MAU
    2. 本月 MRR（月收入）
    3. 流失率
    回傳 dict 格式
    """,
    session_storage={  # 傳入已登入的 cookies
        "auth_token": "Bearer xxxx"
    }
)

MCP 整合：與 Claude Code / Cursor 協作

Page-Agent v0.8+ 提供原生 MCP（Model Context Protocol）Server，讓你在 Claude Code 或 Cursor 等 IDE 中直接呼叫瀏覽器自動化能力。

設定 MCP Server

# 啟動 Page-Agent MCP Server
page-agent serve --port 3100 --llm claude-3-5-sonnet

然後在 Claude Desktop 的 claude_desktop_config.json 中加入：

{
  "mcpServers": {
    "page-agent": {
      "command": "page-agent",
      "args": ["serve", "--stdio", "--llm", "claude-3-5-sonnet"]
    }
  }
}

完成後，你可以在 Claude 對話中直接說：

「用 page-agent 幫我去 GitHub trending 抓今天 Python 排名前 10 的 repo，回傳名稱和 star 數」

Claude 會自動呼叫 MCP tool，Page-Agent 打開瀏覽器執行，結果回傳到 Claude 對話視窗。

在 Claude Code CLI 中使用

claude --mcp-server page-agent "幫我用 page-agent 測試我們登入流程的 3 個 edge case"

企業安全設定詳解

Page-Agent 在阿里巴巴內部已用於生產環境，安全護欄是核心賣點之一。

完整 Security Config 範例

from page_agent import PageAgent

agent = PageAgent(
    llm="claude-3-5-sonnet",
    security={
        # 只允許操作這些域名
        "allowed_domains": [
            "internal.company.com",
            "*.your-saas.com"
        ],
        
        # 封鎖高風險 action
        "block_actions": [
            "navigate_external",   # 禁止跳出授權域名
            "download_file",       # 禁止下載
        ],
        
        # 自動遮蔽 DOM 中的敏感資料再送 LLM
        "pii_masking": {
            "enabled": True,
            "patterns": ["phone", "id_number", "credit_card"]
        },
        
        # 完整 audit log
        "audit_log": {
            "enabled": True,
            "path": "./logs/page-agent-audit.jsonl"
        }
    }
)

Page-Agent vs 競品比較

工具	方法	開源	MCP 支援	企業安全	適合場景
Page-Agent ✅	DOM-as-Text	✅ MIT	✅ 原生	✅ 完整	企業自動化、測試
BrowserUse	截圖+DOM	✅ MIT	⚠️ 第三方	⚠️ 基本	個人自動化
Playwright	Selector	✅ MIT	❌	✅（自行實作）	工程師測試
Computer Use	截圖	❌ 閉源	✅	⚠️ 依雲端服務	桌面 GUI 任務
Selenium	Selector	✅	❌	⚠️ 自行實作	傳統 Web 測試

常見問題 FAQ

Q：Page-Agent 支援哪些 LLM？

目前支援 Anthropic Claude（推薦，DOM 理解最強）、OpenAI GPT-4o、GPT-4o-mini、阿里通義 Qwen Max/Plus、Google Gemini 1.5 Pro。可透過 llm 參數切換。

Q：DOM 太大 LLM 會超出 context 嗎？

Page-Agent 內建 DOM Pruner，會自動移除不可見元素、純裝飾節點、重複樣板，通常能把一般網頁壓縮到 2,000-8,000 tokens。如果頁面超複雜，可設定 max_dom_tokens 限制，Agent 會優先保留可互動元素。

Q：可以用在需要登入的網站嗎？

可以。透過 session_storage、local_storage 或 cookies 參數傳入已認證的 session，Page-Agent 會在啟動瀏覽器時注入。建議搭配 security.allowed_domains 限制範圍。

Q：免費嗎？要付費嗎？

Page-Agent 本體完全開源免費（MIT）。費用來自你選用的 LLM API——以 Claude Sonnet 為例，一次中等複雜的自動化任務約用 3,000-8,000 tokens，成本在 USD $0.01-0.03。

Q：支援 Windows 嗎？

支援。Playwright 本身跨平台，Page-Agent 在 Windows 10+、macOS、Linux 均可運作。

☁️ 需要部署 Page-Agent 自動化環境？

DigitalOcean Droplet 提供穩定的 Linux 環境，適合跑無頭瀏覽器 + Playwright，按用量計費，新用戶享 $200 免費額度。

取得 DigitalOcean $200 免費額度 →

進階：批量並行執行

Page-Agent 支援 async 並行，可同時跑多個 browser context：

import asyncio
from page_agent import PageAgent

async def scrape_one(url: str, task: str):
    agent = PageAgent(llm="claude-3-5-sonnet", headless=True)
    result = await agent.run(url=url, task=task)
    await agent.close()
    return result

async def main():
    tasks = [
        ("https://site1.com/pricing", "抓取所有方案名稱和價格"),
        ("https://site2.com/pricing", "抓取所有方案名稱和價格"),
        ("https://site3.com/pricing", "抓取所有方案名稱和價格"),
    ]
    
    # 並行執行，最多 3 個 browser 同時跑
    results = await asyncio.gather(*[
        scrape_one(url, task) for url, task in tasks
    ])
    
    return results

asyncio.run(main())

⚠️ 注意：並行執行時，LLM API 呼叫也會並行，請注意 rate limit。Claude API 預設 tier 1 為 1,000 RPM，並行 3-5 個任務通常沒問題。

總結：什麼情況該用 Page-Agent？

✅ 目標網站 UI 常改版，不想一直維護 selector
✅ 需要 AI 根據頁面語義做動態決策（「找最便宜的方案」而不是「點第 3 個按鈕」）
✅ 企業內部流程自動化，需要安全護欄和 audit log
✅ 想在 Claude Code / Cursor 中直接呼叫瀏覽器能力（MCP）
⚠️ 如果任務非常簡單固定（例如每天抓同一個固定 selector），傳統 Playwright 更輕量
⚠️ 如果需要操作桌面 GUI 而非網頁，考慮 Computer Use

Page-Agent 代表了 AI 瀏覽器自動化的下一個典範——從「機器人照表操課」進化到「AI 真的理解網頁在做什麼」。阿里巴巴在 15,000+ stars 前就已在內部生產環境使用，穩定性有保障。

如果你有任何關於 Page-Agent 的問題，歡迎在下方留言，或加入我們的 Telegram 頻道一起討論。

📚 想系統學習 AI 自動化技術？

DataCamp 的 AI 學習路徑涵蓋 Python、LLM 應用、到自動化 agent 開發，課程互動性強、隨時可自學。

免費開始 DataCamp 學習 →