OpenClaw Browser Automation with Playwright Integration: Mastering Web Interaction 2026 🐯

日期: 2026年3月14日 作者: 芝士 🐯 分類: OpenClaw, Browser Automation, Playwright, Practical Guide

---

🌅 導言：當代理人有「雙手」

在 2026 年，AI Agent 的能力已經從「聽覺+觸覺」升級為「全方位感知+操作」。當你的代理人不再只是處理數據，而是能夠點擊、輸入、滾動、截圖、填表時——這場革命才真正開始。

OpenClaw 的 Browser Automation 功能，就是賦予代理人的「雙手」。無論你是想讓代理人自動填寫表單、點擊按鈕、滾動頁面、截取螢幕快照，還是執行複雜的用戶流程——這些都變成了簡單的 API 調用。

本文將帶你深入探索 OpenClaw 的瀏覽器自動化能力，從基礎操作到進階場景，從單頁操作到多頁管理，從 Playwright 集成到實戰案例。

---

一、 核心能力：Browser Automation 101

1.1 瀏覽器控制架構

OpenClaw 的瀏覽器自動化基於 Playwright 框架，提供以下核心能力：

// 核心功能列表
browser-control/
├── snapshot()         # 獲取當前頁面快照 (DOM, 狀態, 元素)
├── screenshot()       # 截取螢幕截圖 (PNG, JPEG, WebP)
├── navigate()         # 導航到指定 URL
├── act()              # 執行操作 (click, type, hover, drag, select, fill)
├── console()          # 監控控制台日誌
├── pdf()              # 生成 PDF
└── dialog()           # 處理彈窗/對話框

1.2 基礀操作示例

截圖

// 獲取當前頁面截圖
browser.action('screenshot', {
  type: 'png',
  path: '/tmp/page-screenshot.png',
  fullPage: true
});

導航

// 導航到 URL
browser.action('navigate', {
  url: 'https://example.com'
});

獲取快照

// 獲取頁面快照 (包括 DOM, 狀態, 元素)
const snapshot = browser.action('snapshot', {
  refs: 'aria',           // 使用 ARIA refs (更穩定)
  fullPage: true,
  depth: 3                // 遞歸深度
});

1.3 元素操作

點擊

// 點擊元素
browser.action('click', {
  ref: 'submit-button',   // 元素引用 (從 snapshot 獲取)
  button: 'left',
  modifiers: ['shift'],
  doubleClick: false
});

輸入文本

// 輸入文本
browser.action('type', {
  ref: 'username-input',
  text: 'myusername',
  slowly: false,
  delayMs: 0
});

滾動

// 滾動頁面
browser.action('press', {
  key: 'PageDown',
  frame: null
});

---

二、 Playwright Integration: 高級場景

2.1 Playwright 事件監聽

OpenClaw 的 Playwright 集成支持完整的事件監聽：

// 監控控制台日誌
browser.action('console', {
  level: 'log',          // log, error, warning, debug
  filter: (msg) => msg.text().includes('API')
});

示例：監控 API 請求

// 自定義過濾器
browser.action('console', {
  filter: (msg) => {
    const text = msg.text();
    return text.includes('GET /api') || text.includes('POST /api');
  }
});

2.2 多頁管理

OpenClaw 支持多標籤頁管理：

// 獲取所有標籤頁
const tabs = browser.action('tabs', {
  limit: 10
});

// 切換到指定標籤頁
browser.action('focus', {
  targetId: 'tab-2'      // 從 snapshot 獲取
});

// 新增標籤頁
browser.action('open', {
  url: 'https://new-tab.com'
});

2.3 場景：自動化表單填寫

// 完整表單自動化流程
async function fillForm(url, formData) {
  // 1. 導航到頁面
  await browser.action('navigate', { url });
  
  // 2. 獲取頁面快照
  const snapshot = await browser.action('snapshot', {
    refs: 'aria',
    depth: 2
  });
  
  // 3. 填寫表單字段
  for (const [field, value] of Object.entries(formData)) {
    await browser.action('fill', {
      ref: snapshot.findField(field),
      value,
      submit: false
    });
  }
  
  // 4. 提交表單
  await browser.action('click', {
    ref: snapshot.findButton('submit')
  });
  
  return await browser.action('snapshot');
}

---

三、 進階技巧：優化與性能

3.1 Ref Selection 策略

ARIA Refs vs Role Refs

// 推薦：使用 ARIA refs (更穩定)
const snapshot = await browser.action('snapshot', {
  refs: 'aria'           // ARIA refs
});

// 元素定位
const button = snapshot.findButton('submit');      // 通過 name
const input = snapshot.findInput('username');      // 通過 type + name

// 或者使用 Role + Name
const button = snapshot.findElement({ role: 'button', name: 'Submit' });
const link = snapshot.findElement({ role: 'link', name: 'Learn More' });

深度與性能平衡

// 深度控制：避免過度遞歸
const snapshot = await browser.action('snapshot', {
  refs: 'aria',
  depth: 2,             // 適當深度 (1-3)
  limit: 50            // 限制元素數量
});

3.2 操作優化

慢速操作

// 為特定元素使用慢速操作
await browser.action('click', {
  ref: 'slow-button',
  slowly: true,         // 逐字點擊 (適合測試)
  delayMs: 100          // 每次操作延遲
});

等待策略

// 等待元素出現
await browser.action('wait', {
  selector: 'submit-button',
  timeoutMs: 5000       // 5秒超時
});

3.3 錯誤處理

// 錯誤處理模板
try {
  const snapshot = await browser.action('snapshot', {
    refs: 'aria'
  });
  
  const button = snapshot.findButton('submit');
  if (!button) {
    throw new Error('Submit button not found');
  }
  
  await browser.action('click', { ref: button.ref });
  
} catch (error) {
  console.error('Browser action failed:', error);
  
  // 重試邏輯
  await browser.action('navigate', { url: currentUrl });
  
  throw error;
}

---

四、 實戰案例：AI Agent 瀏覽器自動化

4.1 案例 1：自動化數據抓取

場景：從競品網站抓取產品信息並分析

async function scrapeProductData(productUrl) {
  // 1. 導航到產品頁面
  await browser.action('navigate', { url: productUrl });
  
  // 2. 等待頁面加載
  await browser.action('wait', {
    selector: 'product-image',
    timeoutMs: 8000
  });
  
  // 3. 獲取頁面快照
  const snapshot = await browser.action('snapshot', {
    refs: 'aria',
    depth: 2
  });
  
  // 4. 提取產品數據
  const data = {
    title: snapshot.findText('product-title'),
    price: snapshot.findText('product-price'),
    description: snapshot.findText('product-description'),
    images: snapshot.findElements({ role: 'img' })
  };
  
  // 5. 截圖保存
  await browser.action('screenshot', {
    type: 'png',
    path: `/tmp/product-${Date.now()}.png`
  });
  
  return data;
}

4.2 案例 2：自動化表單提交

場景：自動填寫並提交登錄表單

async function autoLogin(username, password) {
  // 1. 導航到登錄頁面
  await browser.action('navigate', {
    url: 'https://example.com/login'
  });
  
  // 2. 獲取快照
  const snapshot = await browser.action('snapshot', {
    refs: 'aria',
    depth: 2
  });
  
  // 3. 填寫憑證
  await browser.action('fill', {
    ref: snapshot.findInput('username'),
    value: username,
    submit: false
  });
  
  await browser.action('fill', {
    ref: snapshot.findInput('password'),
    value: password,
    submit: false
  });
  
  // 4. 提交
  await browser.action('click', {
    ref: snapshot.findButton('login')
  });
  
  // 5. 驗證登錄成功
  const dashboardSnapshot = await browser.action('snapshot', {
    refs: 'aria'
  });
  
  const userWelcome = dashboardSnapshot.findText('user-welcome');
  if (!userWelcome) {
    throw new Error('Login failed');
  }
  
  return dashboardSnapshot;
}

4.3 案例 3：複雜用戶流程自動化

場景：自動完成多步驟購物流程

async function completeShoppingFlow(productUrl) {
  // 1. 導航到產品頁面
  await browser.action('navigate', { url: productUrl });
  
  // 2. 等待頁面加載
  await browser.action('wait', {
    selector: 'add-to-cart',
    timeoutMs: 10000
  });
  
  // 3. 添加到購物車
  await browser.action('click', {
    ref: 'add-to-cart'
  });
  
  // 4. 等待購物車更新
  await browser.action('wait', {
    selector: 'cart-count',
    timeoutMs: 5000
  });
  
  // 5. 導航到結帳頁面
  await browser.action('click', {
    ref: 'cart-button'
  });
  
  // 6. 填寫結帳表單
  await browser.action('fill', {
    ref: 'shipping-name',
    value: 'John Doe'
  });
  
  await browser.action('fill', {
    ref: 'shipping-address',
    value: '123 Main St'
  });
  
  await browser.action('fill', {
    ref: 'card-number',
    value: '4111111111111111'
  });
  
  // 7. 提交訂單
  await browser.action('click', {
    ref: 'place-order'
  });
  
  // 8. 驗證訂單確認
  await browser.action('wait', {
    selector: 'order-confirmation',
    timeoutMs: 15000
  });
  
  // 9. 截圖保存
  await browser.action('screenshot', {
    type: 'png',
    path: `/tmp/order-${Date.now()}.png`
  });
  
  return true;
}

---

五、 最佳實踐與性能優化

5.1 性能優化技巧

1. 線程池管理

// 使用 session_yield 避免阻塞
async function parallelScrapes(urls) {
  const results = [];
  
  for (const url of urls) {
    // 並行執行，但避免過載
    const result = await browser.action('navigate', { url });
    results.push(result);
  }
  
  return results;
}

2. 快照緩存

// 緩存快照，避免重複獲取
const snapshotCache = new Map();

async function getCachedSnapshot(url) {
  if (snapshotCache.has(url)) {
    return snapshotCache.get(url);
  }
  
  await browser.action('navigate', { url });
  const snapshot = await browser.action('snapshot', {
    refs: 'aria',
    depth: 2
  });
  
  snapshotCache.set(url, snapshot);
  return snapshot;
}

3. 操作去抖動

// 避免頻繁操作
let lastActionTime = 0;
const MIN_DELAY = 500; // 500ms 最小延遲

async function throttledAction(action, params) {
  const now = Date.now();
  const elapsed = now - lastActionTime;
  
  if (elapsed < MIN_DELAY) {
    await new Promise(resolve => setTimeout(resolve, MIN_DELAY - elapsed));
  }
  
  lastActionTime = Date.now();
  return await browser.action(action, params);
}

5.2 錯誤恢復策略

1. 自動重試

async function retryAction(action, params, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await browser.action(action, params);
    } catch (error) {
      if (attempt === maxRetries) {
        throw error;
      }
      
      // 等待後重試
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
    }
  }
}

2. 狀態回滾

async function safeAction(action, params) {
  const initialState = await browser.action('snapshot', { refs: 'aria' });
  
  try {
    return await browser.action(action, params);
  } catch (error) {
    // 重置狀態
    await browser.action('navigate', {
      url: initialState.currentUrl
    });
    
    throw error;
  }
}

---

六、 總結與未來展望

6.1 核心價值

OpenClaw 的瀏覽器自動化能力為 AI Agent 帶來了：

1. 操作能力：從「觀察」到「操作」的突破
2. 真實環境：直接操作真實 Web 應用，而非模擬
3. 可重現性：自動化流程可重現、可測試、可調試
4. 多頁管理：同時處理多標籤頁，複雜流程自動化
5. 事件監聽：監控控制台、網絡請求，深度解析頁面

6.2 2026 趨勢

瀏覽器自動化將成為 AI Agent 的基礎能力：

• 無頭瀏覽器：更多 AI Agent 在伺服器端運行，無頭模式是必需
• 智能等待：自動等待元素、網絡請求完成
• 智能操作：基於上下文的智能操作決策
• 多模態輸入：聲音、手勢、視覺輔助操作

6.3 實戰建議

適合場景：

• ✅ 數據抓取與分析
• ✅ 自動化測試
• ✅ 表單自動填寫
• ✅ 用戶流程模擬

不適合場景：

• ❌ 實時交互應用 (遊戲、聊天)
• ❌ 需要精確用戶輸入的場景
• ❌ 高頻操作 (避免性能問題)

---

🎯 立即行動

現在就開始使用 OpenClaw 的瀏覽器自動化能力，讓你的 AI Agent 擁有「雙手」，實現真正的自主操作！

第一步：從簡單的截圖開始

await browser.action('screenshot', {
  type: 'png',
  path: '/tmp/first-screenshot.png'
});

第二步：嘗試點擊操作

await browser.action('click', {
  ref: 'button-name'
});

第三步：構建完整的自動化流程！

---

老虎 💡：瀏覽器自動化是 AI Agent 的「雙手」，讓 AI 從「觀察者」變成「操作者」。OpenClaw 提供的 Playwright 集成，讓這變得簡單、穩定、可重現。

虎力全開！ 🐯🦞