每天一个codex技巧-前端改完让 Browser Use 验真

前端任务里最危险的不是报错。

报错至少会提醒你：这里坏了。

更危险的是“看起来完成了”：代码改了，构建过了，测试没红，Codex 也说 done。结果你打开页面才发现，按钮换行了，弹窗底部被遮住了，移动端出现横向滚动。

这种错位最烦人的地方是：设计稿看起来很稳，真实浏览器一跑，问题全冒出来。

所以我现在给 Codex 做前端任务时，最后都会加一句：

改完以后，请用 Browser Use 打开真实页面验收。

这句话不是仪式感，它是在逼 Codex 从“代码视角”切到“用户视角”。

不要只让它跑测试

很多人会这么说：

帮我改一下这个页面，改完跑一下测试。

这句话只能保证一件事：代码层面尽量别炸。

但前端真正容易漏的是这些：

• 页面能打开，但关键按钮点了没反应。
• 文案变长后，把按钮挤成两行。
• 弹窗在桌面端正常，移动端底部按钮看不见。
• loading、empty、error 状态没看。
• 控制台有报错，但测试没覆盖到。

这些问题不打开页面，很难发现。

更好的说法

我会把“验真”要求直接写进任务里：

这是一个前端任务。
实现完成后，请启动本地 dev server，并用 Browser Use 打开页面验收。

验收目标：
- 页面路由：<填实际页面路径>
- 核心路径：<例如：打开页面 -> 点击筛选 -> 输入条件 -> 查询 -> 重置>
- 需要检查的视口：桌面端和移动端

请检查：
1. 页面是否能正常打开
2. 核心路径是否能完整点击
3. 是否有遮挡、溢出、横向滚动、按钮换行
4. loading / empty / error 状态是否明显异常
5. 控制台是否有明显错误

如果需要登录、提交真实数据、访问生产环境，或要扩大修改范围，请先停下来问我。

这里最重要的是 <页面路由> 和 <核心路径>。

不要只说“帮我验一下页面”。你要告诉 Codex：打开哪里，点什么，看到什么才算通过。

让它交一份验收记录

我不太相信一句“页面正常”。

我更希望 Codex 最后这样回：

Browser Use 验收记录：

- 本地地址：http://localhost:3000/xxx
- 执行路径：打开页面 -> 点击 A -> 输入 B -> 点击 C
- 桌面端：无明显遮挡、溢出、按钮换行
- 移动端：无横向滚动，底部操作区可见
- 控制台：未发现明显错误
- 未覆盖风险：没有真实账号，未验证生产接口数据

这才叫验收。

这一步的价值，是把“我觉得改完了”，拉回到“我真的打开、点击、看过了”。

如果它只回：

已完成，页面显示正常。

你就继续追问：

你打开的具体 URL 是什么？
你实际点击了哪些路径？
你检查了哪些视口？
控制台有没有错误？
有没有没覆盖到的风险？

前端验收最怕的不是失败，而是没看就说通过。

使用边界

Browser Use 适合验本地页面、mock 数据、可回滚交互。

但这些情况不要让它直接继续：

• 需要真实账号登录。
• 点击会提交真实表单、发消息、下单或修改线上数据。
• 页面依赖客户环境、生产接口或敏感数据。
• Codex 判断必须大范围重构才能修布局。

一句话：本地可回滚，让它验；涉及真实用户和线上状态，先问人。

直接复制

这是一个前端任务。
实现完成后，请启动本地 dev server，并用 Browser Use 打开页面验收。

请按下面格式输出验收记录：

- 本地地址：
- 实际点击路径：
- 桌面端观察：
- 移动端观察：
- 控制台错误：
- 未覆盖风险：

检查重点：
1. 页面是否能正常打开
2. 核心路径是否能完整点击
3. 是否有遮挡、溢出、横向滚动、按钮换行
4. loading / empty / error 状态是否明显异常

如果需要登录、提交真实数据、访问生产环境，或要扩大修改范围，请先停下来问我。