企业官网建设流程全解析

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 把浏览器自动化里最常用的动作收敛成一列短命令：Playwright CLI截图、定位器代码生成、视频与跟踪录制都能直接调用，不需要在测试框架和页面之间来回倒腾。下面按"想完成什么事"来组织内容：先给一条能跑通的最小路径，再逐场景给可复制的命令。

三条命令：装好、打开、拿到第一张截图

第一次接触、想先确认环境没问题时，只需要这一段：

# 全局安装，之后任意目录都能直接敲 playwright-cli npm install -g @playwright/cli@latest

装完打开一个页面，开始一个浏览器会话。默认是无头模式，看不到窗口属于正常现象：

# 打开页面并建立会话 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 --filename=page.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 --config=my-config.json

不带--config时，工具默认读取项目里的.playwright/cli.config.json，写一次就不用每次传参了。

常见现象排查

现象：敲playwright-cli提示命令不存在。原因：项目里只有本地安装、没有全局安装，而当前目录又不在那个项目里。 命令：先确认本地有没有可用版本，有就把所有命令换成npx playwright-cli前缀，没有就补一次全局安装（见上文）。

现象：升级后行为跟旧笔记对不上。原因：官方包持续在更新，本机还是旧版本。 命令：

# 把全局包更新到最新 npm update -g @playwright/cli

现象：分不清该用 CLI 还是 Playwright MCP。原因：两者定位不同——CLI 面向编码代理，调用更省 token；MCP 适合需要长驻状态、反复探查页面结构的场景。选 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