告别手动操作！在微信/飞书发句话，AI帮你搞定浏览器自动化
告别手动操作！在微信/飞书发句话，AI帮你搞定浏览器自动化
大家好，今天我们不整虚的，全是干货，全是重点，全是人话。
给你一个最直白、最清晰、不绕弯子的使用自然语言让 AI 自动操作浏览器的方法。
代替你完成一些重复性的工作，而且特别的省 token 的工作流。
哈哈，感觉使用豆包的口吻来说话，还挺有意思的。
https://github.com/microsoft/playwright-cli/tree/main
流程大概是这样子的：
通过飞书、微信等聊天软件操作Qclaw等 Agent，通过自然语言告诉 AI 使用playwright-cli来打通操作浏览器的闭环。
感谢小米 mimo flash 大模型提供技术支持
帮我生成图片：我的要求是，从 QQ、飞书、电报等聊天软件到 AI，再到浏览器，最后到完成任务，提炼总结，最终形成 skill。下次执行同样的任务直接调用 Skill最后信息返回给 AI到聊天软件。
环境要求
今天我们采用的方案是 Qclaw +playwright-cli。当然你也可以选择其他的工具，下列应用（任选其一）：
1、Code Agent类工具（Claude Code/Codex/OpenCode等）
2、龙虾类应用（OpenClaw/Qclaw/WorkBuddy/阶跃 AI 等）
3、Vscode +Cline/Trae/Qwen 等 AI 插件。
准备工作
既可以通过飞书、QQ、微信等聊天软件发给你的Agent，也可直接在Agent里提问（我在这里使用Qclaw,目前提供免费4000万token）。
参考文档安装 playwright-cli：https://github.com/microsoft/playwright-cli
或者在命令行执行这段代码。
npm i -g @playwright/cli@latest
参考文档安装 skills，https://github.com/microsoft/playwright-cli/tree/main/skills/playwright-cli
或者
更快速的方法，直接导入即可。
https://github.com/microsoft/playwright-cli/tree/main/skills/playwright-cli
或者在命令端输入下面这个命令。
playwright-cli install --skills
简单介绍
有些同学可能会问，什么是 Playwright CLI，这里做一个简单的介绍。
它是为了 Claude Code 和 GitHub Copilot 这样的编码代理的高效浏览器自动化而诞生的一种技术。
基于技能的工作流程，无需大量上下文开销。
最大的特点是：节省token，不会强制将页面数据输入到大型语言模型中。
说白了，就是MCP存在消耗量过大寻找的新方法，一定时期发展的历史产物。
skills搞不好也很快会被淘汰，因为这玩意缺陷也不少。
参考文档做一个 CLI MCP 的对比图：
命令行界面（CLI）：现代编码代理越来越倾向于使用以技能（SKILL）形式呈现的基于 CLI 的工作流，而非 MCP，因为 做一个关于 A C L I 和 M C P 的对比图，参考文档如下：CLI 调用更节省令牌：它们避免了将大型工具模式和冗长的可访问性树加载到模型上下文中，从而使代理能够通过简洁、专门构建的命令进行操作。这使得 CLI 技能更适合高吞吐量的编码代理，这些代理必须在有限的上下文窗口内平衡浏览器自动化、大型代码库、测试和推理。
MCP：对于那些能从持久状态、丰富的内省以及对页面结构进行迭代推理中获益的专门代理循环，例如探索性自动化、自我修复测试或长期运行的自主工作流（在这些场景中，保持连续的浏览器上下文比令牌成本问题更重要），MCP 仍然具有相关性。了解有关 Playwright MCP 的更多信息。
感谢小米 mimo flash 大模型提供技术支持
牛刀小试
Test the “add todo” flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.
经过实地打开查看，确实截了一张图，测试成功。
注意事项
Playwright CLI 默认是无头模式。
使用 Playwright cli 打开浏览器找到 B 站 up 主：技术爬爬虾。
如果您想查看有头的浏览器打开方式，需要指定：
采用有头模式，使用 Playwright cli 打开浏览器找到 B 站 up 主：技术爬爬虾，播放最新一期视频。
手工自动化测试，需要这样做，现在我们借助AI就不需要这样做了，是不是方便很多啊。
playwright-cli open https://playwright.dev --headed
我们可以看到Qclaw 给我打开了浏览器，并播放了视频，测试完毕。
会话保持
默认情况下，Playwright CLI 会在内存中保留浏览器配置文件。在会话期间，CLI 调用之间您的 Cookie 和存储状态会得以保留，但浏览器关闭时会丢失。
使用--persistent可以将配置文件保存到磁盘，以便在浏览器重新启动后仍能保持。
叽里呱啦的说的啥啊，也就是说每次打开没有登录不太好，那有什么办法吗，依旧把问题抛给AI。
我现在已经登录了这个网站，我希望下次再打开B站的时候，使用Playwright cli 浏览B站的时候还是登录状态。
使用--persistent可以将配置文件保存到磁盘，以便在浏览器重新启动后仍能保持。
监控功能
使用 playwright-cli show 可以打开一个可视化仪表板，让您查看并控制所有正在运行的浏览器会话。当您的编码代理在后台运行浏览器自动化操作，而您想要观察其进度或介入帮助时，这会很有用。
playwright-cli show
或者和 AI 说：
使用 playwright-cli show 可以打开一个可视化仪表板。
仪表板会打开一个包含两个视图的窗口：
- • Session grid — shows all active sessions grouped by workspace, each with a live screencast preview, session name, current URL, and page title. Click any session to zoom in.
- 会话网格 显示按工作区分组的所有活动会话，每个会话都有实时屏幕预览、会话名称、当前网址和页面标题。点击任何会话可放大查看。
- • Session detail — shows a live view of the selected session with a tab bar, navigation controls (back, forward, reload, address bar), and full remote control. Click into the viewport to take over mouse and keyboard input; press Escape to release.
- 会话详情 显示所选会话的实时视图，带有标签栏、导航控件（后退、前进、刷新、地址栏）以及完整的远程控制。点击视口可接管鼠标和键盘输入；按 Esc 键可释放。
您还可以从网格监控中关闭正在运行的会话或删除不活跃会话的数据。
常见任务参考
Skills常见任务参考：
- • 运行和调试 Playwright 测试 —— 运行、调试和管理 Playwright 测试套件
- • 请求模拟（mock）——拦截并模拟网络请求
- • 运行 Playwright 代码——执行任意的 Playwright 脚本
- • 浏览器会话管理——管理多个浏览器会话
- • 存储状态（Cookie、localStorage）——保存和恢复浏览器状态
- • Test generation 测试生成 —— 从交互中生成 Playwright 测试案例
- • Tracing 跟踪 —— 记录并检查执行轨迹
- • Video recording 视频录制 —— 捕获浏览器会话视频
- • 检查元素属性——获取元素的 ID、类或快照中不可见的任何属性
案例参考
其他常见案例（快速参考）
网页监控/截图机器人：定时 open → snapshot → screenshot → 发到 Slack/邮件。
多标签页爬取：playwright-cli new-tab + goto 多个 URL。
会话持久化：--persistent 保持登录状态，下次直接用同一 session。
批量测试生成：让 AI 代理先用 CLI 探索页面，再输出完整的 *.spec.ts 文件。
更多案例交流：微信群。
参考资料
https://github.com/microsoft/playwright-cli