龙岩网站设计同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /07f2173a509a.html
📄
龙岩网站设计同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要继续在出问题的页面上反复调样式，而要把这个组件放到两个受控页面里做对照——一个页面只保留组件本身和最少的外层容器，另一个页面复刻真实页面的外层结构。验收样例要能区分“组件自身状态问题”和“外层上下文干扰”，否则你改的每一处都可能只是掩盖症状。
两种条件的分界：组件独立页与真实嵌套页
同一组件在不同页面表现不同，通常只有两类原因。第一类是组件自身依赖了外部条件，比如宽度、字体、行高、颜色变量、层级或初始化时机，脱离原页面就失效。第二类是外层上下文改变了组件，比如父容器的display、overflow、transform、栅格列宽或全局样式覆盖。
对应地，验收样例要分成两种条件。条件A是隔离页：只放组件和必要的直接父容器，不引入页头、侧栏、弹窗和异步数据。条件B是真实嵌套页：把组件放回它实际出现的页面结构里，保留同一位置的兄弟节点和样式加载顺序。两个页面用同一份组件代码、同一份数据、同一浏览器窗口，只改变外层条件。
选择依据很简单：如果条件A正常、条件B异常，问题在外层上下文；如果两个条件都异常，问题在组件自身或其数据依赖；如果条件A异常、条件B正常，说明隔离页缺少了真实页面提供的某个必要条件，比如容器宽度或初始化脚本。这三种结果指向不同的下一步动作，不要混在一起改。
构造验收样例时的具体动作
第一步，固定变量。把浏览器窗口宽度、缩放比例、字体设置、登录状态、数据条数都记下来，两个条件页使用相同值。第二步，给组件加一个可识别的外层标记，例如在隔离页用<div class="test-isolated">包住组件，在真实页用<div class="test-embedded">包住同一位置。第三步，只改外层，不改组件内部。
第四步，逐个移除真实页的外层条件，观察表现何时从异常变为正常。可以先去掉侧栏，再去掉栅格类，再去掉全局样式表，最后去掉异步数据。每去掉一项就记录一次结果。这个动作的结果会直接决定下一步：如果去掉某个栅格类后恢复正常，就检查该栅格类是否给组件设了固定宽度或min-width；如果去掉异步数据后恢复正常，就检查组件是否在数据到达前就计算了尺寸。
一个注明假设的短例子
假设某个卡片组件在列表页显示正常，在详情页右侧栏变窄且文字换行异常。隔离页里卡片宽度设为父容器100%，表现正常；真实嵌套页里父容器被栅格限制为固定像素，卡片内部却按百分比计算图片高度，导致高度被压缩。
验收样例可以这样写：条件A，父容器宽度自适应，卡片正常；条件B，父容器宽度固定为320像素，卡片图片高度异常。此时不要改卡片图片的百分比，而是先确认栅格是否应该给这个组件固定宽度。如果业务上右侧栏确实需要固定宽度，就改为给图片设最小高度或改用object-fit；如果不需要，就调整栅格列宽。这个判断依据是：固定宽度是设计意图还是历史遗留。
例外与不能只靠现象下结论的情况
有一种例外：两个页面表现不同，但组件代码和样式完全一致，差异来自数据本身。例如同一组件在列表页显示摘要，在详情页显示全文，内容长度不同导致高度不同。这不算组件缺陷，验收样例应把数据条件也写成变量，而不是只比较页面。
另一种例外：请求量、抓取量或某项统计归零，不能单独证明组件处理正确。它可能是缓存、权限、网络或统计口径变化造成的。验收样例要记录的是可复现的页面表现，而不是某个后台数字。
最后，验收样例要能被执行者独立复现。写清楚前提：浏览器窗口宽度、是否登录、数据条数、样式加载顺序、是否禁用缓存。执行者按条件A和条件B各跑一次，记录正常或异常。如果两种条件都异常，下一步是查组件自身；如果只有真实嵌套页异常，下一步是查外层上下文；如果只有隔离页异常，下一步是查隔离页缺少的必要条件。这样，验收样例才真正帮你定位遗漏条件，而不是重复描述问题。
