网站制作教程：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /cd7cde05941a.html
📄
网站制作教程：同一组件在不同页面表现不同时怎样构造验收样例
先把结论说清：不要试图用一个“万能页面”验收同一组件，而要为组件建立一组最小差异样例，每个样例只改变一个可能影响表现的条件，并记录该条件下的预期结果。这样做的代价是要维护多份样例页面，收益是能把“页面不同”拆成可判断的原因，而不是靠反复刷新碰运气。
假设情境：同一张卡片在列表页与详情页表现不一致
假设你正在按一份网站制作教程搭建站点，站点里有一个卡片组件，同时用在文章列表页和文章详情页的“相关阅读”区域。列表页里卡片标题换行正常，详情页里同一卡片标题却把下方摘要挤出容器；列表页图片是固定比例，详情页图片被拉高。两处调用的是同一份组件代码，只是传入的数据和所在容器不同。
这时有两种看似合理的做法。做法一：直接给详情页的卡片单独写一套覆盖样式，快速让当前页面恢复正常。做法二：先不动样式，构造一组验收样例，找出是容器宽度、数据长度还是父级布局造成的差异，再决定改组件还是改页面。两者的取舍点在于：如果你只服务这一个页面，做法一的代价低；如果这个组件还会被更多页面复用，做法一会把差异藏起来，下一次换页面还会重演。
构造验收样例时，先固定三个变量
要让样例可比较，必须先固定会影响组件表现的外部条件。建议至少固定以下三项，并在样例说明里写明假设值：
- 容器宽度：给每个样例设置明确的可用宽度区间，而不是“桌面端”“移动端”这种模糊说法。比如假设列表页卡片可用宽度为 320px，详情页相关阅读为 240px。
- 数据长度：准备短标题、中等标题、长标题三组文本，以及有无摘要、有无图片的组合同样要纳入样例。
- 父级布局：记录组件外层是 flex、grid 还是普通块级流，是否设置了固定高度或溢出隐藏。
固定这三个变量后，每个样例只改一项。例如样例 A 是 320px 加短标题，样例 B 是 240px 加短标题，两者对比就能判断宽度是否是主因；样例 C 是 240px 加长标题，与样例 B 对比就能判断文本长度是否触发换行溢出。
用最小差异样例定位原因，而不是一次改完
实际操作可以按下面顺序推进，每一步都记录结果，再决定下一步：
- 复制出问题页面中最简单的那一个调用位置，去掉无关模块，只保留组件和它的直接父容器。
- 用同一份数据渲染两个样例，一个复现问题，一个作为正常对照。
- 只改一个变量，比如把容器宽度从 240px 调到 320px，观察问题是否消失。如果消失，说明宽度是触发条件；如果没消失，继续改文本长度或父级布局。
- 把每次改动的结果写进验收记录，标注“通过”“不通过”和“需要进一步确认”。
这个动作的结果会直接影响下一步：如果宽度是触发条件，那么修复方向可能是给组件设置最小宽度或换行策略，而不是给详情页单独覆盖样式；如果文本长度是触发条件，那么需要约定标题截断规则，并在样例中保留长标题这一项。
验收样例要写成可重复执行的条目
样例不是截图，而是一段可以再次执行的说明。每条至少包含：前置条件、操作步骤、预期结果、实际结果。例如：
- 前置条件：容器可用宽度 240px，父级为 grid，标题为 40 个汉字，无摘要。
- 操作步骤：在详情页相关阅读区域渲染该组件。
- 预期结果：标题最多显示两行并截断，图片保持原始比例，下方内容不被挤出容器。
- 实际结果：标题换行到第三行，图片高度被拉高，摘要被挤出。
这样写的好处是，换一个人执行也能得到同样的判断。如果只写“详情页卡片显示异常”，下次修复后无法确认是否真的解决，也无法判断其他页面是否受影响。
什么时候可以接受页面级覆盖
页面级覆盖并非总是错误。如果满足以下条件，做法一可以成立：该组件只在这一个页面使用；该页面的容器宽度和数据长度长期稳定；覆盖样式有明确注释，说明它依赖的页面条件。反过来，如果组件已经被多个页面引用，或者数据长度不可控，就应该回到组件本身，用验收样例确定修改边界，而不是在每个页面各写一套覆盖。
需要提醒的是，样例通过只能说明在当前假设条件下表现符合预期，不能单独证明组件在所有页面都不会出问题。抓取量或请求量归零、页面不再报错，也可能只是样例没有被访问到，或者问题被其他样式掩盖。因此样例要保留触发条件，并在组件或页面布局变更后重新执行。
