![playwright-cli-image.png](https://developer.qcloudimg.com/http-save/yehe-10108561/7e9331ec54398d352c2c60c3fbe0ad81.png)

大家好，今天我们不整虚的，全是干货，全是重点，全是人话。给你一个最直白、最清晰、不绕弯子的使用自然语言让 AI 自动操作浏览器的方法，代替你完成一些重复性的工作，而且特别的省 token 的工作流。
```
哈哈，感觉使用豆包的口吻来说话，还挺有意思的。 &nbsp; &nbsp; 
# https://github.com/microsoft/playwright-cli/tree/main
```
**流程大概是这样子的：**
通过飞书、微信等聊天软件操作`Qclaw`等 `Agent`，通过自然语言告诉 `Agent AI `使用playwright-cli来打通操作浏览器的闭环。
```
帮我生成图片：我的要求是，从 QQ、飞书、电报等聊天软件到 AI，再到浏览器，最后到完成任务，提炼总结，最终形成 skill。下次执行同样的任务直接调用 Skill最后信息返回给 AI到聊天软件。```
![playwright-cli-image-1.png](https://developer.qcloudimg.com/http-save/yehe-10108561/cd2dd54b9c2aae391ac9ff32679b858d.png)

## 环境要求

今天我们采用的方案是 `Qclaw +playwright-cli`。当然你也可以选择其他的工具，下列应用（任选其一）：

1、Code Agent类工具（Claude Code/Codex/OpenCode等）
2、龙虾类应用（OpenClaw/Qclaw/WorkBuddy/阶跃 AI 等）
3、Vscode +Cline/Trae/Qwen 等 AI 插件。
![playwright-cli-image-2.png](https://developer.qcloudimg.com/http-save/yehe-10108561/cfc8aef94cb6bafd54e864e84c80f4a1.png)

## 准备工作

既可以通过飞书、QQ、微信等聊天软件发给你的Agent，也可直接再Agent里提问（我在这里使用Qclaw,免费4000万token）。

```
参考文档安装 playwright-cli：https://github.com/microsoft/playwright-cli
```
或者在命令行执行这段代码。

```
npm i -g @playwright/cli@latest
```
![playwright-cli-image-3.png](https://developer.qcloudimg.com/http-save/yehe-10108561/7c06508d2ed75aa0033ccb37b2cf7cc3.png)
```
参考文档安装 skills，https://github.com/microsoft/playwright-cli/tree/main/skills/playwright-cli
```
![playwright-cli-image-4.png](https://developer.qcloudimg.com/http-save/yehe-10108561/ac57b8557447550854a36aae6ae02da9.png)
**或者**
```
## 更快速的方法，直接导入即可。
https://github.com/microsoft/playwright-cli/tree/main/skills/playwright-cli
​
#或者在命令端输入下面这个命令。
playwright-cli install --skills
```
![playwright-cli-image-5.png](https://developer.qcloudimg.com/http-save/yehe-10108561/e64562228b5edfe9c5ba1de234fe65b5.png)
![playwright-cli-image-6.png](https://developer.qcloudimg.com/http-save/yehe-10108561/e3031f0ccefc762e43f955d4dcfe207a.png)
## 简单介绍

有些同学可能会问，什么是 `Playwright CLI`，这里做一个简单的介绍。
它是为了 Claude Code 和 GitHub Copilot 这样的编码代理的高效浏览器自动化而诞生的一种技术。基于技能的工作流程，无需大量上下文开销。
最大的特点是：节省token，不会强制将页面数据输入到大型语言模型中。
![playwright-cli-image-7.png](https://developer.qcloudimg.com/http-save/yehe-10108561/cf46b4e6427d48d0cf23b6d77020e4a6.png)
说白了，就是MCP存在消耗量过大寻找的新方法，一定时期发展的历史产物。skills搞不好也很快会被淘汰，因为这玩意貌似缺陷也不少。
自我修复测试或长期运行的自主工作流（在这些场景中，保持连续的浏览器上下文比令牌成本问题更重要），MCP 仍然具有相关性。
![playwright-cli-image-8.png](https://developer.qcloudimg.com/http-save/yehe-10108561/194b41f22b793ca2ee1993397645d05a.png)
## 牛刀小试

```
Test the “add todo” flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.
```
![playwright-cli-image-9.png](https://developer.qcloudimg.com/http-save/yehe-10108561/7b408332a119008ef9dc87cd6251a950.png)
经过实地打开，确实截了一张图，测试成功。
## 注意事项

Playwright CLI 默认是无头模式。
```
使用 Playwright cli 打开浏览器找到 B 站 up 主：技术爬爬虾。
```

如果您想查看有头的浏览器打开方式，需要指定： 
```
采用有头模式，使用 Playwright cli 打开浏览器找到 B 站 up 主：技术爬爬虾，播放最新一期视频。
```
## 手工自动化测试，需要这样做，现在我们借助AI就不需要这样做了，是不是方便很多啊。
playwright-cli open https://playwright.dev --headed
我们可以看到Qclaw 给我打开了浏览器，并播放了视频，测试完毕。
![playwright-cli-image-12.png](https://developer.qcloudimg.com/http-save/yehe-10108561/270ddd11280711f40fb6d60eb9eb749f.png)
![playwright-cli-image-10.png](https://developer.qcloudimg.com/http-save/yehe-10108561/190fb2e0fcef6ece18c4516c362dff42.png)
## 会话保持

默认情况下，Playwright CLI 会在内存中保留浏览器配置文件。在会话期间，CLI 调用之间您的 Cookie 和存储状态会得以保留，但浏览器关闭时会丢失。
使用`--persistent`可以将配置文件保存到磁盘，以便在浏览器重新启动后仍能保持。
叽里呱啦的说的啥啊，也就是说每次打开没有登录不太好，那有什么办法吗，依旧把问题抛给AI。
```
我现在已经登录了这个网站，我希望下次再打开B站的时候，使用Playwright cli 浏览B站的时候还是登录状态。
使用`--persistent`可以将配置文件保存到磁盘，以便在浏览器重新启动后仍能保持。
```

![playwright-cli-image-11.png](https://developer.qcloudimg.com/http-save/yehe-10108561/fcb33c3ad3652cb5a089634cdd68d3b9.png)
![playwright-cli-image-17.png](https://developer.qcloudimg.com/http-save/yehe-10108561/11bdbc57cda0d4f02e3614be1fe419cb.png)
## 监控功能

使用  `playwright-cli show`  可以打开一个可视化仪表板，让您查看并控制所有正在运行的浏览器会话。当您的编码代理在后台运行浏览器自动化操作，而您想要观察其进度或介入帮助时，这会很有用。
```
playwright-cli show

# 或者和 AI 说：
。
使用  playwright-cli show  可以打开一个可视化仪表板。
```
![playwright-cli-image-18.png](https://developer.qcloudimg.com/http-save/yehe-10108561/704eff5e737e60fb4a56d0708e4efecb.png)
仪表板会打开一个包含两个视图的窗口：
- 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 键可释放。

From the grid you can also close running sessions or delete data for inactive ones.您还可以从网格中关闭正在运行的会话或删除不活跃会话的数据。
## 特定的任务

Skills常见任务参考：
- 运行和调试 Playwright 测试 —— 运行、调试和管理 Playwright 测试套件
- 请求模拟（mock）——拦截并模拟网络请求
- 运行 Playwright 代码——执行任意的 Playwright 脚本
- 浏览器会话管理——管理多个浏览器会话
- 存储状态（Cookie、localStorage）——保存和恢复浏览器状态
- Test generation 测试生成 —— 从交互中生成 Playwright 测试案例
- Tracing 跟踪 —— 记录并检查执行轨迹
- Video recording 视频录制 —— 捕获浏览器会话视频
- 检查元素属性——获取元素的 ID、类或快照中不可见的任何属性

## 更多案例
![playwright-cli-image-15.png](https://developer.qcloudimg.com/http-save/yehe-10108561/ef3ea35dc211f33cf56bd313773c6c0f.png)




大家好，今天我们不整虚的，全是干货，全是重点，全是人话。给你一个最直白、最清晰、不绕弯子的使用自然语言让 AI 自动操作浏览器的方法，代替你完成一些重复性的工作，而且特别的省 token 的工作流。

玩转 Qclaw 智能体：在微信/飞书发句话，AI帮你搞定浏览器自动化

使用自然语言让 AI 自动操作浏览器的方法，代替你完成一些重复性的工作，而且特别的省 token 的工作流。通过飞书、微信等聊天软件操作`Qclaw`等 `Agent`，通过自然语言告诉 `Agent AI `使用playwright-cli来打通操作浏览器的闭环。

人工智能

前端

开发工具

学习如何用AI自动化操作浏览器，通过自然语言指令完成重复性任务。使用Playwright CLI和Qclaw等工具，轻松实现从聊天软件到浏览器的闭环操作，节省token并提升效率。支持会话保持、监控功能及常见任务自动化。

Agent

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

玩转 Qclaw 智能体：在微信/飞书发句话，AI帮你搞定浏览器自动化-腾讯云开发者社区-腾讯云

玩转 Qclaw 智能体：在微信/飞书发句话，AI帮你搞定浏览器自动化

玩转 Qclaw 智能体：在微信/飞书发句话，AI帮你搞定浏览器自动化

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐