🔥 效率翻倍！用Trae + Playwright MCP 实现全自动编程&调试！

我有一颗小慧星
3,001 阅读3分钟

前言

前两天Trae 的重磅更新让我眼前一亮：

  • 智能体 + 模型上下文协议（MCP）  双加持
  • 终于能告别蹩脚的英语和翻译器了
  • 能从Cursor的手里夺回自己的奶茶了

今天重点安利 Playwright MCP 的杀手级功能——
✨ 如何用 Trae 自动调试代码，效率翻倍✨

配置系统环境

为确保正常使用 MCP，你需要安装以下依赖：

  • Docker（非必须）
  • npx：依赖于 Node.js，版本需大于等于 18（Playwright MCP 必须）。
  • uvx：基于 Python 的快速执行工具，需手动安装（非必须）。

Trae已经给出了对应的环境配置参考文档，这里不再介绍。

如何选择 MCP

MCP 与 Puppeteer 和 Playwright 等强大的浏览器自动化工具相结合，为更智能和自主的 AI 代理铺平了道路，这些代理能够在互联网上执行复杂的任务，为自动化、数据分析和用户辅助开辟了新的可能性。 对于他们两或者更多类似的工具，大家需要根据实际的情况进行选择（参考文档）。

添加 Playwright MCP

方式一：手动添加

  1. 在 AI 对话窗口的右上角，点击 设置 图标 > MCP。

界面上显示 MCP 窗口。

  1. 点击 + 添加 按钮。

你已进入 MCP Server 市场。

  1. 点击 手动配置。

复制并在弹窗粘贴下方配置

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

image.png

方式二：从市场添加

这里只补充容易踩坑的点，具体方式自行查看文档

  • MCP Server 市场分两种，一种普通，一种带轻松配置

image.png

  • 带轻松配置的点右边的+号即可直接添加
  • 不带的则还是需要走方式一：手动添加
    • 点击加号会出来弹窗
    • 点击介绍页面会打开对应的github页面，找到对应的配置
    • 手动添加

注：Builder with MCP 是 Trae IDE 的内置智能体，所有已配置的 MCP Server 都将被自动添加至该智能体，且不可编辑。

上手体验

  • 输入“@”选择Builder with MCP
  • 输入“打开百度搜索mcp”，回车

1745474582008-20250424_140000-min.gif

开发体验

添加项目规则

  1. 在 AI 对话窗口的右上角，点击 设置 图标 > 规则。

界面上显示 规则 窗口。

  1. 规则也分两种，个人全局和按项目，具体差异自行查看。
  2. 点击 + 创建 按钮创建项目规则，复制并粘贴下方提示词。
假设服务已运行。进行代码更改后，使用playwright MCP提供的工具对变更进行详细测试。
第一步：打开http://localhost:5173/。
第二步：自动对改动进行相应的测试，包括不仅限于点击、输入等等。
第三步：向我汇报验证验证结果是否正确。

Demo

  • 输入你的需求，回车等待

1745473490192-20250424_120000-min.gif

总结

Trae vs Cursor：免费 vs 省心，你选哪个？

实测对比：

  • Cursor 确实更“懂人话”——提示词随便写写就能跑
  • Trae 目前需要“小作文级”指令，行为偶尔抽风
  • 自动测试时：要么出现幻觉说自己已经做了某事，要么甩锅让你手动跑

但！免费就是最贵的诱惑 🥤 （每个月省下的订阅费够喝好多杯奶茶了）

习惯用VSCode的可以结合这篇文章# 告别手动敲代码！IDE + Browser MCP + AI Agent 自动化开发实战，将Browser MCP换成Playwright MCP

avatar
文章
阅读
粉丝