它可以让 AI 大模型像人类一样直接操作浏览器，而无需依赖视觉模型或截图。
这玩意儿不仅仅是一个工具，更是 AI 与真实世界交互的桥梁。
最近谷歌也推出了一个叫做 Chrome DevTools MCP， 也是让 AI 控制浏览器，改天研究一下和 playwrite 比哪个好。
01
看看效果
先看一下接入了 playwrite MCP 的时际效果，我在 Claude Code 里面输入：打开微博，搜索找到博主：罗永浩的十字路口，在他第一篇帖子评论区评论："罗老师，我想念锤子了。
你看看，你看看，他真的自己操作浏览器，打开微博、搜索罗永浩，屁颠屁颠的去评论了。
而且我给的指令是比较口语化的，并没有给很明确详细的路径指引。
它都能一把过，太绝了。
02
如何安装
你可以在 Claude Code、CodeX 或者其它 MCP 客户端里面直接使用，下面是安装配置命令：
其实有一个更简单安装、配置方法，比如是使用 Claude Code，你直接说：帮我安装并配置 playwright MCP 就行，它会自己帮你下载、安装、配置。
你只需要输入 /mcp 命令看看他有没有装好就行了。
03
啥原理？
经常看逛逛的读者应该清楚，早期让 AI 操作浏览器的方法是：
这个方案最大的问题是耗资源、速度慢、不精确、调用视觉 API 昂贵。
但这个项目是直接通过结构化 Accessibility Tree 让 AI 看懂网页的，速度更快、精度更高。
最重要的是搞清楚 Playwright 和 Accessibility Tree 是啥，你就明白这里面的原理了。
开源地址：https://github.com/microsoft/playwright② 什么是 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 友好的浏览器自动化，这才是它真正革命性的地方。
开源地址：https://github.com/microsoft/playwright-mcp05
点击下方卡片，关注我
这个公众号历史发布过很多有趣的开源项目，如果你懒得翻文章一个个找，你直接关注微信公众号：逛逛 GitHub ，后台对话聊天就行了：
没有评论:
发表评论