别人还在学 MCP 概念，我已经用它自动开店了：Claude Code + Playwright 实战

神经蛙5370
10 阅读4分钟

本文参与话题：MCP 怎么玩

网上 MCP 教程一大堆，90% 都在讲概念、画架构图。我决定写点不一样的：我真的用 Claude Code + Playwright MCP 完成了一整套业务自动化——自动登录平台、填写表单、上架产品、发布内容。不是 demo，是跑通了的真实流程。

背景：我想自动化什么？

作为一个独立开发者，我需要在多个平台运营：发文章、上架产品、管理店铺。每个平台的后台操作都是重复劳动：点击、填表、上传、发布。

我的目标：让 AI 自动帮我完成这些浏览器操作。

方案：Claude Code + Playwright MCP

核心组合：

  • Claude Code：Anthropic 官方 CLI 工具，能调用 MCP 工具
  • Playwright MCP Server：让 Claude 能操控浏览器（导航、点击、填表、截图）
# 安装 Claude Code
npm install -g @anthropic-ai/claude-code

# Playwright MCP 配置（.mcp.json）
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic/mcp-playwright"]
    }
  }
}

配置好之后，Claude 就多了一组浏览器操作工具。

实战1：自动填写表单

第一个场景：在一个创作平台上架产品，需要填标题、描述、标签、价格。手动操作大概需要 10 分钟。

Claude 通过 MCP 做了什么：

1. browser_navigate → 打开产品创建页面
2. browser_snapshot → 获取页面结构（可访问性树）
3. browser_click → 点击标题输入框
4. browser_type → 输入产品标题
5. browser_click → 选择分类下拉
6. browser_select_option → 选择具体分类
7. browser_click → 点击发布按钮

关键点：Claude 通过 browser_snapshot() 拿到的不是截图，而是页面的可访问性树（accessibility tree）。它能「看懂」每个按钮、输入框、下拉菜单的语义，然后决定操作哪个元素。

实战2：处理自定义 UI 组件

真实网站不全是标准 HTML 元素。我遇到了一个自定义下拉菜单——不是原生 <select>，而是 React 组件渲染的侧边栏。

标准方案失败了。解决方式：

1. browser_snapshot → 发现不是 <select>，而是自定义组件
2. browser_click(ref="e230") → 点击触发下拉
3. browser_snapshot → 再次获取快照，发现新出现的侧边栏
4. browser_click(ref="e801") → 点击侧边栏中的选项

AI 的优势就在这里：它能根据页面变化动态调整策略，不需要你提前写死选择器。传统自动化脚本遇到这种动态 UI 就挂了。

实战3：富文本编辑器

另一个坑：很多平台用 Quill、CodeMirror 等富文本编辑器，直接 fill() 不生效。

解决方式：

// Quill 编辑器：通过 browser_evaluate 直接操作
const editor = document.querySelector('.ql-editor');
editor.innerHTML = '<p>你的内容</p>';
document.querySelector('.ql-container').__quill.update();

// CodeMirror 编辑器：
document.querySelector('.CodeMirror').CodeMirror.setValue(content);

Claude 能通过 browser_evaluate 执行任意 JS，遇到非标准控件时，它会自主切换到 JS 注入方案。

踩过的坑

  1. 反机器人检测：操作太快会触发验证码。解决：加随机延迟，模拟人类操作节奏
  2. React 状态不同步：用 fill() 填了值但 React state 没更新。解决：用 dispatchEvent 触发 input/change 事件
  3. 遮挡层拦截点击：推广弹窗挡住了目标元素。解决：先关弹窗或用 JS 隐藏
  4. 文件上传：不能直接点上传按钮（会打开系统对话框）。解决：找到隐藏的 <input type="file"> 直接用 setInputFiles()

效果对比

操作手动Claude + MCP
在平台上架1个产品10-15分钟2分钟
发布1篇文章（含排版）5-8分钟1分钟
填写复杂多步表单15-20分钟3分钟
批量操作5个平台1小时+10分钟

什么时候该用 MCP 自动化？

适合的场景：

  • 重复性浏览器操作（上架、发布、填表）
  • 多平台同步运营
  • 数据采集和监控

不适合的场景：

  • 需要人工审美判断的操作（设计、排版）
  • 涉及支付和敏感操作（建议人工确认）
  • 反爬严格的平台（风险太高）

怎么开始？

# 1. 安装 Claude Code
npm install -g @anthropic-ai/claude-code

# 2. 创建 MCP 配置
cat > .mcp.json << 'EOF'
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic/mcp-playwright"]
    }
  }
}
EOF

# 3. 启动 Claude Code
claude

# 4. 用自然语言下达指令
# "帮我打开 xxx.com，在搜索框输入 Python，点击搜索"

就这么简单。Claude 会自动调用 Playwright 工具完成操作。

小结

MCP 的真正价值不在概念多新，而在于让 AI 从「只能说」变成「能动手」。当你把浏览器操控权交给 AI，很多以前觉得「必须手动做」的事情，都能自动化。

我现在的日常工作流：告诉 Claude 要做什么 → 它自动操作浏览器 → 我检查结果。效率提升不是一点半点。

如果你也在做多平台运营、内容发布、产品管理这类重复工作，强烈推荐试试这个组合。

独立开发者，专注 AI 应用和自动化。有 AI 自动化相关需求欢迎私信交流。

avatar
文章
阅读
粉丝