龙岩网站制作：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /f4824f85f18e.html
📄
龙岩网站制作：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要试图用一份“全站通用”的验收样例覆盖同一组件的所有页面，而应先按组件所处的上下文分成两类——结构位置相同但数据不同的页面，以及结构位置本身就不同的页面。前者用同一份样例固定输入、只替换数据；后者必须为每种结构位置单独写一份样例。缺少完整数据或后台权限时，最小可执行动作是：手工构造两组输入，在浏览器里固定同一视口宽度和同一份内容长度，记录组件的高度、对齐方式和溢出行为，再拿这组记录去要求开发或供应商给出解释。这个动作能帮你判断差异来自数据还是来自布局，但不能据此断定是代码缺陷，也不能推出某个页面一定有问题。
先分清两种条件：数据差异，还是结构差异
同一组件在不同页面表现不同，最常见的两种成因需要区别对待。
条件一：组件所处的结构位置相同，只是喂进去的数据不同。例如同一个产品卡片组件，在列表页和推荐位里都放在两栏网格中，唯一区别是标题长度、图片比例或价格位数。这种情况下，验收样例应当只有一份，把输入变量列清楚：标题最短几个字、最长几个字，图片是横图还是竖图，价格是否带小数。执行动作是逐项替换输入，观察组件是否只在某一项输入下变形。如果变形只跟着某一项输入走，下一步就是把这一项写成边界值要求，而不是去改组件本身。
条件二：组件所处的结构位置不同。例如同一个卡片组件，一处放在主内容区两栏网格里，另一处放在侧边栏单栏里，父容器宽度、相邻元素数量和垂直对齐方式都不一样。这种情况下，一份样例必然不够。你需要为每种结构位置各写一份样例，明确父容器的宽度区间、同一行放几个、相邻元素高度是否被拉伸。判断依据很简单：如果改变父容器宽度后组件行为跟着变，那差异来自结构，不是数据。
这两类的分界线是：能否通过只改数据、不改外层容器来复现差异。能复现，归到条件一；不能，归到条件二。
缺少数据和权限时，能执行的最小动作
没有真实后台数据、没有完整页面权限，仍然可以做三件事，且都不依赖任何平台功能。
- 固定一份手工输入。用记事本或临时页面写死内容，标题分别用 4 字、12 字、24 字，图片用同一张但强制拉成不同宽高比。把这三种输入分别套到目标页面上，截图并标注组件的外框高度。
- 固定一个视口宽度。不要一边拖窗口一边下结论。选一个宽度，比如 1280 和 375，各自只测一次，记录组件是否出现换行、截断或高度跳变。
- 记录父容器信息。用浏览器开发者工具查看组件外层容器的计算宽度和 display 值，抄下来。这一步不需要任何后台权限。
做完这三步，你会得到一张对照记录。下一步动作是把这张记录交给能改代码的人，要求对方说明：差异出现在哪一层，是容器约束还是组件内部规则。注意，这张记录只能说明“在什么输入下表现不同”，不能证明“这是 bug”，因为一个组件在窄容器里换行本身可能是设计预期。
构造验收样例时，每份样例要写清四件事
一份可用的组件验收样例，至少要包含以下四项，否则执行人无法复现。
- 上下文：组件放在哪个页面区域，父容器宽度大约多少，同一行有几个同级元素。
- 输入：内容的最短、典型、最长三种取值，图片的宽高比，是否为空。
- 观察点：组件外框高度、文字是否截断、对齐基线是否一致、是否出现横向滚动。
- 判定：什么算通过，什么算例外。例外要写清允许的条件，比如“标题超过 20 字时允许换行两行，但不得撑破容器”。
假设一个场景：某龙岩网站制作项目中，同一个按钮组件在首页横幅里显示正常，在表单提交区却偏下几个像素。按上面的方法，先确认两处父容器高度是否被内容撑开。如果横幅区父容器高度固定，表单区父容器高度由内容决定，那差异很可能来自垂直对齐方式，而不是按钮本身。此时验收样例应分别写明两种父容器的对齐要求，而不是要求按钮在所有容器里像素级一致。
例外情况：哪些差异不该写进验收样例
不是所有表现差异都值得固化成验收项。以下情况应当排除在外，否则样例会越写越臃肿，执行人也无法判断。
一是由用户本地字体或系统缩放导致的差异。这类差异无法通过固定输入复现，写进样例只会制造争议。二是由第三方嵌入内容导致的差异，比如外部地图或视频占位，其高度往往由对方控制，你只能约定占位容器的最小高度，不能约定内部渲染结果。三是内容确实为空时的塌陷，如果设计上允许空状态，就单独写一份空状态样例，不要和正常内容样例混在一起。
还有一点需要克制：当请求量、抓取记录或某项统计突然归零时，不要直接把它当作组件处理正确的证据。归零也可能来自统计口径变化、采集中断或页面根本没被访问到。这些现象可以作为线索，但不能单独支撑验收结论。验收样例的依据始终是你能复现的输入和观察到的输出。
把样例交出去之后，下一步怎么走
样例写完并不等于结束。执行人按样例跑完，会返回两类结果：能复现的差异，和无法复现的差异。能复现的，按上下文和输入补进样例，形成下一轮的固定项；无法复现的，先记录环境和操作步骤，不要急着判定为偶发问题。这个循环的价值在于，它把“同一组件在不同页面表现不同”这个模糊描述，逐步收敛成几条可复现、可判定的具体条件，让后续修改有明确目标，而不是反复调整却说不清改好了没有。
