当前 Coding Agent 修改前端代码的流程:
描述问题
=> Agent 阅读代码
=> 修改代码
=> 运行 TS 检查, Test, Lint, Build等
=> Agent 反馈任务完成
一段代码可以通过检查, 但是页面有下面的问题等
所以要检查真实浏览器中的状态.
Codex中的Browser, Chrome, Playwright分别是什么?
Codex的内置浏览器能力, 独立浏览器状态, 没有登录状态和Cookie
让Codex操作用户的Chrome环境
浏览器的遥控器, 可以浏览器窗口展示, 也可以无后台界面运行
可以通过脚本操控浏览器, 也可以使用一些Test的断言方法, 调用一些测试工具比如Preformence
| 能力 | Codex Browser | Playwright |
|---|---|---|
| 打开页面 | 可以 | 可以 |
| 点击、输入 | 可以 | 可以 |
| 视觉查看页面 | 强 | 主要依靠截图和 DOM |
| 临时探索问题 | 适合 | 可以，但相对重 |
| 固定操作步骤 | 不一定稳定重复 | 非常适合 |
| 明确断言结果 | 主要由 Agent 判断 | 使用代码断言 |
| 每次重复执行 | 不一定完全相同 | 相同脚本重复执行 |
| 接入 CI | 不适合 | 适合 |
| 防止以后回归 | 较弱 | 强 |
有了浏览器的工具, 但Agent完成后, 可能会自动检查下, 但可能是简单看一眼
打开页面 => 看一眼 => 页面能过显示 => 宣布完成
没有检查前面说的那些问题.
检查什么, 如何判断, Agent何时结束工具, 都需要咱们人工定义
普通的UI修改, 自检流程
页面的路由, 测试账号数据, 本地服务如何启动
页面：/orders/create
视口：1440px 和 390px
操作：填写表单并提交
状态：默认、提交中、失败、成功
页面是否存在溢出、遮挡和明显错位；
按钮、输入框和弹窗能否正常操作；
Loading、Empty、Error、Success 状态是否符合需求；
Console 是否出现新增错误；
必要时检查 Network 请求数量和响应结果。
打开页面
→ 执行场景
→ 发现问题
→ 修改代码
→ 重新打开页面
→ 再次执行场景
→ 确认问题消失
完成代码修改后，请使用 Browser 验证实际页面，不要只运行类型检查和构建。
验证范围：
- 页面：[页面路由]
- 桌面端尺寸：[例如 1440 × 900]
- 移动端尺寸：[例如 390 × 844]
- 核心用户路径：[需要执行的点击、输入和提交操作]
- 页面状态：[默认 / Loading / Empty / Error / Success]
请检查：
1. 页面是否存在横向滚动、遮挡或明显错位；
2. 相关按钮、输入框和弹窗是否可以正常操作；
3. 受影响的页面状态是否正确；
4. Console 是否存在新增错误；
5. 必要时检查 Network 请求数量和响应结果。
发现问题后继续修改代码，并重新执行受影响的验证。
结束时请报告：
1. 实际打开了哪些页面；
2. 执行了哪些用户操作；
3. 发现并修复了什么问题；
4. 如何确认修复已经生效；
5. 哪些内容尚未验证。
问题背景:
桌面端：页面显示正常
390px 移动端：表单宽度超过屏幕，出现横向滚动
普通流程:
Agent 修改样式
→ TypeScript 通过
→ Agent 告知已经修复
加入自检:
Agent 启动项目
→ 使用 Browser 打开页面
→ 切换到 390px
→ 发现横向滚动
→ 检查 DOM 和生效样式
→ 修改固定宽度或布局规则
→ 刷新页面
→ 再次检查 390px 和桌面端
→ 确认页面不再溢出
任务变化:
过去：代码已经修改
现在：页面已经验证
先使用 Browser 探索和修复问题
→ 找到稳定、重要的用户路径
→ 再使用 Playwright 固化为自动化测试
UI 修改完成前，Coding Agent 应：
1. 打开受影响的页面；
2. 检查需求涉及的桌面端和移动端；
3. 执行至少一条核心用户路径；
4. 检查受影响的页面状态；
5. 检查 Console，必要时检查 Network；
6. 修改后重新执行验证；
7. 说明已经验证和没有验证的内容。
需要长期重复执行的核心流程，再补充 Playwright 测试。
怎样把浏览器检查变成 UI 任务固定的完成条件？
对于前端 Coding Agent，一次完整的任务不应该在代码写完时停止，而应该在检查循环完成后停止.
新的完成标准: 不是代码已经修改，而是页面已经验证。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。