让编码 Agent 直接编写并运行 Playwright 自动化

预制好的浏览器自动化脚本能撑过演示，然后在你的应用碰到第三方登录、表格的虚拟滚动、结账流程的竞态条件时土崩瓦解。lackeyjb 的 playwright-skill（3k 星的 Agent Skill）走了相反的路线：你的编码 Agent 针对手头的具体任务编写定制的 Playwright 代码，再通过一个保持模块解析稳定的可移植执行器运行它。

为什么这个 Skill 重要

README 对它的定位说得精确：当 Agent 需要写一个真正的 Playwright 程序时用它——循环、断言、多上下文、网络拦截、截图、录屏，或者一段你想保存下来反复运行的脚本。设计取舍都由此而来：

• **定制代码，不是固化流程。**自动化代码是 Agent 为你的具体请求现写的，所以罕见的选择器和多步流程都是一等公民。
• 默认可见浏览器。headless: false 意味着你能实时看到自动化运行；显式要求时也能切到无头模式。
• **一个可移植执行器。**自动化经 run.js 运行——README 称之为 universal executor——它存在的意义就是不让模块解析错误毁掉你的运行。
• **渐进式披露。**SKILL.md 保持精简，完整的 API_REFERENCE.md——选择器、网络拦截、认证、视觉回归测试、移动端仿真——只在任务需要时才加载。

安装

推荐路线是 Vercel 的 skills CLI，它会装到受支持 agent 的原生位置：

npx skills add lackeyjb/playwright-skill --skill playwright-skill --global --yes

去掉 --global 就只装到当前项目，或加 --agent claude-code cursor 指定目标 agent。Claude Code 用户也可以按插件方式安装：

/plugin marketplace add lackeyjb/playwright-skill

/plugin install playwright-skill@playwright-skill

无论用哪种安装方式，都要进入已安装的 skill 目录运行一次 setup——它会安装 Playwright 和 Chromium：

npm run setup

用 /help 确认 skill 已加载，再让它做个打开页面的简单任务验证。

实战：注册表单的端到端检查

装好 skill、启动开发服务器之后，给 Agent 下达任务：

打开 http://127.0.0.1:3000/signup 检查注册流程：填写姓名、邮箱和密码，提交表单，断言跳转到欢迎页，并对移动端视口重复一遍。每一步都要截图，最后把控制台输出和截图路径整理成一份结果报告。

Agent 会针对这些步骤——包括你的表单需要的任何特殊处理，比如等待防抖的邮箱格式校验——写一个 Playwright 脚本，然后交给执行器。浏览器以可见方式打开，自动化开始运行，结果带着控制台输出和截图返回。因为脚本是真实文件，你可以保存它、纳入版本管理，之后在 CI 式的检查里反复运行；这份脚本就是产出物，而这正是这个 skill 的全部意义。

技巧

• 如果运行死于 module-not-found 报错，README 的故障排查要求自动化经 run.js 运行——这就是模块解析的修复方式。
• 辅助截图默认落在系统临时目录；设置 PW_ARTIFACT_DIR 把产物存到更持久的位置。
• 需要逐步观察一个快速流程时，设置 SLOW_MO。
• 在 skill 目录运行 npm run install-all-browsers 可以安装 Chromium 之外的浏览器。
• 值得直接粘贴的使用示例："Check for broken links"、"Verify all images load"、"Take screenshots of the dashboard in mobile and desktop"。

何时不用这个 Skill

README 自己划了边界：简单的交互式浏览，从微软官方的 @playwright/cli 开始并安装它的 agent skill；基于工具的浏览器控制（带无障碍快照），用 playwright-mcp。本项目是代码优先的选项，最适合自动化脚本本身就是你想保留的产出物的场景。它还有 Node.js 前置要求——Playwright 和 Chromium 经 npm run setup 安装——所以完全不允许安装的环境不适合它。

查看 排行榜 了解更多 skill。