外贸网站制作：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /46d2110e2a4b.html
📄
外贸网站制作：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为一个组件写一份通用验收样例，而要为它出现过的每种页面语境各写一份，并在样例里固定“数据形态、容器宽度、相邻模块、加载顺序”这四个变量。只有这四项都相同的页面，才可以共用同一份验收结论；任何一项不同，都要单独取样。下面用两种成立条件来说明怎么选、怎么落、以及什么情况下这套办法会失效。
条件一：组件本身逻辑一致，差异来自页面语境
这是最常见也最容易被误判的情况。同一个产品参数表，在分类页里紧贴筛选栏，在详情页里跟在主图之后，在询盘页里被塞进侧栏。三处的组件代码可能完全相同，但表现不同：筛选栏的交互抢走了焦点，主图的懒加载推迟了渲染，侧栏的窄容器把表格挤成横向滚动。
判断依据是：把组件单独放进一个空白测试页，表现是否恢复正常。如果恢复正常，问题在语境，不在组件。此时验收样例应该按“语境”而不是按“组件”来写。
具体动作：为每个出现位置建立一份样例，样例开头写明该页面的容器可用宽度区间、组件上方紧邻的模块类型、组件是否处于首屏、以及该页面是否加载了额外的交互脚本。假设某参数表在 960px 以上容器中不出现横向滚动，在 720px 以下出现，那么验收样例就要把 960px 和 720px 各列为一个检查点，而不是只写“移动端正常”。这个动作的结果直接决定下一步：如果两个检查点都通过，说明组件在窄容器下具备自适应能力，可以进入规模化抽样；如果只有宽容器通过，就不能把这个组件直接铺到所有侧栏位置，必须先补一份窄容器的降级方案。
条件二：组件逻辑本身分叉，差异来自配置或数据
另一种情况是组件带配置项，不同页面传入了不同参数。同一张询盘表单，A 页面传了“带附件上传”，B 页面没传；同一个产品卡片，列表页传了“显示库存”，详情推荐位没传。这时表现不同不是语境造成的，而是组件在两条分支上各自有独立行为。
判断依据是：把两个页面的配置参数并排列出来，差异项是否正好对应表现差异。如果对应，问题在配置，验收样例就要按“配置组合”来写，而不是按页面来写。
具体动作：先列出该组件所有会影响渲染的配置项，再标出哪些组合是业务上真实会用的。只对真实组合写样例，不为理论上的全排列写样例，否则样例数量会失控。假设某表单只有“带附件”和“不带附件”两种真实用法，那就写两份样例，每份都包含提交成功、必填校验、附件格式错误三个检查点。这一步的结果影响下一步的抽样范围：如果两种配置都通过，后续新增页面只要落在已覆盖的配置组合内，就可以只做冒烟检查；一旦出现第三种配置，必须补样例，不能沿用旧结论。
两种条件的分界怎么快速判断
实操中可以用一个简单动作来分界：把可疑页面上的组件容器宽度改成和正常页面一致，刷新观察。
- 表现恢复 → 归入条件一，按语境写样例。
- 表现不变 → 归入条件二，按配置写样例。
- 表现部分恢复 → 两种因素叠加，样例要同时固定语境和配置，不能只写一份。
这个分界动作本身也要记进样例，因为它解释了“为什么这个页面被单独列出来”，后续别人复查时不必重新推导。
样例里必须写清不能照搬的边界
规模化之后出例外，通常不是因为样例写少了，而是因为样例没写边界。一份合格的组件验收样例，除了检查点，还要写明它成立的前提。
需要写明的边界至少包括：适用的容器宽度下限、依赖的相邻模块、是否假设该页面不加载第三方脚本、以及数据为空或超长时的表现是否在覆盖范围内。假设某产品卡片样例只在“标题不超过两行、价格字段非空”的数据下通过，那么这条就是边界；当运营开始录入超长标题或留空价格时，旧样例不再成立，必须补新样例，而不是直接判定为缺陷。
把边界写进样例的直接好处是：例外出现时，能立刻区分“这是样例未覆盖的新情况”还是“这是组件回归”。前者补样例，后者走修复流程，两条路不会混在一起。
什么情况下这套做法不适用
如果组件在不同页面的差异来自服务端渲染与客户端渲染的切换，或者来自多语言版本下的文案长度差异，那么按语境和配置分样例仍然不够，需要额外增加“渲染方式”和“语言”两个维度。此时样例数量会明显上升，应优先只覆盖流量集中的语言和渲染路径，其余路径记录为已知未覆盖项，而不是假装已经验完。
另外，如果组件本身还在频繁改版，先冻结组件版本再写样例，否则样例写完就过期。冻结版本这个动作的结果是：样例的通过与否可以被重复验证；不冻结，则任何一次组件改动都会让全部样例失效，验收成本会超过收益。
