舟山网站开发：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /cc37ce69ef46.html
📄
舟山网站开发：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为“组件本身”写一份通用验收样例，而要为“组件所处的页面条件”分别写样例。判断分界线是——差异是否由页面级变量引起。如果同一组件在A页面正常、在B页面异常，且两页引入参数、容器宽度、数据形态或加载顺序不同，就属于页面级变量；此时通用样例必然漏测。反之，如果两页条件完全一致却表现不同，才应回到组件内部找原因。下面按这两种条件给出不同的构造方式。
条件一：差异可归因于页面级变量时，样例要按变量分叉
常见页面级变量有四类：容器可用宽度、传入的数据条数与字段完整度、同页共存的其他脚本、以及组件被调用的位置（首屏或折叠区）。构造样例时，每个变量取“边界值”而不是“典型值”，因为表现差异通常出现在边界上。
具体动作：先在两页各取一次实际渲染结果，记录容器宽度、数据条数、字段缺失情况和同页脚本数量。把其中差异最大的一项作为分叉维度，为它写两组样例：一组复现A页条件，一组复现B页条件。每组样例只改这一个变量，其余保持一致。
这样做的结果是：如果两组样例都能稳定复现各自页面的表现，说明差异由该变量驱动，下一步应把该变量写入组件契约，而不是改组件样式硬扛。如果两组样例表现反而一致，说明你选错了分叉维度，需要换下一个变量重做，而不是继续加样例数量。
一个注明假设的短例子
假设某列表组件在列表页显示正常，在详情页侧栏出现文字截断。假设两页传入数据相同，唯一差别是侧栏容器宽度约为列表页主栏的一半。此时样例应写成：同一数据、同一组件版本，容器宽度分别设为宽窄两档，观察换行与截断。若窄档复现截断、宽档不复现，则结论指向容器约束，处理动作是给组件补最小宽度或换行规则；若两档都不截断，则要回头检查详情页是否额外注入了覆盖样式。
条件二：两页条件一致却表现不同时，样例要固定环境、只变加载时序
当容器、数据、脚本都对齐后仍有差异，剩下的合理解释通常是加载时序或缓存状态，而不是组件逻辑本身。这时通用样例和变量分叉样例都无效，必须构造“时序样例”。
动作：在受控环境下，分别模拟组件先于依赖脚本加载、后于依赖脚本加载、以及依赖脚本加载失败三种情况，记录每种情况下组件的可见状态与报错。不要只看最终截图，要看控制台是否出现同源报错。
结果如何影响下一步：如果只有“先于依赖加载”这一种情况异常，处理方向是调整加载顺序或补占位状态；如果三种都异常，则问题不在时序，应回到组件内部。需要提醒的是，请求量或报错量归零并不能单独证明处理正确——它也可能是页面根本没渲染到该组件，属于另一种合理解释，需结合可见状态一起判断。
验收样例的最小结构
无论走哪条分支，一份可执行的样例都应包含以下字段，缺一项就会导致结论无法复现：
- 页面条件：容器宽度、数据条数与字段完整度、同页脚本清单。
- 组件输入：传入参数与默认值，明确哪些是页面覆盖的。
- 预期表现：写可观察的现象，如“不出现横向滚动”“字段为空时保留占位高度”。
- 判定依据：截图或DOM状态，注明是哪种，避免只凭肉眼。
- 例外记录：哪些页面不适用该样例，以及不适用的原因。
其中“例外记录”最容易被省略，却最影响后续决策。如果某页面因为业务原因必须保留不同容器宽度，那么该页面应单列为例外，而不是让组件去适配所有宽度。
什么时候该停止加样例，转而改组件契约
当同一分叉维度已经出现三组以上样例、且每组都需要单独写覆盖样式时，继续加样例的收益会下降。此时更合理的动作是把该维度写进组件契约：明确组件支持的最小宽度、必需字段和加载前提，让不满足条件的页面在开发阶段就暴露，而不是留到验收阶段靠样例兜底。
判断依据是：样例数量增长是否带来了新的结论。如果新样例只是重复验证同一结论，就应停止扩充，转向约束声明。反之，如果每组新样例都推翻上一组结论，说明变量还没找全，应继续分叉。
最后一步是把结论落到页面清单上：哪些页面走通用样例，哪些页面走分叉样例，哪些页面列为例外。这份清单本身就是验收依据，比一份笼统的组件测试说明更能减少两页表现不一致带来的返工。
