实战：使用 playwright-mcp 自动化发布 CSDN 文章

w329636271

168人浏览 · 2026-06-13 10:32:19

w329636271 · 2026-06-13 10:32:19 发布

在 OpenCode（或其他支持 MCP 的终端/IDE工具，如 Cursor、Cline 等）中使用 `playwright-mcp`，核心逻辑与 Claude Desktop 一致，但配置文件的位置和交互方式有所不同。
OpenCode 通常在终端或编辑器的面板中与 AI 对话，AI 会通过工具调用弹窗请求你的批准来控制浏览器。
以下是针对 OpenCode 环境的实战修改版：

第一步：在 OpenCode 中配置 MCP Server

OpenCode 通常读取项目根目录或全局配置下的 MCP 设置文件。

找到 OpenCode 的 MCP 配置文件（通常是项目根目录下的 .opencode/mcp.json，或在 OpenCode 的设置界面中找到 MCP/Tools 配置项）。
添加 playwright-mcp 配置。强烈建议保留 --user-data-dir 以保持登录态：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--user-data-dir",
        "./.browser-data/csdn-profile"
      ]
    }
  }
}

提示：这里使用了相对路径 `./.browser-data/csdn-profile`，这样登录态会保存在当前项目目录下，方便管理。
3. 重启 OpenCode 或重新加载窗口，确保 MCP 服务启动。你可以在 OpenCode 的工具列表中看到 `playwright_navigate`、`playwright_click` 等工具可用。

第二步：首次运行 - 人工辅助登录

在 OpenCode 的对话框中，输入指令让 AI 打开浏览器。

Prompt:
请使用 playwright 工具，打开 CSDN 的登录页面 https://www.csdn.net/login。我需要在这个弹出的浏览器中手动登录我的账号，请打开页面后告诉我，并且不要做任何其他操作。
操作流程：

OpenCode 会请求执行 playwright_navigate，点击允许。
你的电脑会弹出浏览器窗口，显示 CSDN 登录页。
你手动在弹出的浏览器中完成扫码或账号密码登录。
登录成功后，在 OpenCode 中回复 AI：“我已登录完成，请关闭当前浏览器（调用 playwright_close）。”

第三步：实战发文 - 自动化发布

现在浏览器已经有了你的登录 Cookie，接下来让 AI 完成发文。由于 CSDN 编辑器是基于 Vue/React 的，直接填充 DOM 可能无效，必须在提示词中强制要求 AI 使用模拟键盘输入。
在 OpenCode 中发送以下精心设计的 Prompt：

Prompt:
请使用 playwright 自动化帮我在 CSDN 发布一篇博客。文章内容如下：
标题：《通过 OpenCode 与 Playwright MCP 体验自动化》
内容：
这是一篇测试文章。
它证明了我们可以通过终端里的 AI 助手，结合 MCP 协议直接控制浏览器完成复杂的表单提交。

请严格按照以下步骤执行，并在每一步调用工具前等待我的确认：

导航到 CSDN 文章编辑器页面：https://mp.csdn.net/mp_blog/creation/editor
等待 3 秒确保页面加载完成，如果出现任何弹窗（如广告、提示），请点击关闭按钮。
找到标题输入框（通常是 input 或 textarea），点击它使其获取焦点，然后模拟键盘输入标题：《通过 OpenCode 与 Playwright MCP 体验自动化》
找到正文编辑区（Markdown 编辑器的 textarea），点击它获取焦点，然后模拟键盘输入上面的正文内容。
点击页面右上角的“发布文章”按钮。
在弹出的发布设置窗口中，直接点击底部的“发布”按钮。
截图确认发布结果。

第四步：逐步确认与避坑

在 OpenCode 中执行时，AI 每次调用 Playwright 工具，左侧或下方都会弹出工具执行确认框。

观察参数：在点击允许前，看一眼 AI 准备执行的参数。如果是 playwright_type，说明它在模拟键盘，这是对的；如果是 playwright_fill，可能会失败，你可以拒绝并提示它换用 type。
处理弹窗阻断：CSDN 编辑器经常有“绑定微信号”等阻断式弹窗。如果 AI 卡住了，你可以手动在弹出的浏览器里关掉弹窗，然后告诉 AI：“弹窗已手动关闭，请继续第4步。”
输入法冲突：当 AI 模拟键盘输入时，请把你本地电脑的输入法切换到英文状态，否则中文输入法可能会拦截并篡改模拟键盘敲击的内容。