常德网站开发，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /49e8818c8ab6.html
📄
常德网站开发，同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要试图用一个“万能样例”覆盖所有页面，而要把组件拆成状态和页面上下文两个维度，为每个组合单独写一条可判定的验收样例。你手上只要有一个能打开的页面和一份组件清单，就能开始做这件事，不需要完整数据或后台权限。
先确认“表现不同”是不是同一件事
同一个组件在不同页面看起来不一样，通常来自三类原因，处理方式完全不同：
- 数据差异：标题长度、图片有无、列表条数不同。这属于内容边界，验收时要固定输入。
- 容器差异：父级宽度、栅格列数、外边距不同，组件被动变形。这属于布局上下文。
- 状态差异：默认、悬停、聚焦、禁用、加载中、空数据，组件自身逻辑不同。
可执行的最小动作：打开两个出现差异的页面，只改浏览器窗口宽度，不改任何内容。如果差异随宽度出现或消失，问题在容器；如果差异始终存在，再去看数据或状态。这一步的结果决定你接下来写的是布局样例还是状态样例，避免把两类问题混进同一张验收表。
把组件转成“状态 × 页面”的样例矩阵
假设你手上有一个商品卡片组件，它在列表页和详情推荐位表现不同。不要写“卡片显示正常”这种无法判定的条目，而是列出两个轴：
- 状态轴：默认、无图、长标题、空价格、加载中。
- 页面轴：列表页三列、列表页两列、详情页侧栏窄容器。
交叉后不必全测，先挑最可能出问题的组合：长标题 + 窄容器、无图 + 三列、空价格 + 任意容器。每条样例写成“给定什么输入，在什么容器下，观察到什么就算通过”。例如：给定标题为 40 个汉字、无主图，在详情页侧栏宽度下，卡片高度不超过相邻两张卡片的平均高度，且文字不溢出容器。这个写法让不同人执行能得到同一结论。
缺少完整数据或权限时能做什么
没有后台账号、拿不到真实数据，仍然可以构造样例，但要明确哪些结论不能推出：
- 用浏览器开发者工具临时改文本长度和隐藏图片，可以验证布局边界，但不能据此判断真实数据下是否会出现同样问题。
- 用静态 HTML 片段单独打开组件，可以验证组件自身样式，但不能推出它在真实页面继承样式下的表现。
- 只截一张图作为证据，可以记录现象，但不能证明问题在所有同类页面复现。
一个注明假设的短例子：假设列表页每行固定三列，卡片最小宽度由内容撑开。你在窄容器里看到卡片换行，这只能说明当前容器宽度小于三列所需总宽，不能直接断定是组件写死了宽度。下一步动作是把容器宽度逐步调大，记录卡片在第几个宽度值恢复单行，这个数值才是你写进验收样例的边界依据。
验收样例要写到可复现的程度
一条合格的样例至少包含四要素：输入数据、容器条件、操作步骤、通过判据。缺任何一项，执行者都会凭感觉判断。可以用下面的结构组织，写在自己的文档里即可：
样例编号 - 组件名 - 状态 - 页面容器 - 输入描述 - 操作 - 通过判据
操作步骤要具体到“把窗口拖到 1024 像素宽”“把标题替换为 40 个汉字”，而不是“调整到合适大小”。通过判据要可观察，比如“文字不超出卡片右边界”“按钮仍在可视区域内”，避免“显示美观”这类主观描述。
执行后如何决定下一步
样例跑完会出现三种结果，对应三种动作：
- 全部通过：把这条样例固化为回归项，下次改动组件时优先重跑它，而不是重跑全部页面。
- 部分页面失败：说明问题在容器或页面级样式，回到页面轴补充更多容器宽度，不要急着改组件本身。
- 所有页面都失败：问题更可能在组件自身状态逻辑，此时才值得让开发介入，并把失败时的输入和容器条件一并提供。
需要提醒的是，某个页面在样例中通过，并不等于该组件在所有真实数据下都不会出问题，只说明在你设定的输入和容器范围内表现符合预期。样例的价值在于把“表现不同”这个模糊描述，变成一组可以重复执行、可以交接给别人的具体判断，从而让下一次改动有明确的对照基准。
