结论先行：拖拽页面容易「看起来对、用起来错」，验收不能只看截图。把检查项拆成结构、样式、数据、性能四组共 20 项，能覆盖绝大多数线上问题。其中约 12 项可以由脚本或平台自检自动完成，剩下 8 项必须人工确认，主要是空状态、错误提示、权限可见性与真机体验。验收清单要固定下来并纳入发布流程，否则每次靠人记忆，漏项率会随页面数量上升。

一、结构组：页面骨架是否正确

这一组关注「组件在不在该在的位置、层级是否合理」，多数项可自动检查。

• 组件层级与设计稿一致，无多余嵌套容器；
• 无孤立组件：没有既无数据也无交互的占位元素；
• 列表与详情页的字段一一对应，无遗漏字段；
• 弹窗、抽屉的触发入口可达，关闭方式存在；
• 页面标题、面包屑、返回入口齐全。

自动检查项：层级深度、孤立组件、字段映射完整性。人工检查项：入口可达性与返回路径。

组件契约的完整性是这些检查能否通过的前提，见拖拽平台怎么自建组件库。

二、样式组：视觉与适配是否成立

样式问题最容易被截图掩盖，因为截图只覆盖一个分辨率。

• 在 375、768、1280 三个宽度下无溢出、无重叠；
• 文本超长时有截断或换行策略，不撑破容器；
• 图片有宽高比约束，加载前后不跳动；
• 颜色、字号、间距符合设计规范，无硬编码色值；
• 深色模式或主题切换下对比度可读。

自动检查项：溢出检测、硬编码色值扫描、图片宽高比声明。人工检查项：对比度观感与主题切换效果。

三、数据组：取值、校验与边界

这一组是线上故障的高发区，自动化只能覆盖一半。

• 必填项为空时提交被拦截，提示文案明确；
• 数值、日期、枚举的边界值有明确处理；
• 列表空数据、接口超时、接口报错三种状态都有兜底展示；
• 分页、筛选、排序组合后结果正确；
• 提交成功后状态刷新，不出现重复提交；
• 权限不同的账号看到的字段与按钮符合预期。

自动检查项：必填校验、边界值用例、重复提交拦截、接口异常模拟。人工检查项：空状态文案是否得体、权限差异是否符合业务预期。

四、性能组：加载与交互是否可接受

拖拽页面常见的性能问题来自组件堆叠与数据一次性加载。

• 首屏组件数量受控，非首屏内容延后加载；
• 列表默认分页，单页数据量在可接受范围；
• 图片、字体等静态资源有压缩与缓存策略；
• 连续操作不产生重复请求，有防抖或节流；
• 页面在目标低端机型上可正常操作。

自动检查项：首屏组件数、分页配置、重复请求检测。人工检查项：低端真机操作流畅度。

五、20 项清单与检查方式

六、自动化与人工怎么分工

自动化的价值在于「每次发布都跑一遍」，人工的价值在于「判断合不合理」。

• 交给自动化：结构层级、字段映射、硬编码色值、必填校验、接口异常模拟、分页配置、重复请求。这些规则明确、结果可判定。
• 留给人工：空状态文案、权限业务合理性、真机手感、主题观感、入口可达性。这些依赖业务语境与主观判断。
• 不要试图自动化「好不好看」：视觉判断标准不稳定，脚本只能检查规则，不能检查意图。

七、把清单放进发布流程

• 清单固化为发布前检查表，每项有明确责任人与通过标准；
• 自动化项接入持续集成，失败即阻断发布；
• 人工项由产品与测试双签，避免「开发自验」；
• 每次线上问题复盘后补一条清单项，清单随项目增长。

FAQs

Q1：拖拽页面需要单独做测试用例吗？

A：需要，但可以精简。结构、样式类问题用清单加自动化覆盖，数据类按字段与权限组合设计用例，通常一个中等页面 10~15 条用例即可覆盖主要路径。

Q2：20 项验收要花多长时间？

A：自动化部分通常几分钟内完成；人工部分按页面复杂度约 0.5~1 小时。页面数量多时，建议把人工项抽成抽样检查，自动化项保持全量。

Q3：样式问题为什么截图看不出来？

A：因为截图只覆盖一个分辨率和一个主题。小屏溢出、文本超长、图片跳动、深色模式对比度这些问题，必须在多宽度、多主题、真机环境下才会暴露。

延伸阅读

• 低代码应用安全加固清单：鉴权、防注入与审计
• 低代码生成的移动端体验和原生差多少？
• AI 生成页面到底有多能打？低代码平台视觉还原实测报告
• 低代码页面怎么不像“模板脸”？界面美化的七个细节