通化网站制作：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /bc1e1a603354.html
📄
通化网站制作：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：当同一组件在列表页正常、在详情页错位时，验收样例不应继续按“页面”拆分，而应按“组件 + 所处上下文”构造。也就是说，你要为这个组件单独建一组样例，每组只改变一个上下文变量，而不是把整页截图丢进验收文档。这样做的前提是：组件本身可独立渲染，且差异能被归因到某个可复现的条件。如果组件依赖整页数据才能初始化，这个结论会失效，你需要改用整页快照加差异标注的方式。
为什么按页面验收会漏掉组件差异
通化网站制作项目里常见的交付方式是：首页、列表页、详情页各截一张图，逐页对照。这种做法能发现整页布局问题，但同一组件在不同页面表现不同时，它给出的信息太粗。列表页里卡片宽度受栅格列数控制，详情页里同一卡片被放进侧栏，宽度由父容器决定；两处截图都“看起来正常”，但组件内部的间距、换行、按钮对齐已经变了。按页面验收时，你会把它记成“详情页有点挤”，而不会记成“卡片组件在窄父容器下的行高规则失效”。
所以第一步不是加更多截图，而是把组件从页面里拎出来，单独定义它的输入条件。输入条件至少包括：可用宽度区间、内容长度区间、是否处于异步加载状态、是否被父级样式覆盖。只有这些条件写清楚，验收样例才可复现。
两种构造方式，按组件耦合度取舍
第一种是组件级样例：为组件建一个独立页面，用固定数据渲染，只调整上下文变量。第二种是页面级样例：在真实页面里定位组件，用浏览器开发者工具临时改父容器宽度或内容长度，记录表现。两者都成立，差别在代价。
- 组件级样例成立的条件：组件不依赖页面级全局状态，数据可由固定对象提供。代价是要额外维护一份样例数据和入口页，好处是回归时不用重新登录、翻页、造数据。
- 页面级样例成立的条件：组件初始化依赖页面数据或路由参数，拆出来会失真。代价是每次回归都要走完整流程，且临时改动容易忘记还原。
如果同一组件在三个以上页面出现，优先做组件级样例；如果只在一个页面出现，页面级样例更省事。判断依据不是组件复杂度，而是它被复用的次数和上下文差异的数量。
一组可区分原因的证据怎么留
验收样例要能区分“组件本身的问题”和“上下文导致的问题”。可以按下面的顺序留证据：
- 记录组件在最小可用宽度和最大可用宽度下的表现，各留一张图。
- 记录同一组件在两种内容长度下的表现：最短合理内容、最长合理内容。
- 记录父容器样式变化前后的差异，例如父级是否设置了
overflow或固定高度。 - 记录异步加载完成前后的状态，避免把加载态误判为布局错误。
假设一个场景：卡片组件在列表页三列布局下按钮右对齐，在详情页侧栏单列布局下按钮换行到标题下方。按上面的顺序，你会先确认最小宽度下是否换行，再确认是父容器宽度不足还是组件内 flex-wrap 规则触发。如果最小宽度下也换行，问题在组件；如果只在侧栏宽度下换行，问题在上下文。这个区分直接决定下一步是改组件样式还是改页面容器约束。
一个会让结论失效的反例
上面的方法有一个明确反例：当组件表现差异来自数据本身，而不是布局上下文时，组件级样例会给出错误结论。比如同一列表组件在首页显示推荐数据、在分类页显示筛选结果，两者字段缺失情况不同，导致空状态占位高度不一致。此时你把组件单独拎出来用固定数据渲染，永远复现不了线上表现，因为差异源头是数据形态，不是父容器宽度。遇到这种情况，验收样例必须包含真实数据的抽样，而不是固定假数据。判断信号是：同一宽度、同一内容长度下表现仍然不同，且差异随数据来源变化。
下一步动作
先给这个组件建一个最小验收样例页，只放组件本身和必要的上下文开关，跑一遍上面四步证据记录。如果差异能复现，把它固化成回归样例；如果复现不了，回到真实页面，用真实数据抽样对比，并把数据来源作为新的变量加进样例。这个动作的结果会告诉你：问题属于组件规则、上下文约束还是数据形态，对应的修改位置和回归范围也随之确定。
