视觉QA检查清单：每次发布前应验证的内容

在没有视觉QA的情况下发布版本，无异于一场赌博。功能测试可以确认特性是否正常工作，但无法确认界面是否显示正确。一个按钮可能通过了所有集成测试，却在移动端 Safari 上与表单字段重叠。一个标题在英文下完美呈现，翻译成德语后却撑破了容器。

这份检查清单涵盖了每个Web团队在发布上线前应执行的视觉验证项目。你可以直接使用，也可以根据自己的技术栈和目标受众进行调整。

为什么需要视觉检查清单

视觉缺陷的破坏力尤其大，因为用户会第一时间看到。一个错位的元素或破碎的布局会严重损害用户信任，而一个缓慢的API响应则不会如此。然而，视觉QA往往是发布流程中最随意的环节——由不同的人执行，缺乏统一标准，且做法不一致。

书面检查清单通过使视觉QA变得可重复、可度量来解决这个问题。团队中的每个人都清楚"视觉验证通过"意味着什么，不会因为有人忘记而遗漏某类检查。

布局与间距

布局问题是最常见的视觉回归缺陷。请系统地检查以下各项：

页面结构完整 — 头部、主内容区、侧边栏（如有）和页脚按正确顺序渲染，且间距符合预期。
Grid 和 Flexbox 布局正确换行 — 在桌面端、平板和移动端宽度下验证。注意是否有意外的列换行或内容溢出容器。
各区块间距一致 — 外边距和内边距符合设计规范。注意区块之间是否过于紧凑或过于疏远。
无元素重叠 — 检查绝对定位元素（工具提示、下拉菜单、模态框）不会覆盖内容或超出视口。
粘性和固定元素行为正确 — 粘性头部和固定底部在滚动时应保持位置，不遮挡其后方内容。

如需了解跨断点的自动化布局验证，请参阅我们关于跨浏览器测试工作流的指南。

排版与内容

文本渲染问题虽然细微，但会影响可读性和专业形象：

标题层级正确 — H1、H2、H3 的大小和粗细符合设计系统。
正文可读性良好 — 字号、行高和对比度满足无障碍标准。使用真实内容而非占位文本进行测试。
无文本截断或溢出 — 长标题、翻译字符串和动态内容能够在容器内正常显示。特别注意较长语言（如德语）的情况。
链接可清晰辨识 — 下划线、颜色或其他样式使链接在不依赖颜色的情况下也能被识别。
代码块和预格式化文本正确渲染 — 等宽字体正常加载，语法高亮生效，长行出现水平滚动条。
列表标记正确 — 有序列表显示数字，无序列表显示圆点，嵌套层级清晰可见。

响应式行为

响应式缺陷在用户报告的视觉问题中占比极高：

移动端布局（375px 宽度） — 在典型移动端宽度下验证完整页面。导航折叠为汉堡菜单，图片缩放，内容垂直堆叠。
平板布局（768px 宽度） — 这是响应式缺陷最容易隐藏的位置。双列布局应平滑过渡，触控目标大小应足够。
桌面端布局（1440px 宽度） — 主要的桌面端体验。多列布局正确显示，最大内容宽度得到尊重。
宽屏桌面端（1920px+ 宽度） — 内容不应拉伸以填满超宽屏幕。检查最大宽度和居中效果是否正确。
方向切换 — 在移动端和平板上，在竖屏和横屏之间切换不应破坏布局。
缩放行为 — 浏览器缩放至 150% 和 200% 不应导致内容重叠或被隐藏。

跨浏览器渲染

不同的浏览器引擎对 CSS 的解释存在差异。至少检查以下组合：

Chrome 桌面端 — 你的基准渲染。大多数用户会看到这个版本。
Firefox 桌面端 — 可发现 Gecko 引擎在 flexbox gap、字体度量和自定义属性方面的特有问题。
Safari 桌面端 — WebKit 在 backdrop-filter、position-sticky 和 flex-wrap 方面有独特行为。
Safari 移动端（iOS） — 所有 iOS 浏览器都使用 WebKit。视口处理、安全区域内边距和滚动行为与桌面端不同。
Chrome 移动端（Android） — 验证触控目标、viewport meta 行为和移动端特有样式。

不必为每个页面检查所有浏览器。根据流量数据确定优先级：覆盖代表 90% 受众的浏览器组合。更多关于构建浏览器矩阵的内容，请参阅我们的视觉回归测试指南。

交互状态

交互元素具有多种视觉状态，每种都需要验证：

按钮 — 默认、悬停、聚焦、激活、禁用和加载状态全部正确渲染，且视觉上可区分。
表单输入 — 空白、聚焦、已填写、错误和禁用状态。检查错误消息是否出现在正确位置且不会导致布局偏移。
导航 — 当前页面指示器、链接悬停效果、下拉菜单在正确位置打开和关闭。
模态框和对话框 — 平滑打开，在所有屏幕尺寸下正确居中，并显示可见的背景遮罩。关闭按钮可访问。
工具提示和弹出框 — 相对于触发元素出现在正确位置。不被 overflow-hidden 容器或视口边缘裁剪。
加载状态 — 骨架屏、加载动画和进度条在数据获取期间正确显示。

图片与媒体

视觉媒体需要单独的检查项目：

图片正常加载和显示 — 无破损图片图标。所有图片都有适当的 alt 文本以确保无障碍访问。
图片尺寸正确 — 无变形或意外裁剪。宽高比保持不变。
响应式图片提供适当尺寸 — 移动设备不下载桌面端尺寸的图片。
视频嵌入正常工作 — 播放按钮正常显示，宽高比正确，嵌入内容不溢出容器。
图标正确渲染 — SVG 图标以正确的尺寸和颜色显示。图标字体正常加载，不显示回退字符。

无障碍与色彩

视觉QA与无障碍访问有很大的重叠：

色彩对比度满足 WCAG AA 标准 — 文本和交互元素与背景之间有足够的对比度。如适用，同时检查浅色和深色主题。
焦点指示器可见 — 键盘导航时，所有交互元素应显示清晰的焦点边框。
深色模式正确渲染 — 如果你的应用支持深色模式，验证所有组件、图片和文本在两种主题下都可读。
不仅依赖颜色传达信息 — 错误状态、状态指示器和必填字段除颜色外，还应使用图标或文字辅助说明。

与性能相关的视觉检查

性能问题可能表现为视觉问题：

加载过程中无布局偏移 — 内容不会因字体、图片或脚本的加载而跳动。这通过累积布局偏移（CLS）来衡量。
Web 字体在绘制前加载 — 页面加载时不出现无样式文本闪烁（FOUT）或不可见文本（FOIT）。
首屏内容快速渲染 — 页面的可见部分应在良好网络条件下 1-2 秒内显示。

发布前验证工作流

使用以下工作流确保检查清单执行的一致性：

部署到预发布环境 — 在尽可能接近生产环境的环境中进行验证。
运行自动化截图测试 — 在你的浏览器和设备矩阵中捕获基线。设置说明请参阅我们的 CI/CD 自动化指南。
审查自动化差异 — 将每个差异分类为有意更改、回归缺陷或噪声。
进行手动抽检 — 自动化测试覆盖静态渲染。手动验证交互状态、动画和边缘情况。
记录结果 — 记录哪些检查通过、哪些失败以及修复了什么。这为未来的发布创建审计跟踪。
批准或阻止 — 如果所有检查通过，批准发布。如果存在关键视觉缺陷，在修复之前阻止发布。

根据团队需求调整清单

这份检查清单有意设计得较为全面。对于你的团队，可以根据以下因素进行定制：

你的技术栈 — 如果不支持深色模式，移除相关检查。如果使用设计系统，增加组件级别的检查。
你的受众 — 如果 95% 的流量来自 Chrome，缩小跨浏览器范围，增加移动端测试。
你的风险承受能力 — 营收关键型应用需要更严格的检查。内部工具可以使用更轻量的流程。

关键在于一致性。一份每次发布都能执行的简短清单，比一份在截止日期压力下被跳过的全面清单更有价值。

使用 ScanU 继续探索

自动化截图测试可以处理这份清单中最耗时的部分：布局验证、跨浏览器渲染和响应式断点检查。ScanU 跨浏览器和设备捕获截图，让你的团队可以专注于交互状态和边缘情况。在 Pricing 页面了解方案选项，在 Features 页面了解平台功能，在 FAQ 页面查看常见问题解答。