Playwright CLI完整实操指南:3种装法、4类核心命令,从截图到代码生成

📅 发布时间:2026/9/15 13:14:30
Playwright CLI完整实操指南:3种装法、4类核心命令,从截图到代码生成
Playwright CLI完整实操指南3种装法、4类核心命令从截图到代码生成【免费下载链接】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 代码、检查选择器、截屏一条命令就能完成。下文不按官方文档的顺序走而是围绕装好它 → 跑常用操作 → 调进阶配置来组织看完你就能直接拿到一组能上手的命令。3 种安装路径按场景选一种一行命令装好全局版对还没接触过、想马上用起来的人这种方式最直接npm install -g playwright/clilatest装完之后在任何目录下都可以直接调用playwright-cli。用 npx 先跑项目本地版本不想污染全局环境时可以先查当前项目里有没有本地版本npx --no-install playwright-cli --version 小贴士如果项目里已经装了本地版本之后都用npx playwright-cli来跑确保使用的是项目指定的那个版本而不是你机器上装的另一个。装上技能包给 Agent 提供上下文技能包里附带了详细的参考指南和高级功能playwright-cli install --skills装好后到 skills/playwright-cli/ 目录里就能看到一套现成的参考文档需要时随时查。跑一遍 4 类高频操作截图、视频、Trace、代码生成截图给页面状态留个底要记录测试结果、或者把页面状态发给同事时它是最直接的手段# 截取当前页面 playwright-cli screenshot # 截取特定元素 playwright-cli screenshot e5 # 自定义截图文件名 playwright-cli screenshot --filenamepage.png截图技巧还可以去 skills/playwright-cli/SKILL.md 里翻。视频把整个测试过程录下来调试复杂场景时光看静态图不够先把浏览器会话录下来回头再回看# 开始录制视频 playwright-cli video-start recordings/login-flow.webm # 停止录制视频 playwright-cli video-stop录制的高级选项见 skills/playwright-cli/references/video-recording.md。Trace看清执行时到底发生了什么Trace 会记录 DOM 快照、网络活动、控制台日志这类详细的执行轨迹开始和停止各一条命令# 开始跟踪记录 playwright-cli tracing-start # 停止跟踪记录 playwright-cli tracing-stop跟踪记录产出的信息量足够你把测试执行的每个细节都挖开看。更多用法参考 skills/playwright-cli/references/tracing.md。代码生成把操作变成稳定的定位器Playwright CLI 最值钱的一点是它能自动写出测试代码你在终端里做的交互会被 CLI 记录下来并直接给出对应的 TypeScript 代码。比如填写表单时相应代码就替你写好了。定位器代码可以这样生成# 生成定位器代码示例 playwright-cli generate-locator e5 --raw生成的代码会优先采用基于角色的定位器这类定位器通常更稳定可靠。展开细节可以看 skills/playwright-cli/references/test-generation.md。进阶设置里要调的 3 个地方指定配置文件JSON 配置文件能自定义 Playwright CLI 的行为。默认它读取.playwright/cli.config.json所以平时不用重复传参配置文件放在别处时用--config指过去playwright-cli --configmy-config.json无头模式怎么切有头浏览器默认以无头模式运行。想看界面时给 open 加上--headed即可playwright-cli open --headedcookies 和存储状态别丢浏览器配置默认保存在内存里浏览器一关状态就没了。需要保留 cookies 和存储状态时通过配置文件设置具体做法参见 skills/playwright-cli/references/storage-state.md。快问快答和 Playwright MCP 有什么差别两者定位不同Playwright CLI 是独立的命令行工具专注快速完成测试类操作Playwright MCPMicrosoft Playwright Console则是更全面的开发环境功能面更广。想对比两者直接翻 README.md 即可。怎么更新到最新版npm update -g playwright/cli能在 CI/CD 里用吗可以。它和自动化测试流水线契合度很高接进 CI/CD 后每次代码提交都能过一轮测试。【免费下载链接】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),仅供参考