博客建站步骤：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 (compatible; QlyzeBot/1.0; +https://app.qlyze.io/bot)
🔗 /c866d2c72ba8.html
📄
博客建站步骤：同一组件在不同页面表现不同时怎样构造验收样例
先判断差异来自“组件自身状态”还是“页面上下文”，再决定验收样例是写成组件级还是页面级。若同一组件在A页正常、B页异常，而两页引入的脚本、样式作用域或数据来源不同，验收样例就必须绑定页面上下文；若两页上下文一致、只是渲染结果不同，则应先做组件级最小复现，把问题从页面里剥离出来。
先分清两种条件：组件独立验收还是页面集成验收
组件级验收成立的条件是：组件在隔离环境中可独立渲染，输入数据可控，样式不依赖祖先选择器，行为不依赖页面级脚本。此时验收样例应写成“给定输入→触发动作→观察组件输出”，例如一个文章卡片组件，假设传入标题、摘要、封面三个字段，验收时只检查这三项是否按预期显示、链接是否可点。
页面集成验收成立的条件是：组件表现受页面布局、同级模块、全局样式或数据加载顺序影响。此时组件单独跑没问题，放进页面才出问题，验收样例就不能只写组件输入输出，而要写清页面结构、相邻模块、加载顺序和视口宽度。判断依据是：把组件从B页移到空白测试页后异常消失，说明差异来自页面上下文，应走集成验收。
构造验收样例时先固定变量，再记录可观察结果
同一组件在不同页面表现不同，最忌讳直接写“在B页显示异常”。有效样例要固定以下变量：
- 页面模板与布局容器，例如是否处于两栏侧边栏内；
- 组件被调用时传入的数据，包括字段是否缺失、是否为空；
- 页面加载的样式与脚本范围，是全局还是按需；
- 视口宽度与内容长度，尤其是长标题、多标签的情况；
- 组件在页面中的位置，是首屏、正文中还是页脚附近。
每个变量固定后，记录一个可观察结果，例如“标题在320px宽度下换行成三行并溢出容器”。这样验收样例才能被复现，而不是停留在主观描述。
一个假设例子：同一卡片组件在两个页面的验收写法
假设博客有列表页和文章页，共用同一个“相关阅读”卡片组件。列表页中卡片间距正常，文章页中卡片之间出现重叠。先做组件级最小复现：在空白页只放三个卡片，传入相同数据，结果正常，说明组件自身没有必然缺陷。再回到文章页，把页面级变量逐个固定，发现文章页的主内容区使用了不同的栅格容器，卡片被放进了一个更窄的列中，而卡片内部仍按固定宽度计算。
此时验收样例应写成两条：组件级样例检查“传入三条数据时卡片是否按顺序渲染、链接是否可点”；页面级样例检查“在文章页窄列容器中，三个卡片是否不重叠、是否随容器宽度收缩”。前者保证组件逻辑，后者保证集成表现。只写其中一条，都会漏掉另一类问题。
实施动作：先做最小复现，再决定验收层级
遇到同一组件表现不同，第一步动作是把组件从两个页面中分别剥离，放进一个只包含该组件的空白模板，传入相同数据。结果分两种：
- 空白模板中表现一致，说明差异来自页面上下文，验收样例应升级为页面级，并把页面容器、相邻模块、加载顺序写进前置条件。
- 空白模板中表现仍不同，说明差异来自组件调用方式或数据本身，验收样例应停留在组件级，重点检查传入字段、默认值和条件渲染分支。
这个动作的结果直接决定下一步：走页面级验收时，需要和负责布局的人确认容器规则；走组件级验收时，需要和负责数据或组件逻辑的人确认输入契约。如果跳过最小复现，直接改页面样式，可能把组件在其他页面的正常表现一起改坏。
例外与边界：这些情况不适合只靠验收样例解决
如果差异只在特定浏览器或特定内容长度下出现，验收样例仍可写，但需要把触发条件写进样例，而不是写成通用规则。如果差异来自第三方脚本在页面中的加载时机，验收样例应记录加载顺序和可观察结果，但不应断言某个脚本一定有问题，因为同一现象也可能由缓存、网络顺序或页面其他脚本造成。若组件由外部服务提供，且无法在本地隔离渲染，则应以页面级验收为主，并把“无法隔离”作为已知前提写进样例说明。
验收样例的作用是让不同的人对同一现象得出相同判断。当同一组件在不同页面表现不同，先固定变量、再做最小复现、最后按上下文选择验收层级，比直接争论“组件有没有问题”更能推动下一步动作。
