ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Playwright CLI 使用指南:定位器代码生成与截图取证,浏览器自动化一次讲清

Playwright CLI 使用指南:定位器代码生成与截图取证,浏览器自动化一次讲清 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-cliPlaywright CLI 把浏览器自动化里最常用的动作收敛成一列短命令Playwright CLI截图、定位器代码生成、视频与跟踪录制都能直接调用不需要在测试框架和页面之间来回倒腾。下面按想完成什么事来组织内容先给一条能跑通的最小路径再逐场景给可复制的命令。三条命令装好、打开、拿到第一张截图第一次接触、想先确认环境没问题时只需要这一段# 全局安装之后任意目录都能直接敲 playwright-cli npm install -g playwright/clilatest装完打开一个页面开始一个浏览器会话。默认是无头模式看不到窗口属于正常现象# 打开页面并建立会话 playwright-cli open https://playwright.dev再截一张当前页面的图确认整条链路已经通了# 截取当前页面不带元素 ref 就是整页 playwright-cli screenshot不想动全局环境的话可以先用项目里已装的本地版本自检确认版本号后再决定要不要全局安装# 用本地已装版本做自检 npx --no-install playwright-cli --version写测试时自动产出可用的测试代码做什么每次 CLI 操作fill、click等都会顺带输出一段等价的 Playwright TypeScript直接粘进测试文件就能跑。什么时候用手动走通一段表单流程、想把它固化成测试用例时。# 对快照里确认过的元素生成定位器代码 playwright-cli generate-locator e5 --raw预期结果终端里给出一段 role 定位器代码如getByRole(button, { name: Sign In })比手写 CSS 选择器更抗页面改版。更完整的规划 → 生成 → 修复工作流在 skills/playwright-cli/references/test-generation.md 里有逐步示例。元素定位不上时先做这两步命令报找不到元素、或者点到了别处时别急着改选择器。最常见的原因是页面刷新后旧的元素 ref 已经失效先重新抓一次快照# 重新抓页面快照拿到最新的元素 ref playwright-cli snapshot快照里每个交互元素都带一个e5、e15形式的 ref。对着新快照确认目标元素后再决定是直接拿 ref 操作还是转成稳定的定位器# 用确认后的 ref 生成定位器代码 playwright-cli generate-locator e5 --raw给测试结果留证截图、视频与跟踪三类留证手段颗粒度从粗到细截图——只关心这一刻页面长什么样适合贴在用例结果或工单里。视频——要复盘一段连续操作WebM 格式落盘到指定路径。跟踪——要逐动作核对 DOM 快照、网络请求和控制台日志文件生成在traces/目录。# 只截某个元素或指定输出文件名 playwright-cli screenshot e5 --filenamepage.png# 开始录制视频输出到指定文件 playwright-cli video-start recordings/login-flow.webm# 停止录制视频文件落盘 playwright-cli video-stop# 开始 / 停止跟踪记录 playwright-cli tracing-start playwright-cli tracing-stop视频的高级选项章节标记、动作标注见 skills/playwright-cli/references/video-recording.md跟踪文件的构成见 skills/playwright-cli/references/tracing.md。默认行为不合适时调整运行参数默认组合是无头模式 内存 profile 默认配置路径以下参数按需覆盖。调试时想看浏览器窗口给open加一个参数即可# 有头模式打开页面 playwright-cli open --headed需要保留 cookies 和登录态时注意默认 profile 只放在内存里浏览器关闭就丢了。要跨重启持久化需要在配置文件中开启字段说明在 skills/playwright-cli/references/storage-state.md。其余固定参数视口、浏览器内核、输出目录等统一写进 JSON 配置# 指定一份自定义配置文件 playwright-cli --configmy-config.json不带--config时工具默认读取项目里的.playwright/cli.config.json写一次就不用每次传参了。常见现象排查现象敲playwright-cli提示命令不存在。原因项目里只有本地安装、没有全局安装而当前目录又不在那个项目里。 命令先确认本地有没有可用版本有就把所有命令换成npx playwright-cli前缀没有就补一次全局安装见上文。现象升级后行为跟旧笔记对不上。原因官方包持续在更新本机还是旧版本。 命令# 把全局包更新到最新 npm update -g playwright/cli现象分不清该用 CLI 还是 Playwright MCP。原因两者定位不同——CLI 面向编码代理调用更省 tokenMCP 适合需要长驻状态、反复探查页面结构的场景。选 CLI 就够了不必都装。现象不确定某个命令有哪些参数。原因命令面比较宽记不住。 命令跑playwright-cli --help看速查表细节主题都在 skills/playwright-cli/references/ 下速查总表在 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),仅供参考
返回列表