Playwright Skills 教程

按 Playwright 官方 Skills 和 playwright-cli README 走一遍。跑通标准：skill 装进你要测的那个项目目录，并且能用 CLI 在 https://demo.playwright.dev/todomvc 上完成「add todo」。

本机已执行：npm install @playwright/cli、playwright-cli install --skills（装到 .claude/skills/playwright-cli）、open → type "Buy groceries" → press Enter → screenshot。

1. 安装 playwright-cli

官方 Installation（需要 Node 18+）：

npm install -g @playwright/cli@latest
playwright-cli --help

--help 第一行是 open [url] / type / press / snapshot / screenshot。截屏不要把路径当 CSS 选择器：用 playwright-cli screenshot --filename=todomvc.png。

2. 在项目目录安装 skills

先 cd 到你的仓库根目录，再跑：

playwright-cli install --skills

默认拷到当前仓库 .claude/skills/playwright-cli。.agents/skills 布局用 --skills=agents。全局：--skills -g。本机在临时目录跑完后终端是：

Skill installed to .claude/skills/playwright-cli
Found chrome, will use it as the default browser.

3. 跑通一次 add todo

官方 Demo 命令（有 skill 后同样让 Agent 做这件事）。本机逐步跑的是：

playwright-cli open https://demo.playwright.dev/todomvc
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot --filename=todomvc.png

跑完页面上应出现一条 Buy groceries，底部 1 item left。本机截图：

给 Agent 的提示（官方 Skills-less 示例）：

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

新开一轮对话。看浏览器窗口时在 open 后面加 --headed。

4. 和 Playwright MCP 的差别

官方 README：编码 Agent 更适合 CLI + SKILLS（省 token）；MCP 适合要一直盯着页面结构的长循环。两条路互补，不要当同一条安装手册。

出处：Skills 文档 · playwright-cli