【Vercel实用Skill】dogfood 技能

系统性地探索和测试Web应用程序发现bug、UX问题和其他问题。生成包含完整复现证据的结构化报告——每个问题都有分步截图、复现视频和详细的复现步骤——以便将发现直接移交给相关团队。技能概述dogfood 技能是一个全面的Web应用测试和质量保证工具。它通过系统性的探索方法模拟真实用户行为来发现应用程序中的问题。该技能不仅发现问题更重要的是为每个发现提供完整的复现证据包括视频录制、分步截图和详细的操作步骤确保问题可以被准确理解和修复。下载地址https://github.com/vercel-labs/agent-browser主要功能系统性探索按照结构化方法遍历应用程序的各个部分问题发现识别bug、UX问题、视觉缺陷、控制台错误等完整证据为每个问题提供视频录制和分步截图详细复现步骤记录每个问题的精确复现流程结构化报告生成包含摘要和详细信息的Markdown报告严重性分类按严重程度对问题进行分类Critical、High、Medium、Low认证支持处理需要登录的应用程序测试会话管理保存和恢复认证状态控制台监控检测JavaScript错误和网络错误边缘案例测试测试空状态、错误处理、边界输入触发条件在以下情况下应该调用此技能用户要求dogfood某个应用用户要求QA或质量保证测试用户要求探索性测试或exploratory test用户要求发现问题或find issues用户要求bug hunt或bug搜索用户要求测试这个应用/网站/平台用户要求审查Web应用程序的质量工作流程完整测试流程dogfood技能遵循以下六个步骤初始化设置会话、输出目录、报告文件认证如需要则登录保存状态定位导航到起点拍摄初始快照探索系统性地访问页面和测试功能记录发现问题时立即截图和录制总结更新摘要计数关闭会话处理过程1. 初始化创建输出目录并复制报告模板mkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videos cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.md启动命名会话agent-browser --session {SESSION} open {TARGET_URL} agent-browser --session {SESSION} wait --load networkidle2. 认证如果应用需要登录agent-browser --session {SESSION} snapshot -i # 识别登录表单引用填写凭据 agent-browser --session {SESSION} fill e1 {EMAIL} agent-browser --session {SESSION} fill e2 {PASSWORD} agent-browser --session {SESSION} click e3 agent-browser --session {SESSION} wait --load networkidle登录成功后保存状态agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.json3. 定位拍摄初始注释截图和快照以了解应用结构agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png agent-browser --session {SESSION} snapshot -i4. 探索策略 - 系统性地遍历应用从主导航开始访问每个顶级部分在每个部分内测试交互元素点击按钮、填写表单、打开下拉菜单/模态框检查边缘案例空状态、错误处理、边界输入尝试现实的端到端工作流创建、编辑、删除流程定期检查浏览器控制台的错误在每个页面agent-browser --session {SESSION} snapshot -i agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/{page-name}.png agent-browser --session {SESSION} errors agent-browser --session {SESSION} console5. 记录问题复现优先步骤4和5同时进行——在单次遍历中探索和记录。发现问题后立即停止探索并记录然后再继续。不要先探索整个应用再记录。交互/行为问题功能、UX、操作时的控制台错误这些问题需要用户交互才能复现——使用完整的复现流程和视频# 1. 在复现前启动录制视频agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm# 2. 以人类节奏执行步骤每步之间暂停1-2秒agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-1.pngsleep 1# 执行操作点击、填充等sleep 1agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-2.png# 3. 捕获损坏状态sleep 2agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png# 4. 停止视频agent-browser --session {SESSION} record stop静态/加载时可见的问题拼写错误、占位符文本、截断文本、错位、加载时的控制台错误这些问题无需交互即可见——单个注释截图即可无需视频agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.png6. 总结目标是找到5-10个记录完善的问题然后总结。证据的深度比总数更重要——5个有完整复现的问题胜过20个描述模糊的问题。探索后重新阅读报告并更新摘要严重性计数使其与实际问题匹配关闭会话agent-browser --session {SESSION} close输入要求使用此技能时用户需要提供目标URL必需要测试的Web应用地址如vercel.com或http://localhost:3000会话名称可选默认为域名slug化如vercel.com-vercel-com输出目录可选默认为./dogfood-output/范围可选默认为完整应用可指定如专注于计费页面认证可选如需要登录提供凭据输出说明技能将提供Markdown报告包含所有发现的结构化报告文件截图每个问题的分步截图和注释截图视频交互问题的复现视频WebM格式认证状态保存的登录状态文件如需要摘要统计按严重性分类的问题总数使用示例示例1快速开始如果用户说dogfood vercel.com立即使用默认值开始# 使用默认设置mkdir -p ./dogfood-output/screenshots ./dogfood-output/videosagent-browser --session vercel-com open https://vercel.comagent-browser --session vercel-com wait --load networkidleagent-browser --session vercel-com screenshot --annotate ./dogfood-output/screenshots/initial.png# ... 开始探索 ...示例2需要认证的应用# 初始化mkdir -p ./qa-output/screenshots ./qa-output/videosagent-browser --session myapp open https://app.example.com# 登录agent-browser --session myapp snapshot -iagent-browser --session myapp fill e1 userexample.comagent-browser --session myapp fill e2 password123agent-browser --session myapp click e3agent-browser --session myapp wait --load networkidle# 保存认证状态agent-browser --session myapp state save ./qa-output/auth-state.json# 开始探索agent-browser --session myapp screenshot --annotate ./qa-output/screenshots/initial.png# ... 继续探索 ...示例3记录交互问题# 发现问题点击提交按钮后显示错误消息agent-browser --session myapp record start ./qa-output/videos/issue-001-repro.webm# 步骤1填写表单agent-browser --session myapp screenshot ./qa-output/screenshots/issue-001-step-1.pngsleep 1agent-browser --session myapp fill e5 test inputsleep 1# 步骤2点击提交agent-browser --session myapp screenshot ./qa-output/screenshots/issue-001-step-2.pngsleep 1agent-browser --session myapp click e6sleep 1# 步骤3捕获错误agent-browser --session myapp screenshot ./qa-output/screenshots/issue-001-step-3.pngsleep 2# 最终结果agent-browser --session myapp screenshot --annotate ./qa-output/screenshots/issue-001-result.pngagent-browser --session myapp record stop示例4记录静态问题# 发现问题页面上的拼写错误# 只需要一个注释截图无需视频agent-browser --session myapp screenshot --annotate ./qa-output/screenshots/issue-002.png# 在报告中写入简要描述将复现视频设为N/A指导原则复现是一切每个问题都需要证据——但要匹配证据与问题类型。交互bug需要视频和分步截图。静态bug拼写错误、占位符文本、加载时可见的视觉故障只需要一个注释截图。不要为静态问题录制视频拼写错误或截断文本不需要视频。将视频留给涉及用户交互、时序或状态变化的问题。为交互问题截图每一步捕获之前、操作和之后——以便某人可以看到完整序列。编写映射到截图的复现步骤报告中的每个编号步骤都应引用其对应的截图。读者应该能够在不接触浏览器的情况下视觉上跟随步骤。彻底但使用判断你不是在遵循测试脚本——你在像真实用户一样探索。如果感觉不对调查它。增量编写发现发现问题时立即追加到报告。如果会话中断发现会被保留。永远不要在最后批量处理所有问题。永不删除输出文件不要在会话中删除截图、视频或报告。不要关闭会话并重新启动。向前工作不要向后。永不读取目标应用的源代码你作为用户测试而不是审计代码。不要读取应用的HTML、JS或配置文件。所有发现必须来自你在浏览器中观察到的内容。检查控制台许多问题在UI中不可见但显示为JS错误或失败的请求。像用户一样测试而不是机器人尝试常见的端到端工作流。点击真实用户会点击的东西。输入真实的数据。像人类一样打字在视频录制期间填写表单字段时使用type而不是fill——它逐字符输入。仅在视频录制之外且速度重要时使用fill。为人类调整复现视频节奏在操作之间添加sleep 1在最终结果截图前添加sleep 2。视频应该可以以1倍速观看——审查报告的人需要看到发生了什么而不是瞬间状态变化的模糊。高效使用命令当它们独立时在单个shell调用中批量多个agent-browser命令例如agent-browser ... screenshot ... agent-browser ... console。使用agent-browser --session {SESSION} scroll down 300进行滚动——不要使用key或evaluate来滚动。参数配置参数默认值示例覆盖目标URL必需vercel.com,http://localhost:3000会话名称域名slug化如vercel.com-vercel-com--session my-session输出目录./dogfood-output/Output directory: /tmp/qa范围完整应用Focus on the billing page认证无Sign in to userexample.com参考文档参考文档何时阅读references/issue-taxonomy.md会话开始——校准要查找的内容、严重性级别、探索清单模板文件模板用途templates/dogfood-report-template.md复制到输出目录作为报告文件重要提示直接使用agent-browser始终使用agent-browser直接调用——永远不要npx agent-browser。直接二进制使用快速的Rust客户端。npx通过Node.js路由速度明显较慢。OTP/邮件代码对于需要OTP或邮件代码的认证询问用户等待他们的响应然后输入代码。使用判断你对深入程度使用判断。在核心功能上花费更多时间在边缘页面上花费更少。如果你在一个区域发现问题集群深入调查。