pi-frontend-check
无头测试前端页面，捕获截图与错误
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：pi-frontend-check。 它的用途是：无头测试前端页面，捕获截图与错误 完整的 Skill 内容见：https://321skill.com/skills/pi-frontend-check/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请使用 pi-frontend-check 测试一下本地 localhost:3000 页面的主要交互，并告诉我有没有错误。” 它会启动无头浏览器访问该页面，执行一系列交互，最后返回页面截图以及收集到的所有控制台错误和网络错误，帮助你快速定位问题。
介绍
pi-frontend-check 是一个专为 AI 助手设计的扩展，旨在解决前端开发中自动化审查与测试的难题。它允许开发者在无需人工介入浏览器的情况下，对本地开发服务器上的页面进行功能验证和问题排查。
该扩展通过集成 Playwright Chromium 浏览器，能够自动打开指定的开发服务器页面，模拟用户交互操作，并在此过程中捕获屏幕截图。这些截图可以直接提供给 AI 模型进行分析，帮助理解页面状态。同时，它还会自动收集页面控制台输出的错误、警告信息以及网络请求失败等关键数据。
它非常适合前端开发者、测试工程师以及任何需要频繁验证本地构建产物或开发中页面稳定性的角色。在快速迭代的开发周期中，它能作为一项自动化检查手段，集成到开发工作流或 CI/CD 流程中。
使用时，请确保目标开发服务器已在运行且可访问。由于依赖 Playwright，初次使用可能需要下载浏览器二进制文件。建议将其用于检查页面基本功能、捕获渲染异常或收集运行时错误，但对于复杂的端到端测试场景，可能需要更专业的测试框架。
核心特点
核心区别在于它专为 AI 助手（如 Claude）设计，捕获的截图可直接供模型“看见”并分析，同时将前端错误日志与网络请求异常整合输出，实现了“可视化”与“数据化”审查的结合。
注意事项
不适合用于测试需要复杂用户状态（如登录会话管理）或特定浏览器扩展功能的场景。
常见问题
它能测试生产环境页面吗？
主要设计用于本地开发服务器，但理论上可测试任何可访问的 URL。
需要自己写测试脚本吗？
不需要，它提供了一套预设的检查流程，开箱即用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/pi-frontend-check/raw/index.md 读取 pi-frontend-check 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/pi-frontend-check/raw/index.md（查看排版版本）