Coding Agent 工程化实践《一》 : 前端页面自验实践

一. 背景

当前 Coding Agent 修改前端代码的流程:

描述问题
=> Agent 阅读代码
=> 修改代码
=> 运行 TS 检查, Test, Lint, Build等
=> Agent 反馈任务完成

一段代码可以通过检查, 但是页面有下面的问题等

• 移动端的尺寸可能出现滚动条
• 按钮位置挤压
• 按钮可能被连续点击
• Console出现运行时错误
• 多次请求接口

所以要检查真实浏览器中的状态.

二. Codex具备哪些能力

Codex中的Browser, Chrome, Playwright分别是什么?

Browser

Codex的内置浏览器能力, 独立浏览器状态, 没有登录状态和Cookie

• 打开本地开发服务
• 检查localhost页面的 点击, 输入, 滚动
• 页面渲染还有刷新后的console

Chrome

让Codex操作用户的Chrome环境

• 打开需要登录的页面
• 检查真实Cookie相关的环境
• 需要在Chrome浏览器上装插件

Playwright

浏览器的遥控器, 可以浏览器窗口展示, 也可以无后台界面运行

可以通过脚本操控浏览器, 也可以使用一些Test的断言方法, 调用一些测试工具比如Preformence

能力	Codex Browser	Playwright
打开页面	可以	可以
点击、输入	可以	可以
视觉查看页面	强	主要依靠截图和 DOM
临时探索问题	适合	可以，但相对重
固定操作步骤	不一定稳定重复	非常适合
明确断言结果	主要由 Agent 判断	使用代码断言
每次重复执行	不一定完全相同	相同脚本重复执行
接入 CI	不适合	适合
防止以后回归	较弱	强

三. 真正的问题

有了浏览器的工具, 但Agent完成后, 可能会自动检查下, 但可能是简单看一眼

打开页面 => 看一眼 => 页面能过显示 => 宣布完成

没有检查前面说的那些问题.

检查什么, 如何判断, Agent何时结束工具, 都需要咱们人工定义

四. 一个最小页面自检流程

普通的UI修改, 自检流程

1. 明确验证的页面

页面的路由, 测试账号数据, 本地服务如何启动

2. 明确验证的场景

页面：/orders/create
视口：1440px 和 390px
操作：填写表单并提交
状态：默认、提交中、失败、成功

3. 明确检查项目

页面是否存在溢出、遮挡和明显错位；
按钮、输入框和弹窗能否正常操作；
Loading、Empty、Error、Success 状态是否符合需求；
Console 是否出现新增错误；
必要时检查 Network 请求数量和响应结果。

4. 修改后重新验证

打开页面
→ 执行场景
→ 发现问题
→ 修改代码
→ 重新打开页面
→ 再次执行场景
→ 确认问题消失

五. 可直接复用的Prompt

完成代码修改后，请使用 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 和桌面端
→ 确认页面不再溢出

任务变化:
过去：代码已经修改
现在：页面已经验证

七. 什么时候引入Playwright

先使用 Browser 探索和修复问题
→ 找到稳定、重要的用户路径
→ 再使用 Playwright 固化为自动化测试

八. 建议 UI 任务完成条件

UI 修改完成前，Coding Agent 应：

1. 打开受影响的页面；
2. 检查需求涉及的桌面端和移动端；
3. 执行至少一条核心用户路径；
4. 检查受影响的页面状态；
5. 检查 Console，必要时检查 Network；
6. 修改后重新执行验证；
7. 说明已经验证和没有验证的内容。

需要长期重复执行的核心流程，再补充 Playwright 测试。

九. 总结

怎样把浏览器检查变成 UI 任务固定的完成条件？

对于前端 Coding Agent，一次完整的任务不应该在代码写完时停止，而应该在检查循环完成后停止.

新的完成标准: 不是代码已经修改，而是页面已经验证。

十. 参考资料

• OpenAI 官方文档：《In-app browser – Codex app》
• OpenAI 官方文档：《Codex Chrome extension – Codex app》
• OpenAI 帮助中心：《Using Codex with your ChatGPT plan》