茂名网站开发同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /18632044e5c1.html
📄
茂名网站开发同一组件在不同页面表现不同时怎样构造验收样例
先把组件在出现差异的两个页面各截一次完整状态，列出差异点，再为每个差异点写一条“给定输入—预期输出—判定方式”的样例。没有后台数据或权限时，仍可用浏览器开发者工具改本地样式、改文案长度、改屏幕宽度来复现差异，但只能验证前端表现，不能据此推断服务端渲染或数据源是否正常。
先固定“同一组件”的边界，差异才有可比性
同一组件在不同页面表现不同，常见原因不是组件本身坏了，而是两个页面的容器宽度、父级样式、传入数据长度或加载顺序不同。验收样例要先把这些变量写清楚，否则你测的其实是两个不同对象。
假设某卡片组件在列表页显示正常，在详情页右侧栏出现文字截断。此时可写下的边界是：同一份组件代码、同一套全局样式，差异变量是容器宽度与传入标题长度。这个假设不需要后台权限就能验证。
- 记录组件名称与所在页面的位置，而不是只写页面名。
- 记录容器宽度、外边距、字体继承来源这三项中最可能变化的一项。
- 记录传入数据的长度范围，例如标题为 8 字、16 字、24 字三种。
把差异点转成可判定的样例条目
每条样例只描述一个差异，包含三部分：给定条件、预期表现、判定方式。判定方式要能被第二个人重复执行，而不是“看起来正常”。
- 给定容器宽度 320px、标题 16 字，预期标题换行且不溢出卡片，判定方式为卡片右边缘与文字右边缘的间距不小于 8px。
- 给定容器宽度 320px、标题 24 字，预期最多显示两行并出现省略，判定方式为第三行文字不可见。
- 给定容器宽度 768px、同一标题，预期单行显示，判定方式为文字底部与卡片底部间距一致。
执行第 1 条后，如果文字溢出，下一步不是改组件，而是先确认是容器宽度被压缩还是文字未设置换行。这个判断决定了你改的是页面布局还是组件内部样式。
缺少数据或权限时，最小可执行动作是什么
没有后台数据，可以用浏览器开发者工具临时修改 DOM 中的文字长度和容器宽度。操作是：选中组件外层元素，在样式面板中把宽度依次改为 320px、768px，并手动替换文字为 8 字、16 字、24 字。每次修改后截图并记录当前宽度与字数。
这个动作能验证的是前端样式在不同宽度和文字长度下的表现。不能推出的是：服务端返回的数据是否完整、组件在真实数据下的渲染顺序、以及不同账号权限下是否显示不同内容。
如果连开发者工具也不方便使用，退一步的做法是：把两个页面的完整截图并排放在一起，用标注工具画出组件的边界框，量出文字与边界的距离。这只能作为差异线索，不能作为最终验收结论。
用一组对照样例区分“容器问题”和“组件问题”
要判断差异来自容器还是组件，可以构造一组对照：保持组件代码不变，只改容器宽度；再保持容器宽度不变，只改传入文字长度。两种改法各执行一次，观察差异是否复现。
- 只改容器宽度就复现差异：优先检查页面布局与父级样式。
- 只改文字长度就复现差异：优先检查组件内部的换行、省略或高度计算逻辑。
- 两者都改才复现：说明是组合条件触发，样例中必须同时写明宽度与字数。
假设在 320px 宽度下，8 字标题正常、16 字标题溢出，而把宽度改到 768px 后 16 字标题也正常，那么可初步判断为宽度与文字长度的组合问题。下一步应把 320px 与 16 字作为固定回归样例保留，而不是只修当前页面。
样例写完后，怎样决定下一步动作
每条样例执行后只有三种结果：通过、不通过、无法判定。不通过的样例要附上截图和当前宽度、字数、浏览器窗口尺寸；无法判定的样例要写明缺什么条件，例如缺少真实数据或缺少登录权限。
如果多条样例都指向同一容器宽度阈值，下一步是统一该组件在所有页面的容器规则，而不是逐页修补。如果样例结果分散、没有共同阈值，下一步是回到组件内部检查样式继承和加载顺序。无论哪种结果，都不要用“某个页面正常”来推断其他页面也正常，因为验收样例只对写明的条件负责。
