Langfuse 前端浏览器审查工作流：面向 AI Agent 的用户可见变更验收与回归检查

Langfuse 前端浏览器审查工作流面向 AI Agent 的用户可见变更验收与回归检查【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse本指南完整解读 Langfuse 仓库中frontend-browser-review技能当一次改动影响用户在浏览器中看到或操作的内容时如何通过浏览器自动化Cursor Cloud 计算机使用或 Playwright MCP驱动真实页面完成验收、回归检查与最终签署signoff。读完本文你将掌握该工作流的触发条件、测试数据预填充、七步审查循环、输出期望与人工交接约定并能结合仓库源码理解每一步背后的命令与实现。技能定位什么算用户可见的前端变更该技能被设计为 Langfuse 前端改动签署前共享的浏览器审查流程。它的使用场景非常明确当变更影响 UI 行为、布局、样式、导航或浏览器可见的回归且需要在签署signoff前用可用的浏览器自动化进行确认时就应使用此技能。仓库web/AGENTS.md也将其列为前端功能开发流程的一环在签署前使用 Playwright MCP 服务器在真实浏览器中审查受影响的用户流程。具体而言需要驱动浏览器审查的情形包括导航或页面流程的变更或任何跨步骤携带状态的改动布局或响应式行为可能在未知方式下发生回流reflow的改动缺陷修复且失败模式是在浏览器中可见的对大量用户可见工作的最终签署。核心判断标准是结果不确定——当你无法可靠预测改动的视觉效果时就需要真实浏览器验证。何时改用人工交接小改动的两步交接约定技能明确反对对一切改动一律执行自动化。对于小型、自包含、你有信心的视觉改动不需要自动化通过间距调整、颜色 token、标签文本、图标替换这类改动正确的做法是明确说明——告诉开发者你改了什么、以及你没有检查什么及原因让选择透明可见便于对方推翻趁人在场时交接——交接handoff是转交动作不是结束回合的方式。如果旁边没有人能查看而改动又是用户可见的那就自己检查。交接时交付的具体信息包括改动的精确 URL本地端口或 PR 预览地址pr-N.preview.langfuse.com让开发者自己花两秒钟查看一张截图放在 PR 中即可充当证据。这条约定背后是效率权衡让开发者确认一个你本就知道的结果等待成本高于他们亲自查看的成本。审查前先预填充测试数据seed CLI大多数流程只有面对有意义的真实数据才可审查。打开浏览器之前需要用 seed CLI 预填充流程所需的数据——仓库seed-test-data技能维护了一张需求→命令对照表SKILL 中给出的是浏览器审查最常用的四类场景# 复杂观测树v3 v4 事件 pnpm run seed -- trace-tree --observations 5000 --v4 # 重负载会话视图 pnpm run seed -- long-session --traces 300 # 列表/筛选性能 pnpm run seed -- many-traces --count 100000 # 栈行为异常时先跑诊断 pnpm run seed -- doctor几个关键约定每次运行都会打印 UI 深链deep links——打开这些链接而不是手动导航禁止手写 seed 脚本或裸 ClickHouse 插入——seed CLI 统一处理环境加载、预检、ClickHouse/Postgres 写入、回读校验并输出机器可读的 JSON 摘要最后一行 stdout--dry-run可预测写入量而不落数据--json抑制进度日志默认--seed为 42确定性生成相同种子与参数产生相同 id时间戳锚定当前 UTC 日。从源码看seed CLI 位于packages/shared/scripts/seeder/目录cli.ts是入口引导在导入src/server前预检环境变量doctor.ts实现栈检查Postgres、迁移、项目、ClickHouse 及其表与内存压力、Redis、MinIO、web 应用每个失败项都附带精确的修复命令。所有场景都做 ClickHouseuniqExact回读校验任何键不符即非零退出。设计动机记录在packages/shared/scripts/seeder/README.md编码 Agent 和开发者都曾被临时 ts-node 脚本和 Docker/ClickHouse 调试循环所困CLI 将其收敛为一行命令并保证种子数据具备瀑布式时间包含、真实 prompt 外键、确定性重跑等像生产数据一样的完整性。七步审查循环技能规定了标准审查循环从启动应用到产出结论共七步优先使用现成的 Cursor Cloud Compose 应用否则用pnpm run dev:web启动应用若本地已有服务在跑则跳过安装 Chromium若机器尚未配置 Playwright运行pnpm run playwright:install打开主要变更流程使用 Cursor 计算机使用或 Playwright MCP 服务器打开受影响的流程当流程需要种子数据时使用 seed CLI 的深链演练主路径走一遍该变更影响的主要 happy path检查明显的视觉回归具体清单包括布局或间距破坏banner 重叠或视口锚定问题缺失的加载态、空态或错误态窄宽度下的响应式行为破坏页面实质变化时对照验证检查最终 UI 状态并与任务预期行为或现有模式对比会话失败排查Playwright MCP 会话失败时检查/tmp/playwright-mcpCursor Cloud 下检查运行的浏览器产物与 Compose 日志。启动与安装命令的仓库依据上述命令直接映射到仓库脚本。根目录package.json定义pnpm run dev:web→turbo run dev --filterweb即经 Turborepo 启动 web 包pnpm run playwright:install→pnpm --filter web exec playwright install chromium。web包自身在web/package.json提供devdotenv -e ../.env -- next dev、test:e2edotenv -e ../.env.test -e ../.env -- playwright test等脚本。Playwright 配置见web/playwright.config.tsbaseURL 为http://localhost:3000测试超时 180s、断言超时 60s、点击/填充超时 10s截图仅在失败时保留、trace 在失败时保留webServer在 CI 下用npm run start、本地用npm run dev本地允许复用已有服务reuseExistingServer: !process.env.CI——这正是循环第 1 步已有本地服务则跳过启动的配置来源。浏览器驱动方式的仓库依据web/AGENTS.md的 Agent browser loop 与 Quick Commands 两个小节与该技能互为补充本地 Agent 环境使用工作区playwrightMCP 服务器来自.mcp.json、.cursor/mcp.json或.vscode/mcp.json浏览器会话失败时检查/tmp/playwright-mcp下的 trace 与产物。注意web/AGENTS.md还记录了 E2E 与单测共享同一端口的坑服务端测试需要 web 服务器服务于测试数据库通过web/vitest.config.mts加载../.env.test而pnpm run dev:web只加载.env——两者指向不同数据库直接混用会导致测试创建的数据找不到。审查工作流之所以单独使用dev:web加 seed CLI正是为了在隔离的演示数据上验证。输出期望五要素报告审查结束后报告必须包含五个要素逐条对应技能原文审查了哪个流程主流程是否工作正常任何可见回归或后续风险若审查被阻塞——精确说明是什么阻止了浏览器验证人工交接场景预览或沙箱 URL 加上精确的点击路径步骤以及发布在 PR 上的修复证据截图、短视频或前后对比——而不是一长段仅供 Agent 阅读的说明也不只是聊天里的几句话。第五点的意图很关键交接给人类时证据必须沉淀到 PR 上让评审者在异步协作中直接看到修复结果而不是依赖对话记录。范围边界补充而非替代技能在 Scope Notes 中划定了三条边界避免被误用为通用前端编码指南该技能补充而非替代定向测试与 lint——它是浏览器签署工作流不负责编码质量把关实现细节遵循web/AGENTS.md与各包级技能——例如前端大特性架构frontend-large-feature-architecture、React effect 审计refactor-react-effects、组件 Story 规范storybook等作为浏览器签署browser-signoff工作流使用不要当作通用前端编码指南。从仓库整体视角看该技能是 Langfuse 前端质量闭环中的一环web/AGENTS.md将其列入 Package-Local Skills 并声明在实质性前端重构前先读这些技能同时前端功能开发 Playbook 的第 5 步明确要求签署前用 Playwright MCP 在真实浏览器中审查受影响用户流程。也就是说浏览器审查不是可选项而是进入签署阶段的必经关口——而本文所述的预填充数据、七步循环与五要素报告正是这一关口被可靠、可复现地执行的标准方法。【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考