如何建网站：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /82472acf9fd4.html
📄
如何建网站：同一组件在不同页面表现不同时怎样构造验收样例
先把“组件本身有问题”与“组件被页面上下文改变了”分开，再为两种解释各写一条可复现的验收样例。做法是固定组件版本与数据，只改变页面位置、容器宽度、相邻内容或加载顺序，记录差异是否随这些条件移动。如果差异跟着条件走，验收样例应写成带前提的通过条件；如果差异只在某一页面出现且换位置后仍复现，才把问题归到组件实现。
先写清“表现不同”指哪一层
同一组件在不同页面看起来不一样，可能指三种不同事实：渲染结果不同、交互反馈不同、数据展示不同。验收样例必须先锁定其中一层，否则开发、设计、运营会各自拿不同截图争论。
假设一个卡片组件在列表页显示正常，在详情页侧栏出现文字截断。这里“表现”是渲染层，不是数据层。验收样例应记录：组件版本、传入字段、容器可用宽度、页面中该组件之前的内容高度。只写“卡片显示异常”无法复现，也无法判断是组件问题还是侧栏容器太窄。
动作上，先让提出差异的人在真实页面里复制一份最小结构：保留容器、组件和必要样式，删掉无关模块。结果如果差异消失，说明原页面的相邻内容或外层样式参与了影响；下一步验收样例就要把那个相邻条件写进去，而不是继续改组件。
两种解释：组件缺陷，还是页面上下文改变了它
解释一：组件自身在特定输入或状态下有缺陷。例如空字段、超长文本、图片缺失、异步数据晚到时，组件没有兜底，导致高度塌陷或按钮错位。它的特征是换到另一个页面、另一个容器，只要输入相同，异常仍按相同方式出现。
解释二：页面上下文改变了组件的可用条件。常见来源包括父容器宽度、网格列数、继承字号、全局样式覆盖、同页多个实例的初始化顺序、懒加载时机。它的特征是异常跟着页面条件移动：把组件放进另一个容器，或临时移除相邻模块，表现就改变。
两种解释都成立时，不要急着合并成一条验收项。先写出能区分它们的证据，再决定验收样例的边界。
用一组对照样例区分两种解释
可操作的对照方法如下，全部在测试环境完成，不依赖真实用户数据。
- 固定组件版本与同一份输入数据，截取两个页面的组件区域。
- 把组件从原页面复制到一个空白测试页，容器宽度分别设为原页面的实际宽度和组件文档建议宽度。
- 在空白页中逐个加回原页面的外层样式、全局样式和相邻模块，每加一项记录一次表现。
- 若异常只在某一宽度出现，继续只改宽度、不改内容，确认是否稳定复现。
- 若异常在空白页、建议宽度下仍复现，保留该输入作为组件缺陷的最小样例。
证据判断可以更具体：差异随容器宽度变化，倾向解释二；差异随空字段或超长文本出现，倾向解释一；差异只在同页存在多个实例时出现，优先检查初始化顺序和实例隔离。请求量或抓取量归零不能单独证明组件处理正确，它还可能来自页面未被访问、缓存命中或统计口径变化，需要与对照样例一起看。
把结论写成可核对的验收样例
验收样例不写“显示正常”，而写清前提、动作和可观察结果。例如：
- 前提：卡片组件版本不变，标题字段为 40 个汉字，容器宽度为 320px，页面无额外覆盖样式。
- 动作：在列表页与侧栏各放置一个实例，分别加载。
- 结果：标题最多显示两行，超出部分省略；两个实例的卡片高度差不超过一行。
如果对照后发现是页面上下文导致，验收样例就应把容器宽度和相邻条件写成前提，并指定由谁在模板或布局层修正；如果确认是组件缺陷，样例则保留最小输入，交给组件维护方修复。这样分歧被转成可核对的项目：同一份输入、同一组条件、同一观察结果。下一轮验收时，只需检查这些前提是否仍成立，就能判断问题是否真正关闭。
