网站开发步骤，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /371a4283f88c.html
📄
网站开发步骤，同一组件在不同页面表现不同时怎样构造验收样例
先把“组件在不同页面表现不同”拆成可观察的差异，再为每类差异各构造一个最小验收样例，而不是只在一个页面上确认组件能显示。假设有一个站点，页头导航组件在首页展开正常，在内页却因为容器宽度、相邻模块高度或内容长度不同而换行错位。此时验收样例要覆盖的不是组件本身，而是它被放入不同上下文后的边界。
先判断差异来自组件还是来自页面上下文
同一组件表现不同，通常有三种可区分原因。第一种是组件自身依赖的输入不同，例如标题长度、图片比例、可选按钮数量。第二种是父容器约束不同，例如内页主栏比首页窄，或侧栏占位导致可用宽度变化。第三种是页面加载顺序或样式覆盖不同，例如某个页面额外引入了会改动盒模型的规则。
要区分它们，可以做一个对照动作：把首页中表现正常的同一段数据，原样放入内页容器。如果内页仍异常，问题更可能在父容器或页面级样式；如果恢复正常，问题更可能在数据输入。这个动作的结果决定下一步：前者要优先记录容器和覆盖规则，后者要把输入变化写进验收样例。
把差异写成可执行的验收样例
验收样例不写“组件显示正常”，而写清输入、环境和预期。以下是一个假设示例，用于说明写法，不代表任何真实项目：
- 样例A：最短输入。标题只有两个汉字，无副标题，无按钮。预期是组件保持单行，左右留白不小于所在容器的内边距。
- 样例B：最长输入。标题达到该栏目的字符上限，带副标题和一个次要按钮。预期是标题换行后不与副标题重叠，按钮仍可点击。
- 样例C：窄容器。把同一输入放入内页较窄主栏。预期是组件按预设断点切换为纵向排列，而不是横向溢出。
- 样例D：相邻模块挤压。在组件上方插入一个高度较大的模块。预期是组件整体下移，不出现遮挡或负外边距抵消。
这四个样例分别对应输入、容器和相邻模块三类变量。执行时记录实际结果与预期的差异，差异本身比“通过/不通过”更有用，因为它能指出下一步该改组件、改容器，还是改页面级样式。
样例数量要按差异类型扩展，不按页面数量堆叠
很多人会为每个页面各写一条验收，结果样例很多，却仍然漏掉真正的边界。更有效的做法是按差异类型扩展：每发现一种新的容器宽度、一种新的输入长度、一种新的相邻模块组合，就补一个样例。页面数量本身不决定样例数量，差异类型才决定。
可以先用一个检查动作控制规模：列出该组件被使用的所有页面，标出每个页面的容器宽度区间、输入长度区间和相邻模块类型。如果两个页面在这三项上都落在同一区间，它们可以共用一条样例；只要有一项不同，就单独建样例。这样得到的样例集更小，却更能覆盖规模化后出现的例外。
哪些情况不能直接照搬首页样例
首页样例通常成立在较宽的容器、较固定的输入和较独立的模块位置上。以下边界不能直接照搬：内页主栏明显更窄时，横向排列的预期可能不成立；列表页中组件被重复渲染时，单个组件的验收不能代表多个实例之间的间距；详情页中用户生成内容长度不可控时，固定字符数的样例只能覆盖一部分情况；带侧栏的页面中，容器宽度可能随侧栏内容变化，需要单独记录。
遇到这些边界，先不要急着改组件。更稳妥的动作是先把该页面加入样例集，记录实际差异，再决定是让组件自适应，还是让页面为组件预留固定空间。这个决定会影响后续所有同类页面，因此应在样例中写明适用条件，而不是只写结论。
用假设情境串起一次决策
假设某站点在改版时发现，卡片组件在首页三列布局中显示正常，在文章内页的单列布局中却出现图片被拉伸。检查后确认：首页容器宽度允许图片按原始比例显示，内页容器更窄，而组件样式写死了图片高度。此时不应只在内页调整图片高度，而应回到验收样例，补一条“窄容器下图片比例保持”的样例，并明确该样例适用于容器宽度低于某个阈值的页面。
执行这条样例后，如果图片比例恢复正常而卡片整体高度变化，下一步就要检查相邻模块是否因此产生新的间距问题。也就是说，一个样例的修复结果会引出下一个样例，而不是一次性结束。把这种连锁关系写进验收记录，才能让同一组件在不同页面中的表现差异被持续覆盖，而不是在下次改版时重新暴露。
