Vibe Coding 浏览器反馈环：用 Playwright 核对真实交互现场

AI 修改完页面后常用三种弱证据收尾：组件代码能编译、目标 URL 返回 200、HTML 中能搜到按钮文本。真实用户仍可能遇到透明遮罩挡住点击、客户端导航丢失状态、请求返回 401、按钮在窄屏跑出视口，或点击后只有控制台异常。浏览器不是最终截图生成器，而是把这些运行时事实返回给下一轮实现的观测工具。

本文不重写 E2E 测试实战：Playwright 的框架入门。Vibe Coding 浏览器反馈环聚焦开发中的短循环：固定一个用户任务，执行真实动作，同时读取 DOM、URL、网络、控制台和像素层信号，再用差异更新假设。

把场景固定成用户结果

不要从“打开首页看看”开始。写明入口状态、身份、数据夹具、viewport、操作步骤和唯一完成事件。例如匿名用户访问受保护设置页，登录后回到原路径，表单值仍在，外站 return URL 被拒绝。加载、空、错误和无权限分支来自UI 状态矩阵，不能只观察 happy path。

scenario: login-return-path
viewport: 390x844
entry: /zh/settings/profile
identity: signed-out fixture
actions:
  - activate 登录
  - complete local test sign-in
terminal:
  - url is /zh/settings/profile
  - profile heading visible
negative:
  - no request to external origin

每轮只改变一个条件。桌面和移动差异很大时分成两个场景，不要在一次失败里同时猜 CSS、认证和数据问题。测试数据必须可重建；使用个人账号和生产页面既不稳定，也会把真实数据带入 trace。

用面向用户的定位器行动

Playwright locators 会在每次动作时重新解析目标，官方建议优先使用 role、label、text、test id 等接近用户和明确合同的定位方式。不要把长 CSS 层级或 nth(2) 当稳定入口；它们可能在页面重排后点到另一个元素，却仍返回成功。

动作前无需人工堆叠固定 sleep。Playwright 对 click 等动作执行可见、稳定、接收事件和 enabled 等 actionability 检查，并自动等待到超时。若超时，应读取是哪项条件未满足，而不是先把 timeout 从 5 秒改成 60 秒。强制点击会绕过部分检查，除非场景本来就是验证被覆盖元素，否则会把真实可用性问题藏掉。

同时观察五个信号面

第一层是语义 DOM：role、accessible name、可见文本、焦点和表单值。第二层是导航：最终 URL、history 行为、刷新与直接加载。第三层是网络：请求方法、状态、重定向和响应是否来自预期服务。第四层是运行错误：console error、page error 和失败请求。第五层才是截图与布局。

单一信号容易误判。按钮可见不代表可点；请求 200 不代表页面消费了正确字段；截图相似不代表键盘焦点可达。视觉回归测试适合稳定基线的像素差异，本反馈环则先用语义和行为定位原因，再把需要长期保护的视觉结果升级为回归用例。

直接加载和客户端导航要分别检查。很多前端问题只在 hydration、缓存状态或路由切换后出现；刷新成功不能证明从列表点进详情也成功，反之亦然。对多语言或鉴权路由，还应检查返回路径、locale 和 query 是否在跳转中保持。

失败时保存可重放现场

Trace Viewer 能查看动作、DOM snapshot、网络、console 和源码定位，适合回答“点击前后浏览器看见什么”。Trace 不是越大越好：只在受控测试数据上采集，避免把 cookie、token 和个人正文带入制品；失败重试也要区分 attempt，不能用第二次偶然通过覆盖第一次异常。

调试复现证据包可保存场景、基线和失败制品。反馈环再从 trace 提出最小假设，例如“按钮被 loading overlay 持续拦截”，然后选择能区分原因的下一动作：核对 pending 请求、组件状态或取消逻辑，而不是同时重写样式和请求层。

截图审阅还要覆盖稳定尺寸。固定 viewport、字体和动画条件，等待真正的页面终态而非任意延迟；长文本、错误提示和 loading 文案不能让工具栏或卡片改变固定控件尺寸。视觉结果若需要人工判断，就明确标记，不用像素通过替人决定信息层级是否合理。

把探索转成持久测试

修复后先重放原失败路径，确认相同定位器和输入从失败变为成功；再跑负向双胞胎和邻近 viewport。一次手工式 Playwright 脚本只证明当前现场，关键回归应整理成仓库现有测试风格，并让断言对应用户结果，而不是只断言 selector 存在。

完成标准是用户可从真实入口抵达终态，网络和控制台没有未解释异常，直接加载与客户端导航按合同工作，窄屏与键盘路径不被遮挡。浏览器反馈让 Agent 看见运行时事实，但最终是否接受仍由任务验收决定。

延伸阅读

• E2E 测试实战：Playwright
• UI 状态矩阵
• 视觉回归测试
• 调试复现证据包