ByteNoteByteNote
字

字节笔记本

2026年2月22日

playwright-skill：Claude Code 浏览器自动化 Skill

#Skills

本文介绍 playwright-skill，一个为 Claude Code 打造的浏览器自动化 Skill。它让 Claude 能够实时编写和执行 Playwright 自动化脚本，从简单的页面测试到复杂的多步骤流程都能轻松应对。

项目简介

playwright-skill 是由 Bryan Lackey 开发的开源 Claude Skill，基于 Playwright 框架实现浏览器自动化功能。该项目在 GitHub 上已获得 1.8k stars，采用 JavaScript 编写，以 MIT 许可证 开源。

该 Skill 的核心价值在于：Claude 能够根据用户的浏览器自动化需求，自主决定何时使用此 Skill，并仅加载完成特定任务所需的最少信息。

核心特性

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

技术栈

  • Playwright - 浏览器自动化核心框架
  • Node.js - 运行环境
  • JavaScript - 主要开发语言

安装指南

该项目以 Claude Code Plugin 形式提供，支持三种安装方式：

方式一：Plugin 安装（推荐）

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

bash
# 添加仓库为 marketplace
/plugin marketplace add lackeyjb/playwright-skill

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

# 进入目录并运行设置
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
npm run setup

方式二：独立 Skill 安装

全局安装（所有项目可用）：

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

# 复制 skill 文件夹到全局目录
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

项目级安装：

bash
# 克隆到临时位置
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

方式三：下载 Release

  1. 从 GitHub Releases 下载最新版本
  2. 解压并复制 skills/playwright-skill/ 文件夹到目标位置
  3. 进入目录运行 npm run setup

验证安装

运行 /help 确认 Skill 已加载，然后让 Claude 执行简单的浏览器任务如 "Test if google.com loads"。

快速开始

安装完成后，直接告诉 Claude 需要测试或自动化的浏览器任务即可。Claude 会自动编写 Playwright 代码、执行并返回结果（包含截图和控制台输出）。

使用示例

测试任意页面

text
"Test the homepage"
"Check if the contact form works"
"Verify the signup flow"

视觉测试

text
"Take screenshots of the dashboard in mobile and desktop"
"Test responsive design across different viewports"

交互测试

text
"Fill out the registration form and submit it"
"Click through the main navigation"
"Test the search functionality"

验证测试

text
"Check for broken links"
"Verify all images load"
"Test form validation"

工作原理

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

配置选项

默认设置：

配置项默认值说明
Headlessfalse浏览器默认可见
Slow Motion100ms操作间隔，便于观察
Timeout30s超时时间
Screenshots/tmp/截图保存路径

项目结构

text
playwright-skill/
├── .claude-plugin/          # 插件元数据
│   ├── plugin.json          # 分发用插件信息
│   └── marketplace.json     # 市场配置
├── skills/
│   └── playwright-skill/    # 实际 Skill（Claude 发现此目录）
│       ├── SKILL.md         # Claude 读取的说明
│       ├── run.js           # 通用执行器
│       ├── package.json     # 依赖和脚本
│       └── lib/
│           └── helpers.js   # 可选工具函数
│       └── API_REFERENCE.md # 完整 Playwright API 参考

高级用法

自定义 HTTP 头部

支持设置自定义请求头进行测试：

javascript
{
  headers: {
    'User-Agent': 'Custom Agent',
    'Authorization': 'Bearer token'
  }
}

依赖项

  • Node.js >= 18
  • Playwright 浏览器（Chromium、Firefox、WebKit）

故障排除

  • 浏览器未打开：检查 Playwright 浏览器是否已安装（运行 npx playwright install）
  • 模块解析错误：确保在 Skill 目录内运行 npm run setup
  • 权限问题：某些系统可能需要 sudo 运行浏览器安装

相关资源

许可证

MIT License

Skills
上一篇

Kimi Code CLI：Moonshot AI 开源的终端 AI 智能体工具

下一篇

playwright-skill：Claude Code 浏览器自动化 Skill

分享: