展开本页目录
开始前准备什么
- 下载本题完整练习包，区分待实现 starter 与作者完成 reference。
- 按README准备本题原生依赖；所有输入均为原创或明确标注的本地fixture。
- 本地练习不需要付费模型Key；真实模型调用未执行，MiniLM题另有明确实际推理说明。
- 固定视口字体
- 建立截图基线
- 定位动态区域
- 屏蔽后再比较
- 注入按钮错位
- 读取真实Diff
- 保留窄屏基线
下载本题完整练习工程
原创输入、待完成starter、作者reference及实际运行产物，依README本地准备依赖。
查看启动命令与执行边界
环境要求、具体操作、产物核对与未运行范围。
1. 固定视口字体
页面有静态导出按钮和三张指标卡，右上角头像文字与时间每次变化。先固定浏览器、视口与系统字体，避免环境差异盖过真正的布局问题。
2. 建立截图基线
使用 Playwright Test 的 toHaveScreenshot 建立 expected 基线。首次生成后需人工确认页面正确；自动更新基线不能当作已经消除了回归。
本地启动与复现
text
cd reference
npm install
EXERCISE_URL=http://127.0.0.1:8787 npx playwright test3. 定位动态区域
只定位 .dynamic 这块时间与头像区域。基线和后续截图用同一 mask，按钮、标题与指标卡都保持可比较。
4. 屏蔽后再比较
换一份 seed 和时间重新访问，原生截图断言仍通过，证明动态区域不会造成误报。没有把整页或整个卡片遮住。
5. 注入按钮错位
给导出按钮增加36px水平偏移，再运行相同截图断言。原生测试必须失败；如果依旧通过，说明屏蔽范围或容差过宽。
6. 读取真实Diff
打开生成的 expected、actual、diff 三份图。差异图由 Playwright 真实像素比较产生，可定位按钮偏移，未用手绘色块伪造。
7. 保留窄屏基线
保存桌面与窄屏各自基线，修改后在相同视口复跑。下载包保留原创页、测试和实际 diff；动态 mask 验证的是局部比较，不证明所有浏览器视觉完全一致。
怎样确认已经完成
- 只mask头像/时间，改变动态seed后原生截图比较通过。
- 按钮36px位移仍使比较失败，并生成expected/actual/diff。
- 同视口字体环境复跑，桌面和窄屏各有独立基线。
常见问题
网页每次时间都变，截图回归怎么不天天误报？
只mask实际动态区域，并固定视口字体环境。本文更换时间与头像seed后原生截图断言仍通过。
屏蔽动态内容后，真正的按钮错位还能查出来吗？
能，只要mask没有覆盖按钮。本题给按钮移动36px后原生比较失败并生成真实diff。
哪些部分实际运行，哪些需要独立验证？
Playwright Test真实截图比较验证局部mask稳定，按钮36px位移失败，并产生expected/actual/diff。 目标AI助手账号生成、云平台部署和生产环境不在本次执行范围。