网站设计策划：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /64f8a9e71dca.html
📄
网站设计策划：同一组件在不同页面表现不同时怎样构造验收样例
验收样例不应只写“组件显示正常”，而应固定页面上下文、数据状态和交互路径，让同一组件在每个页面都产生可判定的结果。选择的关键在于：先判断差异来自组件自身还是页面环境，再决定是统一收敛为一份样例，还是按页面类型拆成多份。
先构造复现差异的最小样例，再决定验收粒度
同一组件在不同页面表现不同，常见原因有三类：容器宽度与栅格不同、页面注入的全局样式不同、数据形态不同。验收样例的第一步不是扩大覆盖，而是把差异压缩成可重复的最小条件。
具体动作：选两个表现差异最明显的页面，记录四项信息——容器可用宽度、组件外层类名或作用域、传入数据的条数与最长文本、触发交互的方式。把其中三项固定，只改一项，观察表现是否随之改变。如果只改容器宽度就复现差异，说明问题属于布局环境；如果只改数据长度才复现，说明问题属于内容边界。
这个动作的结果会直接决定下一步：定位到单一变量时，验收样例可以只针对该变量设置边界值；多个变量同时变化才出现差异时，样例必须写成变量组合，而不是逐页罗列。
两种验收策略的适用条件与代价
第一种是统一样例：用一份组件级样例覆盖所有页面，验收时只检查组件在标准容器中的表现。它成立的条件是各页面容器宽度接近、全局样式作用域清晰、数据形态一致。代价是对真实页面的环境差异不敏感，容易在窄容器或长文本场景漏判。
第二种是按页面类型拆样例：为列表页、详情页、表单页等分别建立验收样例。它成立的条件是页面类型边界稳定、每类页面的容器与数据规则可描述。代价是样例数量增加，组件改动后需要同步维护多份，遗漏一份就会出现验收盲区。
取舍依据可以归结为一句话：差异由容器或全局样式引起时，优先按页面类型拆样例；差异由数据长度或空值引起时，优先在组件级样例中补齐边界数据。两者不冲突时，可以以组件级样例为主，只对差异最大的页面类型追加一条环境样例。
把验收样例写成可判定的条目
可判定的样例需要包含前提、动作和预期三部分，避免“显示正常”“样式一致”这类无法判定的描述。
- 前提：页面类型、容器宽度区间、数据条数与最长文本长度、是否处于空数据或加载状态。
- 动作：滚动到组件位置、触发展开或切换、改变窗口宽度到指定区间。
- 预期：组件是否溢出容器、文本是否截断或换行、交互后状态是否保持、相邻元素是否被挤压。
假设某卡片组件在列表页两列布局下正常，在详情页侧栏单列窄容器中出现文字溢出。此时验收样例应写成：前提为侧栏容器宽度处于最窄区间、卡片标题为最长允许字符数；动作为加载页面并观察卡片底部；预期为标题换行且不遮挡操作按钮。这条样例只针对窄容器与长文本的组合，不需要复制列表页的全部检查项。
例外情况：差异无法在验收环境复现时怎么办
有些差异只在特定数据或特定浏览器下出现，验收环境难以完全模拟。此时不要用“环境问题”直接跳过，而应把不可复现的部分转成监控或回归条件：记录出现差异的页面、数据特征和操作路径，作为下一轮验收的输入。
需要注意，某次验收中差异未再出现，不能单独证明问题已修复。缓存、数据变化、容器宽度偶然落在安全区间，都可能有同样表现。判定修复是否成立，仍要回到最小样例：固定变量后差异是否消失，并且换一个边界值是否仍稳定。
当组件由第三方提供时，验收样例还应记录版本或引用方式，避免组件更新后样例前提失效。样例维护责任应跟随组件归属，而不是跟随页面归属，否则拆分的页面样例很容易在组件升级后集体过期。
