Playwright 浏览器自动化

这一章的标题毫无夸张。我已经用 Playwright MCP 实践了很长时间，使用场景越来越丰富，经常被自己干的活"卧槽"到。

想一想你每天在电脑上的工作时间里，有多少是在使用浏览器？查资料、填表单、发帖子、回消息、做调研……网上冲浪占据了大部分工作时间。如果 AI 能帮你操控浏览器，那它就能帮你做 90% 的任务。这不是未来，这是现在就能实现的事情。

什么是 Playwright

Playwright 是微软开发的一个浏览器自动化库。程序员用它来写自动化测试脚本，让代码自动打开浏览器、点击按钮、填写表单、验证结果。这个工具本身已经很强大了，但它需要你会写代码。

把 Playwright 做成 MCP Server 之后，事情就变得有意思了。你不再需要写代码，只需要用自然语言告诉 AI 你想做什么，AI 会自动调用 Playwright 帮你完成。

"帮我打开小红书，看看今天热门的前三个帖子是什么。"

"帮我去 Product Hunt，把今天排名前五的产品截图保存下来。"

"帮我填写这个在线表单，信息在 info.md 文件里。"

你说的是人话，AI 执行的是代码级别的精确操作。这就是 Playwright MCP 的魔力。

它是怎么工作的

当你让 AI 使用 Playwright 的时候，AI 会启动一个独立的 Chromium 浏览器。这个浏览器是 Playwright 自己下载的，跟你系统里的 Chrome 是分开的，所以不会影响你正常使用电脑。

然后 AI 就可以控制这个浏览器做各种操作。它可以导航到任意网址，可以读取页面上的内容，可以找到输入框并填写文字，可以点击按钮，可以截图保存，可以等待页面加载完成再继续下一步。

整个过程你是可以看到的。浏览器窗口会弹出来，你能看到 AI 在做什么——光标移动到哪个元素，在哪个输入框打字，点了哪个按钮。这种可视化让你对 AI 的行为有完全的掌控感，不会担心它在背后乱来。

如果你不想看，也可以让它用 headless 模式在后台运行。但我建议刚开始用的时候保持可见，看看 AI 到底是怎么操作的，对理解它的能力和局限很有帮助。

配置 Playwright MCP

配置非常简单。如果你用的是 Windsurf，在设置里有一个 MCP Market，找到 Playwright 点一下安装就完成了，对新手非常友好。

如果你用的是 Cursor 或者其他支持 MCP 的工具，需要手动配置。找到 MCP 配置文件，添加这段内容：

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

保存之后重启你的编辑器，Playwright MCP 就可用了。

配置完成后，你可以先做一个简单的测试。在对话里输入"用 Playwright 打开 google.com"，看看会发生什么。如果一切正常，你会看到一个浏览器窗口弹出来，自动导航到 Google 首页。

准备好你的工作环境

使用 Playwright MCP 之前，我建议你做一些准备工作，这样效率会高很多。

首先，新建一个项目文件夹。把你这次任务需要的所有资料都放进去：文档用 .md 格式，图片放到 images 文件夹，命名要清晰。AI 会读取这个文件夹里的内容作为上下文，所以资料越齐全、组织得越好，AI 的理解就越准确。

其次，用 AI 编程工具打开这个文件夹。不管是 Cursor、Windsurf 还是 Claude Desktop，打开文件夹之后 AI 就能"看到"里面的文件。

最后，有一个小技巧：提前在 Chromium 浏览器里登录好你的谷歌账号。现在很多国外网站都支持谷歌登录，如果你已经登录了，AI 在需要登录的时候可以直接点"用 Google 登录"，省去了填账号密码的麻烦。不过如果是敏感账号，建议用一个专门的测试账号，以防万一。

通用的提示词模板

经过大量实践，我总结出一个非常好用的提示词模板。你可以根据自己的需求修改：

目标：我要去 [网站名称] 做 [具体任务]

背景：项目文件夹里有 xxx.md 和 xxx.png，
请根据这些文档准备相关内容。

方法：使用 Playwright MCP 控制浏览器

注意事项：
如果需要登录，请使用谷歌登录。
如果需要上传图片，使用 images 文件夹里的图片。
如果遇到支付页面，停下来通知我。
完成后截图保存结果。

这个模板的核心思路是：明确告诉 AI 要做什么、用什么资料、遇到特殊情况怎么处理。AI 不是神，它需要足够的上下文才能做好事情。

实际使用场景

说了这么多，来看看具体能用来干什么。

帮你发帖

你在运营一个产品，需要在多个平台发布内容。手动操作的话，登录论坛、找到发帖入口、填写标题、粘贴内容、上传图片、点发布——每个平台重复一遍，非常无聊。有了 Playwright MCP，你可以让 AI 自动完成这些步骤。把帖子内容写在 .md 文件里，把要上传的图片放在文件夹里，让 AI 去发布。

"帮我去 V2EX 发一个帖子，内容在 post.md 里，标题是《我做了一个 xxx 工具》，发到"分享创造"节点。"

帮你填表单

你要申请一个服务，需要填一个很长的在线表单。姓名、邮箱、公司名、地址……一个个填很烦。如果你把这些信息整理在一个文件里，AI 可以帮你自动填写。

"帮我填写这个注册表单，信息在 profile.md 里。邮箱用 [email protected]，公司名用 MyStartup。"

帮你做调研

你想了解竞品的情况。传统做法是手动打开每个网站，一个个截图，一个个记录信息。有了 Playwright MCP，你可以让 AI 批量完成。

"帮我依次访问这五个网站的定价页面：xxx.com、yyy.com、zzz.com，把每个页面截图保存，然后整理一份定价对比表格。"

帮你爬数据

有些网站用脚本爬不到数据，因为它需要渲染 JavaScript，或者有反爬虫机制。但用 Playwright 控制真实浏览器就不一样了，它就像一个真人在操作，大部分反爬措施对它无效。

"帮我去这个网站，把所有产品的名称和价格抓下来，整理成 CSV 格式保存。"

帮你做测试

你刚写完一个功能，想快速验证一下。让 AI 帮你做几个测试用例。

"帮我测试一下这个登录功能。先用正确的账号密码登录，看看是否跳转到首页。然后用错误的密码试一下，看看是否有错误提示。最后试试空密码，看看表单验证是否生效。"

需要注意的事情

Playwright MCP 很强大，但也有一些局限性，你需要了解。

首先，它只能控制浏览器，不能控制其他客户端软件。比如你想让 AI 帮你操作微信客户端，那是做不到的。只有能在浏览器里打开的东西，AI 才能操作。

其次，有些网站有防机器人机制，可能会检测到 Playwright 的特征然后拦截。虽然大部分网站没问题，但偶尔会遇到需要验证码或者直接被 ban 的情况。

第三，有时候 AI 在关闭浏览器的时候会不小心把你正在用的 Chrome 也关掉。这是因为它找错了进程。虽然不常见，但发生过几次让我很崩溃。建议重要工作不要只靠浏览器，随时保存。

第四，刚开始用的时候可能会觉得效率不如自己手动操作。这是正常的，因为你还在学习怎么跟 AI 沟通。但 Playwright 最大的优势是它可以在后台运行，不需要你盯着。你可以让 AI 帮你处理一个耗时的任务，自己去做别的事情。

最后，这个方法会消耗比较多的 token。每次浏览器操作都需要 AI 读取页面内容、决定下一步动作，来回多次。如果你的任务很复杂，token 消耗会比较可观。

安全提醒

Playwright MCP 让 AI 可以控制真实的浏览器，这意味着它可能做一些你没预想到的事情。

如果你在浏览器里登录了某些支付工具，AI 是有能力替你点击支付按钮的。我不是在吓你，这是真的可能发生的事情。所以对于涉及金钱的操作，一定要让 AI 先来问你，或者干脆不要在那个浏览器里登录支付账号。

同样的道理，如果 AI 能登录你的邮箱，它也能发邮件。如果 AI 能登录你的社交账号，它也能发帖子。给 AI 的权限要谨慎，确保它不会做出你后悔的事情。

我的建议是：设置一个专门给 AI 用的浏览器 profile，登录一些不重要的测试账号。重要账号只在自己用的浏览器里登录，跟 AI 隔离开。

颠覆性的意义

用了一段时间 Playwright MCP 之后，我对"工作流自动化"有了新的理解。

以前我们说自动化，要么是写代码，要么是用那些拖拖拽拽的工作流平台。两种方式都有门槛，而且很多场景覆盖不到。比如一个网站没有提供 API，你想自动化就只能写爬虫，写爬虫还得应对各种反爬措施。

现在不一样了。有了 Playwright MCP，任何可以在浏览器里完成的事情都可以自动化，而且你只需要用人话描述任务。这大大降低了自动化的门槛。

我甚至觉得，这个方法可以替代 50% 以上的文职类工作。那些每天登录后台、填表格、复制粘贴、截图保存的重复劳动，都可以交给 AI 来做。企业可以把人力从机械劳动中解放出来，去做更有创造性的事情。

当然，这也意味着如果你的工作就是每天重复这些操作，可能需要考虑转型了。

下一章讲 AI 编程的实战技巧。工具会了，还要会用。Rules 怎么写、Git 怎么配合、任务怎么拆分，这些实战经验可以让你少走很多弯路。