广西网站设计：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /a8296865664f.html
📄
广西网站设计：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：把组件从“页面里长什么样”改成“在什么条件下必须输出什么结果”，用同一份数据分别喂给两个页面，比较渲染结果与交互结果，而不是比较截图好不好看。缺少完整数据或权限时，仍然可以构造最小验收样例，但只能证明该条件下的表现，不能推出全站一致。
先分清是组件问题还是页面条件问题
同一组件在两个页面表现不同，常见原因有三类：页面传入的数据结构不同、页面所处的布局容器不同、页面加载顺序或权限状态不同。验收样例要能区分这三类，而不是笼统地记为“显示异常”。
- 数据差异：一个页面传的是完整对象，另一个页面缺字段或字段为空。
- 容器差异：父级宽度、栅格列数、是否在弹层或侧栏中。
- 状态差异：登录与未登录、首屏与异步加载后、有无缓存。
可执行动作：打开两个页面的开发者工具，分别记录该组件接收到的数据字段、父级容器宽度和初始状态。结果会影响下一步——如果字段不同，验收样例应固定数据结构；如果容器不同，样例应固定视口与父级宽度。
把现象转成可复现的最小样例
不要直接复制整页 HTML。先抽出组件本身及其直接父级，构造一个只含必要样式的静态页，再把两个页面的真实数据各存一份作为输入。假设某列表组件在列表页正常、在详情页侧栏错位，最小样例可以写成：
- 固定视口宽度为 375px 与 1280px 两档。
- 准备两份数据：一份字段完整，一份缺少摘要字段。
- 分别放入宽度 100% 与固定 280px 的父容器。
- 记录组件高度、文字截断位置、点击区域是否可点。
这样得到的是四组对照，而不是一张截图。哪一组复现了问题，就说明该条件是触发因素；四组都正常，则问题更可能来自页面其他脚本或样式覆盖。
验收样例要写清输入、动作和可观察结果
一个可执行的验收样例至少包含三行：输入是什么、执行什么动作、观察到什么算通过。例如：
- 输入：字段完整的数据，父容器 280px，视口 375px。
- 动作：点击组件内的主按钮，等待异步结果返回。
- 结果：按钮进入加载态，返回后文字不换行溢出，点击区域高度不小于可点最小值。
把这三行分别套到两个页面上，就能判断差异出在输入、动作还是结果。若某一页面无法取得真实数据，可先用同结构的占位数据，但要在样例中注明“占位数据，仅验证布局与交互，不验证真实内容长度”。
缺少权限或数据时能做什么、不能推出什么
没有后台权限时，仍可以从前台页面抓取已渲染的 DOM 和已加载的样式，构造静态样例；没有完整数据时，可以按字段类型构造等长占位内容，验证换行与溢出。这两步能确认布局与交互层面的差异。
但不能由此推出：所有账号下表现一致、异步接口返回后仍正常、其他分辨率下无问题。请求量或抓取量归零也不能单独证明组件处理正确，它还可能来自缓存、权限拦截或页面未触发。要得到更强结论，需要补上登录态、真实字段长度和至少两档视口的对照。
把样例沉淀成下次可复用的检查项
每次定位完差异，把触发条件写回组件的验收项，而不是只修当前页面。可复用的检查项包括：组件在最小宽度父容器中的表现、字段缺失时的降级文案、异步返回前后的高度变化、以及点击区域是否随容器缩放。下次再遇到同一组件在不同页面表现不同，先用这套样例跑一遍，能快速判断是新条件还是旧问题回归。
