playwright-cli 完全指南让 AI 代理自动操作浏览器录屏、截图与测试网页【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cli想让网页自动完成登录、给页面截图、让 AI 代理替你验证表单流程写完整的 Playwright 脚本有些繁琐。playwright-cli 把这些操作拆成一条一条的终端命令打开页面、填写表单、点击按钮、截图敲命令即可。5分钟装好 playwright-cli让 AI 代理替你操作浏览器它是面向常用 Playwright 操作的命令行工具录制、生成代码、检查选择器、页面截图各对应一条命令。相比 MCPCLI 调用更省 token代理不需要加载庞大的工具模式简短的命令就够了。给 AI 代理装 SKILL需要 Node.js 18 及以上两条命令完成npm install -g playwright/clilatest playwright-cli install --skills第二条把仓库自带的 SKILL 装进 Claude Code、GitHub Copilot 等编码代理。之后用自然语言下指令即可比如用 playwright-cli 测试 todomvc 演示站的添加待办流程成功和失败都截图代理会自行拆解成具体命令逐条执行。手动跑命令清单就在 --help 里不依赖代理也可以代理本身就是从playwright-cli --help里读命令的你同样可以playwright-cli open https://demo.playwright.dev/todomvc/ --headed playwright-cli type Buy groceries playwright-cli press Enter playwright-cli type Water flowers playwright-cli press Enter playwright-cli screenshot 注意npm 包名是playwright/cli。如果全局命令不可用装过 Playwright 的项目里可用npx playwright cli代替无需全局安装。不写选择器操作页面用 snapshot 和 ref 完成真实任务playwright-cli 的核心设计是先看再做每条命令的返回都附带当前页面的快照快照中的元素带有 e3、e15 这样的短 ref。playwright-cli snapshot playwright-cli fill e5 userexample.com --submit playwright-cli click e3click e3就是点击快照里找到的第 3 个可交互元素不用背 CSS 选择器。页面结构变化导致 ref 失效时重新snapshot拿一份新 ref 即可相当于一个随时可以刷新的选择器。习惯写选择器的话也可以直接传 CSS 或 Playwright 定位器例如click getByRole(button, { name: Submit })。页面很长时snapshot --depth4可以限制快照深度、减少输出量find Add to cart按文本定位元素每个命中附带几行上下文用起来像 grep还支持正则。用 -s 命名会话并行跑多个浏览器测试时经常需要一个已登录、一个未登录并存或者每个项目各跑一个浏览器。用-s参数隔离会话各会话的 cookies、localStorage、标签页与浏览历史完全独立playwright-cli -sauth open https://app.example.com/login playwright-cli -spublic open https://example.com playwright-cli list playwright-cli kill-all⚠️ 常见坑默认 profile 只存在内存里浏览器一关登录状态就没了。open时加--persistent把 profile 落盘重启后状态仍在需要跨会话复用时用state-save导出存储状态、state-load加载完整说明见仓库 skills/playwright-cli/references/storage-state.md。截图、视频录制与 PDF让操作过程留痕结果留痕是内置能力流程中任意时刻都可调用playwright-cli screenshot --filenamestep1.png playwright-cli pdf --filenamepage.pdf playwright-cli video-start recording.webm playwright-cli video-chapter Submit form playwright-cli video-stop配合tracing-start/tracing-stop还能产出 trace 文件失败时在 trace viewer 里逐步回放定位问题点细节见仓库 skills/playwright-cli/references/tracing.md。用 show 面板观察并接管 playwright-cli 的执行代理在后台跑浏览器自动化时最稳妥的做法不是猜而是直接看playwright-cli show面板以网格展示各会话的实时画面、当前 URL 和页面标题。点任意会话放大点进视口即可接管鼠标键盘按 Esc 把控制权还给代理。做设计评审时show --annotate额外提供标注模式可以指着画面对页面提反馈。调试三件套console、requests 与 route命令没达到预期时三个入口各有分工console查看控制台消息requests列出页面加载以来的全部网络请求route对接口请求做 mock 响应。常用的 DevTools 能力都映射成了 CLI 命令。下一步从让代理跑完一轮网页操作到手动调试每一步playwright-cli 两条路都覆盖。挑一个你实际要测的页面按本文命令把 todomvc 演示跑一遍下次需要自动化时先让代理开跑试试。完整命令与配置项见仓库 README.md。【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考