网站开发基础，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /6c5b87fa865f.html
📄
网站开发基础，同一组件在不同页面表现不同时怎样构造验收样例
先把“表现不同”拆成可核对的事实：同一组件在A页正常、B页异常，未必是组件本身有缺陷，更常见的原因是页面上下文改变了它的输入、布局约束或交互前提。验收样例应当围绕这些差异构造，而不是只截一张异常图。保留、改写还是退出某个验收项，取决于你能否指出差异来源，并让不同角色在同一份样例上得出相同结论。
先判断差异属于哪一类，再决定样例保留还是改写
同一组件在不同页面出现不同表现，通常落在三类原因上。第一类是输入不同：页面传入的数据长度、空值、图片比例、语言方向不一样。第二类是环境不同：容器宽度、栅格列数、相邻元素高度、滚动容器、弹层层级不一样。第三类是时序不同：组件在首屏渲染、异步数据返回后渲染、标签页切换后渲染，触发时机不同。
如果异常只出现在某一类原因下，样例就应保留这一类变量，并把它写成可复现的条件。如果异常在多个页面都能复现，只是程度不同，说明变量不是页面本身，而是组件内部对某类输入的默认处理，此时应改写样例，把变量从“页面”改成“输入类型”。如果连差异来源都无法稳定复现，退出这个验收项比强行通过更合理，因为无法复现的样例无法让不同角色达成一致。
把分歧转成可核对的项目：一份最小验收样例的构造顺序
构造样例的目的不是证明谁对，而是让产品、设计、开发和测试对同一事实有共同描述。可以按以下顺序推进：
- 固定一个参照页面，记录组件在该页的容器宽度、数据样例和渲染时机。
- 固定一个对照页面，只改变一个变量，例如把容器宽度从三列改为两列，其余保持不变。
- 写出预期结果，且预期结果必须是可观察的，例如“按钮文字不换行”“卡片高度一致”“下拉菜单不被容器裁切”。
- 写出实际结果，并注明观察位置，例如“在对照页第二屏右侧卡片内”。
- 给出判定：保留、改写或退出。保留表示该差异需要修复；改写表示样例条件写错了；退出表示当前无法稳定复现，暂不作为验收依据。
这个顺序的关键动作是“只改变一个变量”。如果同时改页面、改数据、改浏览器窗口，即使看到差异，也无法判断是哪一项造成，下一步修复就会变成猜测。
用假设例子说明保留、改写与退出的适用前提
假设一个折叠面板组件在“帮助中心”页面正常展开，在“订单详情”页面点击后没有内容。此时不要直接把它记为组件缺陷。先核对两个页面的差异：帮助中心的数据是静态写入，订单详情的数据来自异步请求；帮助中心的容器没有固定高度，订单详情的容器设置了固定高度并隐藏溢出。
若只改容器高度就能复现，样例应保留“固定高度容器”这个条件，并把它写成验收项：在固定高度且溢出隐藏的容器内，折叠面板展开后内容应可见或容器应随之增高。若改数据来源才能复现，样例应改写为“异步数据返回后展开”的时序样例，而不是继续用页面名称区分。若两种改法都无法稳定复现，且不同角色看到的次数不一致，就应退出该验收项，先补充可观察的日志或录屏条件，再重新进入验收。
这里的取舍依据不是哪个页面更重要，而是哪个变量能被独立控制。能独立控制的变量保留，控制不了的变量改写或退出。
验收样例中必须写清的三类信息
为了让不同角色对同一事实有相同理解，样例至少应包含三类信息。第一类是前提：页面、容器、数据、渲染时机。第二类是动作：点击、滚动、切换标签、改变窗口宽度。第三类是观察点：文字是否换行、元素是否被裁切、层级是否被遮挡、状态是否更新。
缺少前提，测试无法复现；缺少动作，开发不知道从哪一步开始查；缺少观察点，产品与设计只能凭感觉争论。一个可用的验收样例不追求覆盖所有页面，而是让同一组件在关键差异下有一致的判定标准。
什么时候该把页面差异升级为组件级验收
如果同一差异在三个以上页面重复出现，且每次都指向同一类输入或同一类容器约束，就说明它不再是页面问题，而是组件级验收缺失。此时应把样例从“某页面表现正常”升级为“组件在何种输入和容器下应满足何种表现”。升级后的样例可以复用到后续页面，减少重复争论。
反之，如果差异只在一个页面出现，且该页面有一次性布局或临时数据，保留页面级样例更合适。把一次性差异写成组件级规则，会让后续页面承担不必要的约束。判断标准是：这个差异是否会在新页面再次出现。会，就升级；不会，就留在页面级验收中。
