GitHub 上贼牛逼浏览器自动化 MCP,已有 2 万人点赞。

最近逛逛发的好多文章,都提到了这个叫 playwright-mcp 的开源 MCP。才发现,我好像没有专门写过文章介绍一下这个开源项目。今天安排上。 playwright-mcp 是微软开源的浏览器自动化神器。目前已经在 GitHub 上获得 2 万多的 Star 了

它可以让 AI 大模型像人类一样直接操作浏览器,而无需依赖视觉模型或截图

这玩意儿不仅仅是一个工具,更是 AI 与真实世界交互的桥梁。

最近谷歌也推出了一个叫做 Chrome DevTools MCP, 也是让 AI 控制浏览器,改天研究一下和 playwright 比哪个好。

01、看看效果

先看一下接入了 playwright MCP 的时际效果,我在 Claude Code 里面输入:打开微博,搜索找到博主:罗永浩的十字路口,在他第一篇帖子评论区评论:"罗老师,我想念锤子了。

你看看,你看看,他真的自己操作浏览器,打开微博、搜索罗永浩,屁颠屁颠的去评论了。

而且我给的指令是比较口语化的,并没有给很明确详细的路径指引。

它都能一把过,太绝了。

02、如何安装

你可以在 Claude Code、CodeX 或者其它 MCP 客户端里面直接使用,下面是安装配置命令:

其实有一个更简单安装、配置方法,比如是使用 Claude Code,你直接说:帮我安装并配置 playwright MCP 就行,它会自己帮你下载、安装、配置。

你只需要输入 /mcp 命令看看他有没有装好就行了。

03、啥原理?

经常看逛逛的读者应该清楚,早期让 AI 操作浏览器的方法是:

这个方案最大的问题是耗资源、速度慢、不精确、调用视觉 API 昂贵。

但这个项目是直接通过结构化 Accessibility Tree 让 AI 看懂网页的,速度更快、精度更高。

最重要的是搞清楚 Playwright 和 Accessibility Tree 是啥,你就明白这里面的原理了。

① 首先解释什么是 Playwright? 其实是微软开发的一个强大的浏览器自动化库,支持 Chromium、Firefox和 WebKit(Safari)三大引擎。它比传统的 Selenium 等工具更现代、更强大、更可靠,也就是下面这个接近 8 万人 Star 的项目。

arduino 复制代码
开源地址:https://github.com/microsoft/playwright

通过这玩意可以启动、关闭浏览器实例,管理多个标签页,设置视口大小、模拟设备等。拦截和记录网络请求、管理 Cookie、处理 JavaScript 对话框、执行自定义 JS 脚本 等。同时还提供了极其丰富的 API 来模拟一切用户行为:点击、输入、拖拽、按键、导航等。Playwright MCP 就是将这些 API 封装成了 AI 可以调用的工具。

② 什么是 Accessibility Tree?

这个玩意儿是开源项目的灵魂,也是最巧妙的部分,解决了 AI 如何看见并理解网页的问题。

Accessibility Tree 是浏览器在渲染网页时,根据 DOM 树生成的一种专门用于辅助技术(如屏幕阅读器、盲文显示器等)理解和导航页面内容的中间表示结构

你可以把它理解为 DOM 树的一个「特殊版本」或「语义化副本」,它过滤掉了纯粹用于视觉呈现的信息,提取并补充了辅助技术所需的语义信息。

它包含了每个元素的角色(role)、名称(name)、状态(state)、值(value)以及层级关系。

例如:<button aria-label="Submit"> 会被表示为 {role: 'button', name: 'Submit'}

③ AI 如何处理的?

AI 接收到的是类似这种纯文本的结构化信息,而不是一张图片。这极大地减少了数据处理量。

AI 基于其强大的自然语言理解能力,分析这个语义结构化信息。

它会看到「这里有一个叫做 Submit 的按钮」、「那里有一个输入框」,其标签是 Username' 。

AI 会根据用户指令,如帮我把商品加入购物车决定下一步操作,点击那个 Add to Cart 的按钮。

04、总结一下

你可以把 Playwright MCP 想象成一个人类操作员和一位盲人专家组成的完美团队

Playwright 是那位操作员:他眼睛看得见,手很灵活,能精确地操作电脑浏览器,但他自己不懂业务逻辑。

Accessibility Tree 是操作员向专家汇报的文字报告:操作员不截图,而是口头汇报:"屏幕左上角有一个搜索按钮,中间有一个输入框,写着请输入关键词..."。

AI 大模型 是那位盲人专家:他虽然看不见屏幕,但理解能力极好,能根据详细的文字报告完全理解屏幕状态,并做出决策:"好,请你在那个输入框里输入 Playwright MCP,然后点击搜索按钮。"

这种基于语义而非视觉的原理,使得 Playwright MCP 实现了高效、精准、低成本且对 AI 友好的浏览器自动化,这才是它真正革命性的地方。

arduino 复制代码
开源地址:https://github.com/microsoft/playwright-mcp
相关推荐
AI分享官2 小时前
低代码平台+MonkeyCode混合开发:3天上线一个App的野路子实操
github·ai编程
OpenTiny社区3 小时前
基于华为云大模型服务MaaS和OpenTiny框架实现商城商品智能化管理
前端·agent·mcp
什么半岛铁盒4 小时前
C++项目:仿muduo库高并发服务器--------Any类的实现
linux·服务器·数据库·c++·mysql·github
带刺的坐椅6 小时前
Solon v3.4.6, v3.5.4, v3.6.0-M1 发布。正式开始 LTS 计划
java·spring·ai·web·solon·mcp
齐杰拉7 小时前
解决 chrome-devtools-mcp 在 cursor 无法生效的问题。No tools, prompts, or resources
github
绝无仅有8 小时前
MySQL 面试题及详细解答(二)
后端·面试·github
MicrosoftReactor9 小时前
技术速递|如何使用 Playwright MCP 和 GitHub Copilot 调试 Web 应用
github·copilot·测试·playwright·mcp
杨杨杨大侠10 小时前
手把手教你写 httpclient 框架(九)- 企业级应用实战
java·http·github
uhakadotcom10 小时前
分享近期学到的postgresql的几个实用的新特性!
后端·面试·github