黄石网站开发，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /1285fe755974.html
📄
黄石网站开发，同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为“组件本身”写一份通用验收样例，而要按组件所处的页面上下文分别构造。做法是先判断差异来自数据形态还是布局容器，再决定是抽公共基线样例，还是给每个页面单独建样例。判断错方向，后续修复会落在错误的位置。
先分清两种差异来源，再决定样例粒度
同一组件在不同页面表现不同，通常只有两类原因。第一类是数据形态差异：字段长度、条数、是否为空、图片比例不同，组件逻辑本身没问题，只是没覆盖这些输入。第二类是布局容器差异：父级宽度、栅格列数、外边距、定位方式不同，组件在窄容器里换行或溢出。两类原因的验收样例写法完全相反。
可以用一个假设例子区分：某列表组件在栏目页正常，在详情页侧栏错位。若把侧栏宽度改成与栏目页一致后错位消失，说明是容器差异；若宽度不变、只把数据换成超长标题才错位，说明是数据差异。这个对照动作只需改一个变量，就能把方向定下来，避免同时改样式和数据导致无法归因。
数据形态差异：抽公共基线，加边界样例
当差异由数据引起时，合理做法是建一份跨页面共用的基线样例集，再补边界值。基线保证各页面调用同一组件时输入一致，边界值负责暴露极端情况。这样验收样例数量可控，且能复用到后续页面。
- 最短与最长文本：标题、摘要、按钮文案各准备一组极短和极长值。
- 数量边界：0 条、1 条、刚好填满一行、超出容器高度需要滚动。
- 可选字段缺失：头像、标签、副标题为空时占位是否塌陷。
- 媒体比例：宽图、竖图、方图各一，观察裁切与留白。
实施动作：把上述样例写成固定输入，逐个页面渲染同一组件，记录每个输入下的实际表现。结果会直接告诉你，是组件需要改逻辑，还是某个页面传参不规范。如果只有个别页面异常，优先检查该页面的数据映射，而不是改组件。
容器差异：按页面单独建样例，锁定宽度与栅格
当差异由布局引起时，公共基线样例帮助有限，因为问题出在父级约束。此时应为每个承载该组件的页面单独建样例，把容器条件写进验收项：可用宽度区间、所在栅格列数、相邻元素占位、是否处于固定或粘性定位区域。
假设某卡片组件在主内容区为三列，在侧栏为单列。验收样例应分别声明“可用宽度约等于主区一列”和“可用宽度约等于侧栏宽度”两种条件，并规定在每种条件下的期望换行点与最小高度。这样测试时不会把侧栏的合理换行误判为缺陷。代价是样例数量随页面增多，维护成本上升，所以只在容器差异确实存在的页面上这么做，不要全站铺开。
两种做法的取舍条件与代价
选择哪种，取决于差异是否可复现于固定输入。
- 若换一组数据就能复现，选公共基线加边界样例，代价是要维护输入数据集。
- 若换任何数据都复现、只有换容器才消失，选按页面单独建样例，代价是样例随页面数量增长。
- 若两者都影响，先固定数据再调容器，分两轮验收，不要一次改多个变量。
例外情况：当组件被第三方封装、内部结构不可控时，不要试图改组件内部，而应在页面层加约束样例，明确允许的容器范围，超出范围的页面改用其他展示方式。这个动作的结果是验收标准从“组件行为”转为“容器契约”，后续新增页面时先核对是否落在契约内，再决定是否复用。
把样例写成可判定的条目
无论选哪种做法，验收样例都要包含三要素：输入条件、观察位置、判定标准。例如“侧栏宽度下，卡片标题两行内截断，不出现横向滚动条”。避免只写“显示正常”这类无法判定的描述。每完成一轮，把实际结果与判定标准对照，若某条反复不通过，说明该页面的容器条件需要单独记录，而不是继续加样例。
最终决定下一步的依据是：差异能否用固定输入复现。能，就补数据样例；不能，就补容器样例。两者都试过后仍不稳定，才考虑该页面是否根本不适合复用这个组件。
