浏览器自动化 Agent：用 Playwright 实现网页交互

为什么 Agent 需要控制浏览器

很多任务必须通过网页完成：

• 填写后台管理系统
• 抓取无 API 的网站数据
• 截图生成报告
• 自动化测试 Web 应用

Playwright + Skill 架构

Agent -> Skill:browser-control -> Playwright -> 浏览器实例

基础 Skill 结构

// scripts/browser.js
const { chromium } = require('playwright');

async function screenshot(url, selector) {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle' });
  
  const element = selector 
    ? await page.$(selector)
    : await page.$('body');
  
  const buffer = await element.screenshot();
  await browser.close();
  return buffer;
}

常用操作封装

表单填写

async function fillForm(url, fields) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(url);
  
  for (const [selector, value] of Object.entries(fields)) {
    await page.fill(selector, value);
  }
  
  await page.click('button[type="submit"]');
  await browser.close();
}

数据抓取

async function scrape(url, selectors) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(url);
  
  const data = {};
  for (const [key, sel] of Object.entries(selectors)) {
    data[key] = await page.textContent(sel);
  }
  
  await browser.close();
  return data;
}

安全注意事项

• 只访问可信 URL
• 不存储敏感凭据在 Skill 代码中
• 设置超时防止卡死
• headless 模式优先