[research@ai4se] : ~ $ ▌
cd ../
[tools] | | 7 min

# 浏览器自动化 + MCP：Agent 如何"看见"前端

Playwright + MCP Server 让 Coding Agent 能够真正"看到"和"操作"浏览器——这是 AI4SE 工具链中最被低估的能力。

[mcp-protocol][tools]

为什么 Agent 需要浏览器

  • 视觉验证：Agent 生成 UI 后自己”看到”效果
  • E2E 测试：Agent 像用户一样操作自己的产出
  • 调试：Agent 在浏览器中复现和修复 bug

技术栈

Coding Agent → MCP Client → Playwright MCP Server → Chromium

实践

  1. npx @anthropic-ai/mcp-server-puppeteer — 最简单的起步
  2. 给 Agent 权限：允许截图、点击、填表
  3. 让 Agent 先跑测试再提交

注意

  • 浏览器自动化容易被滥用——限制在测试环境
  • Agent 的浏览器操作应该像用户，而非爬虫
  • 结合 Review Pipeline：Agent 跑测试截图，人看截图做最终判断