5 分钟跑通 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 把开页面、定位元素、出截图搬进终端，浏览器状态在多条命令之间保持。读完这篇，你能打开一个页面并截出第一张图。
🧰 它到底帮你省了什么事
以前查选择器要开开发者工具悬停手敲，现在终端一条命令直接输出可用的定位器（按角色或文本描述元素的方式，比写 CSS 路径稳）。 以前截图要写脚本，现在一条命令直接出图片文件。 登录态和 Cookie 在多条命令之间保持，不用每步都重新登录。
⚡ 30 秒装好，先跑一条命令
第一条把 CLI 装成全局命令（要求 Node.js 18 及以上），第二条列出全部可用命令：
npm install -g @playwright/cli@latest playwright-cli --help终端打出完整命令清单，说明装好了；不想全局装，项目里用npx playwright cli效果一样。 ⚠️ 注意：npm 包名是@playwright/cli，playwright-cli只是装完后的命令名，别按老包名去装。
接着跑第一条真实命令，用可见的浏览器打开官方 todo 演示页：
playwright-cli open https://demo.playwright.dev/todomvc/ --headed跑完会弹出一个浏览器窗口，终端同时回传页面快照，元素带 e15、e21 这样的编号，这些编号就是后续所有操作的入口。
🧭 跟着一条工作流走：定位、操作、出选择器、出图
下面走一遍完整流程：先找到要操作的元素，完成操作，把元素换成稳定选择器，最后出图留证据。上一步的输出就是下一步的输入，四条命令串起来就是一次最小可用的自动化流程，任何一步失败，当时的页面快照都留在终端里方便排查。
从快照拿元素编号
上一步打印的快照里有页面全部元素，只想找某个按钮的文本时用这条：
playwright-cli find "Add"跑完会返回匹配节点及几行上下文，记下这个元素的 ref（引用编号）。
完成一次待办添加
接着把内容打进当前聚焦的输入框，回车提交：
playwright-cli type "Buy groceries" playwright-cli press Enter跑完页面多出新条目，命令回传的快照里能确认操作生效。
把元素换成稳定选择器
ref 只在当前会话有效，写测试脚本要用 locator。拿上一步找到的按钮编号举例：
playwright-cli generate-locator e21跑完打印一段可直接粘进测试文件的代码，不再依赖 e21 这个编号。
出截图和 PDF
页面状态就位，把当前页存成图片和 PDF：
playwright-cli screenshot --filename=todo.png playwright-cli pdf --filename=todo.pdf跑完当前目录生成两个文件，可直接附进测试报告。
⚠️ 容易踩的坑
open成功但不出现窗口：默认是无头模式（后台跑、没有可见窗口），open 时加--headed即可。
浏览器一关登录态就没了：档案默认存在内存里，进程结束即丢；open 时加--persistent写到磁盘。
ref 编号报找不到：ref 只对应当前页面状态，重新拿一次快照得到新编号，再执行操作。
想让编码 agent 代劳全部操作，直接看 skills/playwright-cli/ 下的技能文档；更多命令细节在项目 README里。
【免费下载链接】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），仅供参考
