利用时间是一个极其高级的规律。——恩格斯

Playwright CLI:给“编码代理”与工程团队的浏览器自动化快刀

如果你已经在使用 Playwright 做端到端测试或自动化,而又在尝试把 GitHub Copilot、Claude Code 等“编码代理”纳入日常工作流,那么 Playwright CLI 会是一个非常趁手的工具。它以“命令行技能”的方式提供常用浏览器操作,不强迫把页面结构灌进大语言模型,天然更节省 token,也更贴合现代代理的工作模式。

  • 仓库与主页:microsoft/playwright-cli · playwright.dev
  • 描述:CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
  • 许可:Apache-2.0
  • 运行时:Node.js 18+

本文基于仓库的 README 整理重点,给你一个直接可跑的“代理友好型”Playwright CLI 入门。


CLI vs MCP:为什么命令行更适合“编码代理”

仓库 README 的开场白清晰对比了 CLI 与 MCP 在代理场景中的定位:

1
2
3
4
5
6
7
### Playwright CLI vs Playwright MCP

This package provides CLI interface into Playwright. If you are using coding agents, that is the best fit.

- CLI: Modern coding agents increasingly favor CLI–based workflows exposed as SKILLs over MCP because CLI invocations are more token-efficient: they avoid loading large tool schemas and v...

- MCP: MCP remains relevant for specialized agentic loops that benefit from persistent state, rich introspection, and iterative reasoning over page structure, such as exploratory automation, s...
  • CLI 的好处:把操作“外包”为技能命令,代理只需读取 --help 输出,就能组合执行;不用加载大而细的工具 schema,也不必把页面 DOM 塞进 LLM,token 友好。
  • MCP 的价值:适合“富状态 + 深度推理 + 结构化感知”的复杂自动化循环,比如探索式操作、页面细粒度分析等。

多数编码代理的“日常落地”(比如写测试、跑流程、截图与录屏)用 CLI 会更直接;遇到需要“持久会话 + 富 introspection”的复杂场景,再考虑 MCP。


安装与入门:两条路都简单

  • 标准安装
1
2
npm install -g @playwright/cli@latest
playwright-cli --help
  • 安装“技能”(让代理本地识别并调用)
1
playwright-cli install-skills
  • 无技能也可用(让代理读取 --help
1
2
3
4
Point your agent at the CLI and let it cook. It'll read the skill off `playwright-cli --help` on its own:

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.
  • 在代理中安装插件技能(推荐)
1
2
/plugin marketplace add microsoft/playwright-cli
/plugin install playwright-cli
  • 手动安装技能到本地目录
1
2
3
mkdir -p .claude/skills/playwright-cli
curl -o .claude/skills/playwright-cli/SKILL.md \
https://raw.githubusercontent.com/microsoft/playwright-cli/main/skills/playwright-cli/SKILL.md

演示:用 CLI 快速操控 TodoMVC 流程

你可以让代理去跑,也可以手工执行命令。下面这组命令直观展示了“输入、勾选、截图”的常见流程:

1
2
3
4
5
6
7
8
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot
  • open --headed:可视化运行,便于人机协作与调试
  • type + press Enter:模拟输入与按键
  • check:勾选元素(e21e35 来自页面快照的元素引用)
  • screenshot:保存页面或元素截图

Headed/Headless 切换:可视化调试更顺手

1
playwright-cli open https://playwright.dev --headed
  • 默认 headless
  • --headed 在调试时更方便观察与定位

会话管理:多项目多浏览器“持久态”切换

Playwright CLI 默认使用持久 profile,会话之间的 Cookies 与存储会保留。你可以用 --session 快速区分不同项目的浏览器实例。

  • 打开两个会话并列运行
1
2
3
playwright-cli open https://playwright.dev
playwright-cli --session=example open https://example.com
playwright-cli session-list
  • 用环境变量指定代理会话
1
PLAYWRIGHT_CLI_SESSION=todo-app claude .
  • 常用会话命令
1
2
3
4
5
playwright-cli session-list             # list all sessions
playwright-cli session-stop [name] # stop session
playwright-cli session-restart [name] # restart session
playwright-cli session-stop-all # stop all sessions
playwright-cli session-delete [name] # delete session data along with the profiles

适合“一个仓库一个会话”或“一个任务一个会话”的工程化习惯。


常用命令速览:打开、输入、点击、截图与导航

Playwright CLI 的命令集覆盖了“页面控制、导航、键鼠、存储、网络、录制与追踪”等核心需求。以下仅摘录核心子集,完整列表请查看 README 的 Commands 章节。

  • 核心操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
playwright-cli open <url>               # open url
playwright-cli close # close the page
playwright-cli type <text> # type text into editable element
playwright-cli click <ref> [button] # perform click on a web page
playwright-cli dblclick <ref> [button] # perform double click on a web page
playwright-cli fill <ref> <text> # fill text into editable element
playwright-cli drag <startRef> <endRef> # perform drag and drop between two elements
playwright-cli hover <ref> # hover over element on page
playwright-cli select <ref> <val> # select an option in a dropdown
playwright-cli upload <file> # upload one or multiple files
playwright-cli check <ref> # check a checkbox or radio button
playwright-cli uncheck <ref> # uncheck a checkbox or radio button
playwright-cli snapshot # capture page snapshot to obtain element ref
playwright-cli eval <func> [ref] # evaluate javascript expression on page or element
playwright-cli dialog-accept [prompt] # accept a dialog
playwright-cli dialog-dismiss # dismiss a dialog
playwright-cli resize <w> <h> # resize the browser window
  • 导航与键鼠
1
2
3
4
5
6
7
playwright-cli go-back                  # go back to the previous page
playwright-cli go-forward # go forward to the next page
playwright-cli reload # reload the current page

playwright-cli press <key> # press a key on the keyboard, `a`, `arrowleft`
playwright-cli keydown <key> # press a key down on the keyboard
playwright-cli keyup <key> # press a key up on the keyboard
  • 截图与 PDF
1
2
playwright-cli screenshot [ref]         # screenshot of the current page or element
playwright-cli pdf # save page as pdf
  • 标签页管理
1
2
3
4
playwright-cli tab-list                 # list all tabs
playwright-cli tab-new [url] # create a new tab
playwright-cli tab-close [index] # close a browser tab
playwright-cli tab-select <index> # select a browser tab
  • 存储与 Cookies/LocalStorage/SessionStorage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
playwright-cli state-save [filename]    # save storage state
playwright-cli state-load <filename> # load storage state

# Cookies
playwright-cli cookie-list [--domain] # list cookies
playwright-cli cookie-get <name> # get a cookie
playwright-cli cookie-set <name> <val> # set a cookie
playwright-cli cookie-delete <name> # delete a cookie
playwright-cli cookie-clear # clear all cookies

# LocalStorage
playwright-cli localstorage-list # list localStorage entries
playwright-cli localstorage-get <key> # get localStorage value
playwright-cli localstorage-set <k> <v> # set localStorage value
playwright-cli localstorage-delete <k> # delete localStorage entry
playwright-cli localstorage-clear # clear all localStorage

# SessionStorage
playwright-cli sessionstorage-list # list sessionStorage entries
playwright-cli sessionstorage-get <k> # get sessionStorage value
playwright-cli sessionstorage-set <k> <v> # set sessionStorage value
playwright-cli sessionstorage-delete <k> # delete sessionStorage entry
playwright-cli sessionstorage-clear # clear all sessionStorage
  • DevTools 与追踪
1
2
3
4
5
6
7
playwright-cli console [min-level]      # list console messages
playwright-cli network # list all network requests since loading the page
playwright-cli run-code <code> # run playwright code snippet
playwright-cli tracing-start # start trace recording
playwright-cli tracing-stop # stop trace recording
playwright-cli video-start # start video recording
playwright-cli video-stop [filename] # stop video recording

这个“命令面”基本覆盖日常自动化与测试场景所需。


配置文件:把“会话与输出”固化为工程规范

可以通过 --config 指定 JSON 配置文件,也可使用默认的 playwright-cli.json

1
2
3
playwright-cli --config path/to/config.json open example.com

Playwright CLI will load config from `playwright-cli.json` by default so that you did not need to specify it every time.

配置项包括:

  • 浏览器类型、持久化目录与 Launch/Context Options、CDP 连接等
  • 输出目录与模式、控制台与网络日志级别
  • 超时、测试选择器属性、视频保存、初始化脚本等

工程团队可以把“统一的浏览器配置与日志策略”放在仓库根,约定统一行为。


环境变量:在 CI 与代理中灵活切换

README 列出了丰富的环境配置(节选):

  • PLAYWRIGHT_MCP_BROWSER:选择浏览器或 Chrome channel
  • PLAYWRIGHT_MCP_HEADLESS:是否 headless
  • PLAYWRIGHT_MCP_OUTPUT_DIRPLAYWRIGHT_MCP_OUTPUT_MODE:输出目录与日志输出方式
  • PLAYWRIGHT_MCP_TIMEOUT_ACTIONPLAYWRIGHT_MCP_TIMEOUT_NAVIGATION:超时配置
  • PLAYWRIGHT_MCP_USER_DATA_DIRPLAYWRIGHT_MCP_VIEWPORT_SIZE:用户数据目录与窗口大小
  • PLAYWRIGHT_MCP_EXTENSION:连接既有浏览器实例(需安装 Playwright MCP Bridge 扩展)
  • 还有允许/阻止请求的白名单与黑名单、代理设置、是否保存 trace/video 等

这些都方便在 CI、远程代理或多机协作中进行“无侵入的行为切换”。


使用建议:把 CLI 真正纳入“编码代理”的流水线

  • 按需装技能:让 Copilot/Claude Code 通过插件或本地技能目录识别 CLI 能力
  • 以会话为单位:一个项目一个 --session,多任务并行更有序
  • Headed 开启调试:初期场景建议 --headed,观察 UI 行为更快定位
  • 快照与元素引用:善用 snapshot 生成元素引用,少写选择器
  • 把配置放仓库:在根目录放 playwright-cli.json,统一视频、追踪与日志输出策略
  • 环境变量约定:CI/CD 与代理统一通过 env 切换浏览器、输出与超时

结语

Playwright CLI 的核心价值在于“把浏览器自动化变成一套清晰的命令接口”,而现代编码代理非常擅长理解并组合这些命令。相比把页面结构灌进 LLM,它选择更节省 token 的路径;相比 MCP,它在多数“工程日常”里足够直接与高效。
如果你正在把代理融入测试与自动化工作流,不妨从 playwright-cli --help 开始,用一两个会话跑通 TodoMVC,再把配置与日志固化到仓库里。很快你就会拥有一套“人机协作”的浏览器自动化快刀。

更多参考: