【AI技术探索】mcp推荐-网页项目浏览器自动测试工具

hlx

Playwright Skill for Claude Code http://cdn.u1.huluxia.com/g4/M01/90/07/rBAAdmpKZDSAF4EXAAM2wfekXBw126.jpg,2848,1408—— 通用浏览器自动化技能让 Claude 能够即时编写和执行任何 Playwright 自动化任务

——从简单的页面测试到复杂的多步骤流程。以 Claude Code 插件的形式打包，便于安装和分发。

【为什么需要这个MCP】
Claude 本身是一个文本模型，它不能直接"看到"网页，也不能操作浏览器。在 AI 编程助手的使用场景中，大量任务需要与浏览器交互

——测试页面是否正常渲染、验证登录流程是否可用、确认表单提交后的跳转是否正确、对比不同视口下的响应式布局。没有浏览器自动化能力，这些都只能靠人手动完成。这个技能填补了 AI 编程助手和浏览器之间的最后一道鸿沟。装上它之后，Claude 就长出了"眼睛"和"手"

——它能打开浏览器、点击按钮、填写表单、截图对比、检查控制台报错，然后把结果带回给开发者。传统的浏览器自动化方案有两个痛点：

一是需要提前写好脚本，面对临时需求不够灵活；

二是配置复杂，Chromedriver 版本匹配、模块路径解析等坑很多。http://cdn.u1.huluxia.com/g4/M01/90/07/rBAAdmpKZDWANVDDAARe3XVS44U578.jpg,2840,1461这个技能用一套极简的架构把这些问题都解决了：Claude 当场写代码、通用执行器负责跑、截图和结果直接返回对话。零配置，零脚本模板，说什么做什么。
【核心价值】

一、从"告诉我怎么做"变成"直接帮我做"没有这个技能时，你问 Claude "帮我测一下登录页"，它只能给你一段代码让你自己跑。有了它，Claude 直接打开浏览器跑完，告诉你是通过还是失败，哪里有报错，并附上截图。省掉了"复制代码、打开终端、执行、回来看结果"这一整条链路。

二、实时可见，不是黑盒默认 visible browser 模式，浏览器窗口会真正弹出来，你能亲眼看到自动化在做什么。这不是一个黑盒的后台任务——每一步点击、每一次跳转、每一个表单填充都是透明的。出了问题时，你可以直接观察浏览器窗口来定位，而不需要去翻日志。

三、渐进式加载，不吃上下文SKILL.md 只包含最精简的指令，详细的 Playwright API 参考文档（选择器、网络拦截、认证、可视化回归测试、移动模拟、性能测试、调试方法等）存放在 API_REFERENCE.md 中，只有 Claude 判断确实需要时才会读取。这意味着在绝大多数日常任务中，它几乎不占用上下文窗口，但在真正需要时又能获得完整的 API 能力。

四、通用性强，不是预设模板Claude 会根据你的具体需求实时编写定制代码，而不是从一堆预置脚本里选一个。这意味着你可以用它做任何浏览器自动化的活——测试注册流程、爬取数据、截图对比、性能分析、SEO 检查、可访问性审计，甚至是填一个长表单。没有"不支持"的情况，因为代码是当场写的。

五、与 Claude Code 的插件生态无缝集成作为 Claude Code Plugin 安装后，自动获得版本更新和团队分发能力。Claude 会根据你的需求自动决定何时加载这个技能，不需要手动启用或配置。真正做到了"装上就忘，用时就有"。

六、智能清理，不留痕迹临时文件管理没有竞态条件，每次任务结束后自动清理截图和临时文件，不会在系统里堆积垃圾。对于需要保留的截图，会按时间戳命名保存到指定目录。
【特色功能】
- 任意自动化任务
—— Claude 根据你的具体需求编写定制代码，不限于预构建脚本- 默认使用可见浏览器
—— 实时查看自动化过程（headless: false）- 零模块解析错误
—— 通用执行器（run.js）确保模块访问的正确性- 渐进披露
—— 简明 SKILL.md，仅在需要时加载完整 API 引用- 安全清理
—— 无竞态条件的智能临时文件管理- 综合助手函数 —— 针对常见任务的可选实用工具

【安装方式】
推荐方式：插件安装（支持自动更新和团队分发）   
# 将此仓库添加为 marketplace   
/plugin marketplace add lackeyjb/playwright-skill   
# 安装插件  
  /plugin install playwright-skill@playwright-skill   
# 进入 skill 目录运行安装脚本   
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill   
npm run setup
验证安装：
运行 /help 确认该技能已出现在可用技能列表中。
前置依赖：Node.js。Playwright 和 Chromium 通过 npm run setup 自动安装。

【目录结构说明】http://cdn.u1.huluxia.com/g4/M01/90/07/rBAAdmpKZDWAVzDJAANMA_H26Gc954.jpg,2803,1443playwright-skill/                 插件根目录  
.claude-plugin/   
  plugin.json                   插件元数据（分发用）   
   marketplace.json              Marketplace 配置  skills/    playwright-skill/             实际 skill（Claude 发现的是这个）      SKILL.md                    Claude 读取的核心指令      
run.js                      通用执行器（处理模块解析）      package.json                依赖和安装脚本      
lib/helpers.js              可选工具函数      
API_REFERENCE.md            完整 Playwright API 参考
README.md                       用户文档
CONTRIBUTING.md                 贡献指南
LICENSE                         MIT License

【使用示例】

页面测试：   
"测试首页是否正常加载"
   "检查联系表单能否正常提交"   
"验证注册流程从头到尾是否可用"

视觉测试：
  "在手机和桌面两种视口下对仪表盘截图"  
  "测试不同分辨率下的响应式布局"

交互测试：
"填写注册表单并提交"   
"点击主导航菜单遍历所有链接"   
"测试搜索功能是否返回正确结果"

验证检查：   
"检查所有外链是否有效"   
"验证所有图片是否加载成功"   
"测试表单验证逻辑是否正确触发"
【工作原理】http://cdn.u1.huluxia.com/g4/M01/90/07/rBAAdmpKZDaAORmsAAL8sIwfREA096.jpg,2829,14941. 你描述想要测试或自动化的内容
2. Claude 为这个任务实时编写定制的 Playwright 代码
3. 通用执行器 run.js 以正确的模块解析路径运行代码？
4. 浏览器打开（默认可见模式），自动化开始执行
5. 结果以控制台输出和截图的形式返回给你整个过程在对话中一气呵成，不需要切窗口、不需要手动跑脚本。

【默认配置】
- Headless: false（浏览器可见，除非你明确要求无头模式）
- Slow Motion: 100ms（操作之间有可见的过渡，方便观察）
- Timeout: 30s（单个操作超时时间）
- Screenshots: 保存到系统临时目录（/tmp/）

【高级用法】
Claude 会在需要时自动加载 API_REFERENCE.md，获取以下领域的完整文档：
- 选择器策略（CSS、XPath、文本、角色、测试 ID 等）- 网络请求拦截和 Mock
- 认证流程处理（Cookie、Token、Session）
- 可视化回归测试
- 移动设备模拟
- 性能测试与指标收集
- 调试方法你不需要手动告诉 Claude 怎么用 Playwright
——它自己知道何时去查阅这些文档。

【故障排除】
Q: Playwright 未安装？
A: 进入 skill 目录运行 npm run setup。

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

Q: 浏览器没有打开？
A: 默认是可见模式（headless: false），除非你明确要求了无头模式。检查系统中是否安装了 Chromium。

Q: 需要安装所有浏览器？
A: 从 skill 目录运行 npm run install-all-browsers 安装 Chromium、Firefox、WebKit 全套。