让 Codex 改界面，如何留下一组可比的修改前后截图

让 Codex 改界面后，修改前后截图只有在视口、页面状态、字体和时点一致时才有比较价值。本文给出视觉验收协议，不介绍图片输入开关或重复快照工具参数表。截图负责保存某个时刻的可见事实，交互行为仍要单独验证。

开始改之前先冻结拍摄条件

为目标页面建立一张拍摄卡，写页面地址、浏览器和系统、视口尺寸、设备缩放、语言、时区、主题、登录状态及合成数据版本。动态时间改成固定测试时钟，随机头像和远程图片改成稳定夹具。涉及用户信息时用合成账户，不把线上页面截图当作方便的测试数据。

条件	合成示例	修改后要求
页面	/demo/orders	相同路由与查询参数
视口	1280 × 800	保持一致
状态	搜索词为空，第二项展开	保持一致
字体	本地已加载字体	等待加载完成
数据	orders-demo-v1	同一份输入
拍摄范围	目标表单区域	同一裁切区域

这些尺寸只是演示，不是所有项目都应采用的基准。响应式页面应选真实需要支持的几个宽度，每个宽度各有一组前后记录，不能拿桌面截图与手机截图直接比较。

拍摄时点要绑定页面条件

不要简单等待固定几秒就截图。先等待目标元素、请求结果或明确的就绪标志，再等待字体与图片完成。关闭或固定动画，折叠与展开状态用实际操作建立。仅等待网络空闲可能遇到长连接，不能适用于每个页面。

如果使用 Playwright，可把登录、数据注入和操作步骤写成可重复的测试夹具。官方指出截图会受到运行环境影响，因此同一套基线应尽量在同样系统、浏览器与渲染环境中比较。本文没有执行产品截图测试，拍摄卡是供实际项目运行的协议。

差异需要解释成用户能察觉的变化

不要把“像素不同”直接当作错误。检查差异是预期的间距、颜色和排版变化，还是文字被截断、控件移位、错误提示消失。对于时间戳等不得不变化的区域，可以明确标注遮罩范围，但遮罩不能盖住任务要修改的核心控件。

评审记录至少包含前图、后图、差异位置与结论。文件名使用场景编号和宽度，例如 S02-empty-1280-before.png；不要只用 new.png。同一张截图含多个状态时，拆成独立场景更容易解释失败。

加一组行为检查才算完整验收

界面看起来对了，还需验证键盘焦点、提交动作、错误提示、加载状态和禁用状态。比如调整登录表单时，截图可检查按钮位置，不能证明空密码被拦截。建立“场景—操作—预期—结果”表，明确哪些只做视觉检查，哪些已执行交互。

生成截图后核对是否有浏览器错误页、占位骨架或字体回退。更新基线之前人工阅读差异，不能把整批新图直接接受；否则回归工具会把错误外观变成新的正确答案。

常见问题

分辨率相同就可比较吗？ 还需要页面状态、缩放、字体和环境等条件一致。

全页截图比区域截图更好吗？ 全页适合整体布局，区域适合控件细节；应按验收目标选择并保持一致。

截图差异为零能证明功能没问题吗？ 不能。隐藏逻辑、数据写入和交互分支需要行为测试。

继续处理相关问题

相关入口：Codex 会话管理。

官方依据与核对日期

核对日：2026-10-23。Playwright 视觉比较：视觉快照受运行环境影响，基线比较应控制环境。文中的流程、阈值和合成数据属于工程示例，不能代替当前账号、文件或运行环境的验收。