Playwright CLI 快速上手指南录制操作、生成测试代码与元素检查一次搞定【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cli写端到端测试时最耗时的往往不是断言而是搞不清某个按钮该用什么选择器、操作之后页面又变成了什么样。playwright-cli 是微软开源的浏览器自动化命令行工具能直接在终端里录制操作、生成 Playwright 测试代码、检查元素选择器并截取页面截图。你敲下的每条命令都对应一次真实的页面操作输出里还会附上等价的 TypeScript 片段复制进测试文件就能用不用再在浏览器和 IDE 之间来回切换。搭配 Claude Code、GitHub Copilot 这类编码代理时它还能以 SKILL 形式被调用比把整套工具塞进上下文的传统方案更省 token。准备阶段两条命令完成安装与环境配置最快安装方式playwright-cli 要求 Node.js 18 及以上版本全局安装只需两条命令npm install -g playwright/clilatest playwright-cli --help第二条命令会列出全部子命令这份清单同时也是编码代理自学的依据很多场景下你根本不用翻手册。如果机器不允许全局安装先跑npx --no-install playwright --version看看项目里有没有本地版本有就用npx playwright cli替代行为完全一致。给编码代理装上技能包工作流里有 AI 编码代理的话再执行playwright-cli install --skills把技能包装到本地Claude Code 和 GitHub Copilot 会直接读取。不装也照样能用把任务直接丢给代理让它先读一遍--help认识命令再按你的要求去测页面。技能包的入口就在仓库的 skills/playwright-cli/SKILL.md。 实战走查从一条命令到可运行的测试代码场景一手动驱动浏览器复现用户操作假设你要验证 todomvc 演示站添加待办并勾选这条流程。带着这个目标依次在终端输入playwright-cli open https://demo.playwright.dev/todomvc/ --headed playwright-cli type Buy groceries playwright-cli press Enter playwright-cli check e21 playwright-cli screenshot第一条运行后你会看到浏览器窗口弹出来跟着操作走。每条命令执行完都会回传一份页面快照里面带e21这样的元素引用照着引用勾选复选框即可最后一条把当前页面存成图片留作证据。去掉--headed整套动作就在后台无声完成很适合写进脚本。场景二用快照引用定位元素顺手拿到测试代码想弄清登录按钮点了会发生什么先取快照再点击playwright-cli snapshot playwright-cli click e15快照输出会列出e15 [button Sign In]这样的条目点击之后输出里多出一行 Ran Playwright code后面跟着await page.getByRole(button, { name: Sign In }).click();。把这行复制进测试文件playwright-cli 生成测试代码这件事就完成了大半。引用不是唯一目标方式CSS 选择器和getByRole、getByTestId这类定位器同样可以直接传给 click按你习惯选。多会话与可视化监控多开浏览器不打架用命名会话隔离多个项目同时在测两套系统时给每个会话起个名字Cookie 和存储状态就完全互不干扰playwright-cli -sexample open https://example.com --persistent playwright-cli list不带--persistent时浏览器配置只留在内存里窗口一关登录态就没了加上它配置会写入磁盘重开浏览器也不用重新登录。跑编码代理时设置PLAYWRIGHT_CLI_SESSION环境变量可以让它固定使用某个会话避免串线。打开监控面板旁观代理干活运行playwright-cli show会弹出一个可视化面板会话网格区展示每个会话的实时画面、当前 URL 和页面标题点进去能接管鼠标键盘按 Esc 交还控制权。代理在后台跑浏览器自动化时这就是你随时旁观、随时介入的入口。⚡ 效率技巧藏在 help 里的进阶用法把原始输出接进你的管道默认输出包含页面状态、生成代码和快照三部分接进脚本时很碍事。加上--raw就只剩结果值playwright-cli --raw eval JSON.stringify([...document.querySelectorAll(a)].map(a a.href)) links.json一行命令把页面上所有链接导出成 JSON再喂给 jq 或 diff 都可以list这类命令加--json则直接输出结构化数据方便二次处理。高频组合参数find Add to cart在大快照里按文本或正则检索返回匹配节点加上下三行上下文用法接近 grep比通读整份快照快得多snapshot --depth4之后snapshot e34先拿浅层快照再对某棵子树深挖省流量也省时间open --mobile或open --deviceiPhone 15模拟移动端页面更轻快照也更小generate-locator e5把引用直接换成稳定的 Playwright 定位器写测试时少纠结选择器常用参数写进.playwright/cli.config.json之后就不用每条命令重复传参。避坑指南新手最常碰壁的 5 个场景现象下次打开浏览器又回到未登录状态。原因浏览器配置默认只在内存里保存。解决open 时加--persistent或用--profile指定目录。现象命令都在跑却看不到任何浏览器窗口。原因默认就是无头模式。解决给 open 命令加上--headed。现象Windows 上带多个查询参数的 URL 被截断。原因cmd 和 PowerShell 把当成命令分隔符。解决cmd 里写成^PowerShell 里在命令前加--%。现象提示找不到 playwright-cli 命令。原因没有做全局安装。解决先确认项目内有没有本地版本有就用npx playwright cli替代没有再全局安装。现象点击某个引用突然报错。原因页面刷新或重渲染后旧快照里的引用已失效。解决重新 snapshot 拿最新引用再操作。把浏览器操作、测试代码生成和页面截图收敛进同一套终端命令是 playwright-cli 给前端自动化测试带来的最直接的价值——自己跑是这样交给编码代理跑也是这样。遇到具体任务时仓库已经按场景备好了参考手册照单取用即可。使用说明与完整命令表README.md技能包与任务参考手册SKILL.md、references/核心入口脚本playwright-cli.js许可证Apache-2.0LICENSE【免费下载链接】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），仅供参考