跑通 Playwright CLI从 3 条安装命令到截图、录屏与 trace 的完整路径【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cliPlaywright CLI 是一个面向浏览器自动化的命令行工具它把打开页面、点击、输入、截图、录视频、生成 Playwright 代码这些动作都压缩成一条条能直接敲的 shell 命令。适合你想快速验证一个流程、把交互沉淀成测试代码、或者把浏览器操作交给 coding agent 执行的场景。全文按先装对 → 读懂页面 → 产出结果 → 进阶避坑的顺序来写你照着敲就能跟着做。先把命令装对3 条安装 playwright-cli 的路径运行 playwright-cli 需要 Node.js 18 或更高版本。根据你的使用习惯有三条路径可选。npm 全局安装命令最省心的做法是全局安装装完后在任何目录都能直接敲playwright-clinpm install -g playwright/clilatest playwright-cli --help第一条装包第二条打印全部可用命令装完先确认工具就位。适合你在多个项目之间共用同一个 CLI 的情况。项目内用 npx 免安装运行只想在当前项目里用、不想污染全局环境时可以直接走 npx。先确认项目里装没装本地版本npx --no-install playwright --version有本地版本时后续命令都写成npx playwright cli ...来调用项目里那份没有的话再回到上面的全局安装。适合需要锁定统一版本、方便团队协作的项目。给编码助手装上 skills 技能包如果你是用 Claude Code、GitHub Copilot 这类 coding agent 来驱动它装一份 skills 包能让 agent 直接理解每个命令该怎么用playwright-cli install --skills装完文档落在 skills/playwright-cli/SKILL.md 目录agent 会照着执行。不想装 skills 也行直接让 agent 去读playwright-cli --help它同样能跑起来。读懂页面snapshot 与元素定位的用法playwright-cli 交互的核心不是你写选择器而是它先给页面编号你再拿编号去操作。理解这一点后面所有命令就顺了。每条命令都会回传页面快照snapshot 就是把当前页面里可交互的元素整理成一份带编号ref的清单比如e5 [button Sign In]。每执行一条命令CLI 都会顺带回传一份 snapshot存到.playwright-cli/目录下。你也可以主动抓一份playwright-cli snapshot playwright-cli snapshot --depth4 # 只看前 4 层页面大时更省适合你刚打开一个陌生页面、想先看看有哪些能点的东西。用 ref 做点击、输入和勾选拿到编号后直接拿编号操作即可不用关心它底层是什么标签playwright-cli fill e1 userexample.com playwright-cli click e3 playwright-cli check e21fill是往输入框填值click是点击check是勾选复选框或单选。适合表单填写、点按钮这类最常见的自动化动作。ref 之外的 CSS 选择器与 Playwright locator不想要编号时也可以直接写 CSS 选择器或 Playwright locatorplaywright-cli click #main button.submit playwright-cli click getByRole(button, { name: Submit })locator 写法和你写测试时的代码一致适合你已经有明确选择器、想直接复用的场景。常用产出截图、视频、trace 与 locator 代码页面能交互之后你多半要留证据或沉淀代码。这四件事覆盖大多数需求。如何截取页面元素截图screenshot 默认截整个页面传一个 ref 就只截那个元素playwright-cli screenshot playwright-cli screenshot e5 playwright-cli screenshot --filenamepage.png适合把页面状态存档、或发给同事看当前长什么样。想要更清晰可以加--hires按设备像素比全量截图。 录制浏览器会话视频video-start 到 video-stop 之间发生的所有操作会被录成 WebM 文件playwright-cli video-start recordings/login-flow.webm playwright-cli video-chapter 填写表单 --description输入测试数据 --duration2000 playwright-cli video-stopvideo-chapter 会在视频里插一个章节卡片适合录一段完整操作流程给别人看或作为工作留档。tracing 抓执行轨迹并生成 locator 代码trace 比视频更细它把每一步的 DOM 快照、网络请求、控制台日志都记下来专门用来排错playwright-cli tracing-start playwright-cli click e4 playwright-cli tracing-stop排查为什么这次点击没生效这类问题时trace 里能看到点击那一刻的 DOM 状态详见 skills/playwright-cli/references/tracing.md。另外每执行一条交互命令CLI 都会在输出里打印等价的 Playwright TypeScript 代码可以直接拷进测试文件。想把某个元素转成 locator 表达式时playwright-cli --raw generate-locator e5适合你正在把手动操作沉淀成测试用例的阶段完整流程见 skills/playwright-cli/references/test-generation.md。进阶与避坑登录态、多会话、配置和几个高频疑问前几节保证你能跑起来这节是那些真正省时间的进阶点和容易踩的坑。保存与恢复登录态默认情况下浏览器配置只放在内存里关掉浏览器 cookies 就没了。想把登录态留下来用 state-save / state-loadplaywright-cli state-save auth.json playwright-cli state-load auth.json文件格式里包含 cookies 和 localStorage适合登录一次、后面反复复用的场景。安全起见别把带 token 的状态文件提交进仓库更多说明见 skills/playwright-cli/references/storage-state.md。多浏览器会话隔离与持久化用-s名字可以同时开多个互不干扰的浏览器每个会话有独立的 cookies、storage 和历史playwright-cli -sauth open https://app.example.com/login playwright-cli -spublic open https://example.com playwright-cli list playwright-cli close-alllist列出所有会话close-all一次性关掉残留僵尸进程时用kill-all。想跨浏览器重启保留登录态在open后加--persistent把 profile 落盘到磁盘。⚠️ 几个高频疑问和 Playwright MCP 什么区别Playwright CLI 走精简命令不往模型上下文塞大段页面数据对 token 更友好适合高频 coding agentMCP 更适合需要持久状态、反复推理页面结构的长流程。默认是无头模式吗是的。想看到浏览器窗口给open加--headedplaywright-cli open https://playwright.dev --headed。配置文件放哪默认读.playwright/cli.config.json也可以用--config指定别的比如playwright-cli open --configmy-config.json。Windows 下 URL 带会断吗会。cmd 里用^转义PowerShell 里用--%。到这里你已经能装对工具、读懂页面、产出截图视频并处理登录态和多会话了。下一步建议挑一个真实页面从open→snapshot→screenshot敲一遍完整流程再用state-save把登录态固化下来想继续深入排错就翻一下 tracing 参考文档把 trace 跑起来。【免费下载链接】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），仅供参考 跑通 Playwright CLI：从 3 条安装命令到截图、录屏与 trace 的完整路径
跑通 Playwright CLI从 3 条安装命令到截图、录屏与 trace 的完整路径【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cliPlaywright CLI 是一个面向浏览器自动化的命令行工具它把打开页面、点击、输入、截图、录视频、生成 Playwright 代码这些动作都压缩成一条条能直接敲的 shell 命令。适合你想快速验证一个流程、把交互沉淀成测试代码、或者把浏览器操作交给 coding agent 执行的场景。全文按先装对 → 读懂页面 → 产出结果 → 进阶避坑的顺序来写你照着敲就能跟着做。先把命令装对3 条安装 playwright-cli 的路径运行 playwright-cli 需要 Node.js 18 或更高版本。根据你的使用习惯有三条路径可选。npm 全局安装命令最省心的做法是全局安装装完后在任何目录都能直接敲playwright-clinpm install -g playwright/clilatest playwright-cli --help第一条装包第二条打印全部可用命令装完先确认工具就位。适合你在多个项目之间共用同一个 CLI 的情况。项目内用 npx 免安装运行只想在当前项目里用、不想污染全局环境时可以直接走 npx。先确认项目里装没装本地版本npx --no-install playwright --version有本地版本时后续命令都写成npx playwright cli ...来调用项目里那份没有的话再回到上面的全局安装。适合需要锁定统一版本、方便团队协作的项目。给编码助手装上 skills 技能包如果你是用 Claude Code、GitHub Copilot 这类 coding agent 来驱动它装一份 skills 包能让 agent 直接理解每个命令该怎么用playwright-cli install --skills装完文档落在 skills/playwright-cli/SKILL.md 目录agent 会照着执行。不想装 skills 也行直接让 agent 去读playwright-cli --help它同样能跑起来。读懂页面snapshot 与元素定位的用法playwright-cli 交互的核心不是你写选择器而是它先给页面编号你再拿编号去操作。理解这一点后面所有命令就顺了。每条命令都会回传页面快照snapshot 就是把当前页面里可交互的元素整理成一份带编号ref的清单比如e5 [button Sign In]。每执行一条命令CLI 都会顺带回传一份 snapshot存到.playwright-cli/目录下。你也可以主动抓一份playwright-cli snapshot playwright-cli snapshot --depth4 # 只看前 4 层页面大时更省适合你刚打开一个陌生页面、想先看看有哪些能点的东西。用 ref 做点击、输入和勾选拿到编号后直接拿编号操作即可不用关心它底层是什么标签playwright-cli fill e1 userexample.com playwright-cli click e3 playwright-cli check e21fill是往输入框填值click是点击check是勾选复选框或单选。适合表单填写、点按钮这类最常见的自动化动作。ref 之外的 CSS 选择器与 Playwright locator不想要编号时也可以直接写 CSS 选择器或 Playwright locatorplaywright-cli click #main button.submit playwright-cli click getByRole(button, { name: Submit })locator 写法和你写测试时的代码一致适合你已经有明确选择器、想直接复用的场景。常用产出截图、视频、trace 与 locator 代码页面能交互之后你多半要留证据或沉淀代码。这四件事覆盖大多数需求。如何截取页面元素截图screenshot 默认截整个页面传一个 ref 就只截那个元素playwright-cli screenshot playwright-cli screenshot e5 playwright-cli screenshot --filenamepage.png适合把页面状态存档、或发给同事看当前长什么样。想要更清晰可以加--hires按设备像素比全量截图。 录制浏览器会话视频video-start 到 video-stop 之间发生的所有操作会被录成 WebM 文件playwright-cli video-start recordings/login-flow.webm playwright-cli video-chapter 填写表单 --description输入测试数据 --duration2000 playwright-cli video-stopvideo-chapter 会在视频里插一个章节卡片适合录一段完整操作流程给别人看或作为工作留档。tracing 抓执行轨迹并生成 locator 代码trace 比视频更细它把每一步的 DOM 快照、网络请求、控制台日志都记下来专门用来排错playwright-cli tracing-start playwright-cli click e4 playwright-cli tracing-stop排查为什么这次点击没生效这类问题时trace 里能看到点击那一刻的 DOM 状态详见 skills/playwright-cli/references/tracing.md。另外每执行一条交互命令CLI 都会在输出里打印等价的 Playwright TypeScript 代码可以直接拷进测试文件。想把某个元素转成 locator 表达式时playwright-cli --raw generate-locator e5适合你正在把手动操作沉淀成测试用例的阶段完整流程见 skills/playwright-cli/references/test-generation.md。进阶与避坑登录态、多会话、配置和几个高频疑问前几节保证你能跑起来这节是那些真正省时间的进阶点和容易踩的坑。保存与恢复登录态默认情况下浏览器配置只放在内存里关掉浏览器 cookies 就没了。想把登录态留下来用 state-save / state-loadplaywright-cli state-save auth.json playwright-cli state-load auth.json文件格式里包含 cookies 和 localStorage适合登录一次、后面反复复用的场景。安全起见别把带 token 的状态文件提交进仓库更多说明见 skills/playwright-cli/references/storage-state.md。多浏览器会话隔离与持久化用-s名字可以同时开多个互不干扰的浏览器每个会话有独立的 cookies、storage 和历史playwright-cli -sauth open https://app.example.com/login playwright-cli -spublic open https://example.com playwright-cli list playwright-cli close-alllist列出所有会话close-all一次性关掉残留僵尸进程时用kill-all。想跨浏览器重启保留登录态在open后加--persistent把 profile 落盘到磁盘。⚠️ 几个高频疑问和 Playwright MCP 什么区别Playwright CLI 走精简命令不往模型上下文塞大段页面数据对 token 更友好适合高频 coding agentMCP 更适合需要持久状态、反复推理页面结构的长流程。默认是无头模式吗是的。想看到浏览器窗口给open加--headedplaywright-cli open https://playwright.dev --headed。配置文件放哪默认读.playwright/cli.config.json也可以用--config指定别的比如playwright-cli open --configmy-config.json。Windows 下 URL 带会断吗会。cmd 里用^转义PowerShell 里用--%。到这里你已经能装对工具、读懂页面、产出截图视频并处理登录态和多会话了。下一步建议挑一个真实页面从open→snapshot→screenshot敲一遍完整流程再用state-save把登录态固化下来想继续深入排错就翻一下 tracing 参考文档把 trace 跑起来。【免费下载链接】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），仅供参考