在某些测试中，你将有机会报告视觉缺陷。视觉缺陷与网站或应用程序的图形用户界面相关，例如：
布局框架问题，例如文本/元素未对齐
响应式设计问题，例如某个元素在一台移动设备上显示正常，但在另一台设备上不显示
文本/元素意外重叠
文本/元素被截断
任何可以通过修改 HTML 或 CSS 文件解决的问题
重复性问题
当视觉问题重复出现时，即使每次出现的 URL、链接、图片等不同，也只需提交一次报告。如果问题出现在同一页面或不同页面，也适用此规则。单次缺陷报告应说明其他相关的 URL、链接、图片等也受到影响。
不应为每次出现的问题提交单独的报告，否则将被拒绝。客户只需通过一次引用即可获知视觉问题，他们会调查并解决所有相关问题。
示例：
某些元素显示相同的图形问题，例如文本或图片超出了容器大小
输入框不足以显示默认文本，导致文本显示不完整
提示（teasers）意外覆盖其他元素
升级为功能性缺陷
一旦视觉缺陷妨碍了功能使用，它应被报告为功能性缺陷，即使功能本身没有损坏。
如果用户可以通过另一条路径或选项直观且轻松地使用该功能，那么用户实际上不会被阻止使用功能，因此该问题仍为视觉问题，而不是功能性缺陷。
视觉问题的文档化
视觉缺陷报告必须包含截图。如果某个操作会导致视觉问题，可能还需要附加录屏。
有关缺陷报告文档要求的更多信息，请参阅我们的文章 Bug Report Requirements。
响应式与非响应式网站内容：隐藏的视觉缺陷
响应式缺陷可能会让你困惑，不确定它们是内容问题还是视觉缺陷：这些问题由网站的响应式设计引起。
这些问题在快速浏览网站时不易被注意，直到你突然发现某个页面的所有信息都存在，但显示方式非常不合适。如果是这种情况，我们可能会忽略它——从而错过提交缺陷！
示例案例
测试响应式设计时的情况
在测试响应式设计时，你可能会遇到这样的情况：某个页面在智能手机上显示完美（例如“热门电视节目和电影类型”页面），但当导航到某个分类页面（如“喜剧”）时，内容几乎看不见，因为元素太小了。
如何识别
注意页面之间缩放是否不一致
检查文字在你的屏幕尺寸上是否难以阅读
注意导航元素是否变得太小而无法点击
留意是否在某些页面出现横向滚动，而其他页面没有
免费在线响应式测试工具
Google Chrome Lighthouse（前身为 Google Mobile-Friendly Test）是确保网页在移动设备上优化的重要工具。该工具可以通过评估移动可用性因素（如字体大小、点击目标和视口配置等 SEO 方面）帮助测试人员识别网页上的视觉问题。
如果你遇到视觉缺陷，这个工具可以帮助你判断问题根源是否为页面的响应式设计。
与以前独立网站运行的 Google Mobile-Friendly Test 不同，Google Chrome Lighthouse 需要添加到 Google Chrome 浏览器中，并直接在被测试的网站上运行。安装流程和详细教程可在此处获取。