广西网站开发：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /0c1f6b134bd1.html
📄
广西网站开发：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：当同一个组件在列表页、详情页或表单页表现不一致时，验收样例应当以“组件所处上下文”为变量来构造，而不是以组件本身为单位。也就是说，同一个组件至少要出现在两种不同页面结构中各一次，分别记录其在默认状态、边界数据和交互后的表现，再对比差异。若只在一个页面里验收，结论往往不能代表全站。
这个结论有一个容易失效的反例：如果两个页面对该组件的调用方式实际上来自同一套模板，只是数据不同，那么表现差异可能只是数据量或字段缺失造成的，而不是页面结构问题。此时按“页面类型”分类构造样例会浪费精力，应改为按数据形态分类。
为什么按组件验收会漏掉页面差异
组件在单个页面中表现正常，不等于在其他页面也正常。常见差异来源有三类：
- 父容器的宽度、内边距或栅格列数不同，导致组件换行、截断或溢出。
- 页面加载顺序不同，组件依赖的样式或脚本在某个页面被其他代码覆盖。
- 同一组件被传入不同结构的数据，例如列表页传数组、详情页传对象，渲染分支不同。
如果验收样例只写“组件正常显示”，执行人无法判断在哪种页面下算正常。因此样例必须写明页面类型、容器条件和数据形态。
两种构造思路的取舍：按页面类型还是按数据形态
两种做法都成立，但适用条件不同。
按页面类型构造适合以下情况：组件在多个页面中的父容器结构明显不同，例如首页通栏、列表页侧栏、详情页正文区。此时每个页面类型至少取一个代表页面，记录组件在其中的宽度、对齐和交互表现。代价是页面越多，样例数量增长越快，适合页面模板数量有限的项目。
按数据形态构造适合以下情况：页面结构基本一致，但组件接收的数据差异大，例如空列表、单条数据、超长文本、缺字段。此时样例围绕数据边界展开，不按页面数量铺开。代价是可能漏掉容器样式差异，需要额外补一个跨页面抽查。
一个可执行的判断动作：先打开两个出现差异的页面，用开发者工具查看该组件的父级元素类名是否相同。若类名和层级不同，优先按页面类型构造；若父级结构相同而数据不同，优先按数据形态构造。这个动作的结果直接决定样例表的列怎么设，避免后续返工。
一组可区分原因的证据
假设同一个卡片组件在列表页显示为两行，在详情页显示为三行。不要直接判定为组件缺陷，先收集以下证据：
- 两个页面中卡片父容器的计算宽度是否一致。
- 传入卡片的标题字段长度是否不同。
- 卡片内部是否引用了页面级样式，而该样式只在其中一个页面加载。
- 交互后，例如展开或切换标签，两个页面的表现是否仍然不同。
如果宽度一致、字段长度不同，那么差异更可能来自数据而非页面结构；如果宽度不同且字段相同，则更可能是容器问题。证据不同，修复方向不同，验收样例的复测重点也不同。
一个注明假设的短例子
假设某项目有三个页面模板：列表、详情、表单。验收样例可以这样写：
- 列表页：卡片组件处于三列栅格中，标题为二十字，无图片。
- 详情页：卡片组件处于单列正文宽度中，标题为四十字，有图片。
- 表单页：卡片组件处于半宽容器中，标题为空，有图片。
执行时分别记录换行位置、图片比例和按钮对齐。若只有详情页出现溢出，则优先检查详情页容器宽度，而不是修改组件默认样式。复测时只需重跑详情页样例，并补测一个同容器下的长标题情况。
下一步动作
把上述判断落到一个具体动作：在验收表中增加“父容器标识”和“数据形态”两列，每列填写实际观察值。当同一组件在两个页面表现不同时，先比对这两列，再决定是修容器、修数据映射还是修组件本身。修完后，只复测受影响的页面类型和数据形态，不要求全站重跑。这样既控制验收成本，也能让差异原因留在记录里，供下一次改版参考。
