Playwright Skill是一个 Claude 插件，能够让 Claude 即时编写和执行任何 Playwright 自动化任务，它会帮我们自动访问、读取浏览器的信息，分析，截图，实现完全自动化！
Claude 会根据浏览器自动化需求自主决定何时使用此插件。

注：用不起claude的朋友可以选择使用国产大模型之光 glm4.6替换

• GLM Coding 是智谱 AI 推出的“AI 编码订阅计划”，背后由最新的 GLM-4.6 旗舰模型提供能力，主要解决“写代码、读代码、查 bug、做智能体任务”这些日常开发场景。​
  它不是单独的一款编辑器，而是一个专门面向开发者的订阅套餐，可以在 Claude Code、Cline、Cursor、Roo Code、Kilo Code、OpenCode、Crush、Goose 等 10+ 主流 AI 编程工具里共用同一个模型额度，相当于给常用工具统一换上同一颗“大脑”。
• 详细介绍在这篇文章，接入只需一步 GLM Coding,国产大模型介绍
• 智谱官网地址：https://www.bigmodel.cn/claude-code?ic=XODGYIKX4X

特性

• 任何自动化任务 - Claude 为特定请求编写自定义代码，不受预构建脚本限制
• 默认可见浏览器 - 使用 headless: false 实时查看自动化过程
• 零模块解析错误 - 通用执行器确保正确的模块访问
• 渐进式披露 - 简洁的 SKILL.md，仅在需要时加载完整 API 参考
• 安全清理 - 智能临时文件管理，避免竞态条件
• 全面辅助工具 - 常见任务的可选实用函数

安装

此仓库的结构是包含插件的 Claude Code 插件。你可以将其安装为插件（推荐）或提取为独立插件。

理解结构

此仓库使用插件格式和嵌套结构：

playwright-skill/              # 插件根目录
├── .claude-plugin/           # 插件元数据
└── skills/
    └── playwright-skill/     # 实际的技能
        └── SKILL.md

Claude Code 要求插件直接位于 .claude/skills/ 下的文件夹中，因此手动安装需要提取嵌套的插件文件夹。

---

选项1：插件安装（推荐）

通过 Claude Code 的插件系统安装，以便自动更新和团队分发：

# 将此仓库添加为市场
/plugin marketplace add lackeyjb/playwright-skill

# 安装插件
/plugin install playwright-skill@playwright-skill

# 导航到技能目录并运行设置
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
npm run setup

通过运行 /help 验证安装，确认插件可用。

---

选项2：独立插件安装

要安装为独立插件（不使用插件系统），仅提取插件文件夹：

全局安装（在任何地方都可用）：

# 克隆到临时位置
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# 仅将技能文件夹复制到您的全局技能目录
mkdir -p ~/.claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill ~/.claude/skills/

# 导航到技能并运行设置
cd ~/.claude/skills/playwright-skill
npm run setup

# 清理临时文件
rm -rf /tmp/playwright-skill-temp

项目特定安装：

# 克隆到临时位置
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# 仅将技能文件夹复制到您的项目
mkdir -p .claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill .claude/skills/

# 导航到技能并运行设置
cd .claude/skills/playwright-skill
npm run setup

# 清理临时文件
rm -rf /tmp/playwright-skill-temp

为什么使用这种结构？ 插件格式需要 skills/ 目录来组织插件内的多个插件。当安装为独立插件时，您只需要内部的 skills/playwright-skill/ 文件夹内容。

---

选项3：下载发布版本

1. 从 GitHub Releases 下载并解压最新版本

2. 仅将 skills/playwright-skill/ 文件夹复制到：

   • 全局：~/.claude/skills/playwright-skill
   • 项目：/path/to/your/project/.claude/skills/playwright-skill

3. 导航到插件目录并运行设置：

   cd ~/.claude/skills/playwright-skill  # 或您的项目路径
   npm run setup
   

---

验证安装

运行 /help 确认插件已加载，然后要求 Claude 执行简单的浏览器任务，如"测试 google.com 是否加载"。

快速开始

安装后，只需要求 Claude 测试或自动化任何浏览器任务。Claude 将编写自定义 Playwright 代码，执行它，并返回带有截图和控制台输出的结果。

使用示例

测试任何页面

"测试主页"
"检查联系表单是否有效"
"验证注册流程"

视觉测试

"在移动端和桌面端拍摄仪表板截图"
"在不同视口中测试响应式设计"

交互测试

"填写注册表单并提交"
"点击主导航"
"测试搜索功能"

验证

"检查断开的链接"
"验证所有图片加载"
"测试表单验证"

工作原理

1. 描述您想要测试或自动化的内容
2. Claude 为任务编写自定义 Playwright 代码
3. 通用执行器 (run.js) 以正确的模块解析运行它
4. 浏览器打开（默认可见）并执行自动化
5. 结果显示控制台输出和截图

配置

默认设置：

• 无头模式： false（浏览器可见，除非明确要求无头）
• 慢动作： 100ms 以便观察
• 超时： 30s
• 截图： 保存到 /tmp/

项目结构

playwright-skill/
├── .claude-plugin/
│   ├── plugin.json          # 分发的插件元数据
│   └── marketplace.json     # 市场配置
├── skills/
│   └── playwright-skill/    # 实际的技能（Claude 发现此技能）
│       ├── SKILL.md         # Claude 读取的内容（314 行）
│       ├── run.js           # 通用执行器（正确的模块解析）
│       ├── package.json     # 依赖项和设置脚本
│       └── lib/
│           └── helpers.js   # 可选的实用函数
├── API_REFERENCE.md         # 完整的 Playwright API 参考（630 行）
├── README.md                # 此文件 - 用户文档
├── CONTRIBUTING.md          # 贡献指南
└── LICENSE                  # MIT 许可证

高级使用

当需要关于选择器、网络拦截、身份验证、视觉回归测试、移动模拟、性能测试和调试的综合文档时，Claude 将自动加载 API_REFERENCE.md。

GitHub项目地址: https://github.com/lackeyjb/playwright-skill

依赖项

• Node.js >= 14.0.0
• Playwright ^1.48.0（通过 npm run setup 安装）
• Chromium（通过 npm run setup 安装）

故障排除

Playwright 未安装？
导航到插件目录并运行 npm run setup。

找不到模块错误？
确保自动化通过 run.js 运行，它处理模块解析。

浏览器不打开？
验证设置了 headless: false。插件默认为可见浏览器，除非请求无头模式。

安装所有浏览器？
从插件目录运行 npm run install-all-browsers。

什么是 Claude 插件？

插件是扩展 Claude 功能的模块化能力。与手动调用的斜杠命令不同，插件是模型调用的——Claude 根据您的请求自主决定何时使用它们。

当您要求 Claude 测试网页或自动化浏览器交互时，Claude 会发现此插件，加载必要的指令，执行自定义 Playwright 代码，并返回带有截图和控制台输出的结果。

注：用不起claude的朋友可以选择使用国产大模型之光 glm4.6替换

• GLM Coding 是智谱 AI 推出的“AI 编码订阅计划”，背后由最新的 GLM-4.6 旗舰模型提供能力，主要解决“写代码、读代码、查 bug、做智能体任务”这些日常开发场景。​
  它不是单独的一款编辑器，而是一个专门面向开发者的订阅套餐，可以在 Claude Code、Cline、Cursor、Roo Code、Kilo Code、OpenCode、Crush、Goose 等 10+ 主流 AI 编程工具里共用同一个模型额度，相当于给常用工具统一换上同一颗“大脑”。
• 详细介绍在这篇文章，接入只需一步 GLM Coding,国产大模型介绍
• 智谱官网地址：https://www.bigmodel.cn/claude-code?ic=XODGYIKX4X