尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Playwright CLI 快速上手指南:3步玩转浏览器自动化,一条命令生成测试脚本

Playwright CLI 快速上手指南:3步玩转浏览器自动化,一条命令生成测试脚本 Playwright CLI 快速上手指南3步玩转浏览器自动化一条命令生成测试脚本【免费下载链接】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-cliPlaywright CLI是微软出品的浏览器自动化命令行工具你只管敲命令它负责开网页、点按钮、填表单、截屏录像还能顺手把操作步骤变成 Playwright 测试脚本。场景速览Playwright CLI 到底能替你干什么网页截图与导出打开任意页面存成图片或 PDF ——playwright-cli screenshot --filenamepage.png模拟真人操作填表单、点按钮、拖拽像人一样过一遍登录流程 ——playwright-cli fill e3 abcexample.com录制即生成测试脚本每执行一步操作它就同步吐出一行 Playwright TypeScript 代码复制进测试文件就能跑 ——playwright-cli click e15三步上手装好 Playwright CLI 并跑通第一条命令第一步环境准备✅ 确认你装好了 Node.js 18 或更高版本node -v看一眼其他什么都不用配。第二步安装npm install -g playwright/clilatest playwright-cli --help注意npm 上的包名是playwright/cli敲出来的命令才叫playwright-cli。--help能打印出全部命令说明装好了。第三步跑通第一条命令playwright-cli open https://example.com playwright-cli screenshot第一条命令会启动一个浏览器并打开页面第二条命令把当前页面截图保存到.playwright-cli目录文件路径会直接显示在终端里。看到路径恭喜你已经成功指挥浏览器了。常用命令速查一张表看懂 Playwright CLI命令作用示例open [url]打开浏览器并导航到指定页面playwright-cli open https://example.comgoto url在当前浏览器里跳转页面playwright-cli goto https://playwright.devsnapshot获取页面快照和元素引用编号playwright-cli snapshotclick ref点击元素playwright-cli click e15fill ref text向输入框填写文本playwright-cli fill e3 hix.compress key按键盘按键playwright-cli press Enterscreenshot [ref]截取整页或某个元素playwright-cli screenshot e5pdf把页面存成 PDFplaywright-cli pdf --filenamepage.pdfvideo-start/video-stop开始/停止录制会话视频playwright-cli video-starttracing-start/tracing-stop开始/停止录制执行轨迹playwright-cli tracing-startgenerate-locator ref为元素生成 Playwright 定位器playwright-cli generate-locator e15list/close-all列出所有会话 / 关闭全部浏览器playwright-cli list进阶小技巧这几个浏览器自动化技巧特别好用小技巧先取快照看元素引用再用一行命令精准点击页面上的按钮叫什么名字、在哪一行你不用肉眼找。先跑playwright-cli snapshot它会列出e1 [textbox Email]这样的元素清单接着playwright-cli click e15就点中了。也可以直接给 CSS 选择器或getByRole(button, { name: Submit })这类定位器效果一样。小技巧每敲一行命令就白得一行 Playwright 测试脚本这是它最值钱的地方fill、click等操作执行时终端会同步打印等价的 Playwright TypeScript 代码比如await page.getByRole(button, { name: Sign In }).click();。把操作代码收集起来补上断言一个 E2E 测试就成型了完全不用手写录制器。完整的探索→生成→修复流程见 test-generation.md。小技巧用 -s 命名会话隔离多个项目--persistent 让登录状态不丢同时开多个互不干扰的浏览器实例playwright-cli -sauth open https://app.com/login另一个用-spublic各自的 Cookie、localStorage 完全隔离。默认浏览器一关状态就没了加--persistent参数可以把用户资料写到磁盘下次重开浏览器登录还在。管理细节参考 session-management.md。避坑与FAQ新手最容易卡住的3个问题Q1装完敲playwright-cli提示找不到命令九成是包名记混了。npm 上安装的是playwright/cli带作用域不是playwright-cli。如果全局命令就是没生效可以退而用项目内的本地版本npx playwright cli功能一致。Q2命令都在执行但看不到浏览器窗口正常吗正常。Playwright CLI 默认是无头headless模式省资源也方便在服务器上跑。想肉眼看着它操作在open时加--headed参数即可。Q3怎么盯着它干活Agent 在后台跑浏览器我看不到进度啊跑一下playwright-cli show会打开可视化面板所有会话的实时画面、当前 URL 一目了然点进去还能直接接管鼠标键盘帮它一把。延伸生态搭配这些组件玩法更多Playwright Test官方测试框架CLI 生成的测试脚本交给它来并发运行和出报告。Playwright MCP适合需要持久浏览器状态、反复看页面再推理的智能体工作流比如自愈测试。Playwright Core底层浏览器自动化库想写自定义脚本直接操作浏览器时的底座。一行命令让浏览器打工从截图到生成测试脚本全都不用写样板代码。想玩请求 mock、视频录制、轨迹分析这些更深的功能翻 README.md 的完整命令表和 skills/playwright-cli/SKILL.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),仅供参考
返回列表