白屏检测系统的设计与实现

一、 什么是白屏问题？

白屏问题即一个APP的某个窗口，由于开发人员的代码有误，导致没有渲染出预期的内容，而只留下空白背景的问题。

以笔者的浅见，这类问题多发生于以下几种开发场景：
1. 窗口嵌套: 如在APP原生窗口A中嵌套上Flutter开发的跨端窗口B
2. Web View: 如在APP中通过浏览器打开渲染一个Web页面

这两种场景都需要原生APP + X的模式来开发，常规情况下可能是两个开发人员或团队。所以经常存在参数没有约定清楚导致窗口出现白屏问题。另外WebView设置的堆栈内存大小，如果限制得太小，或者DOM层级过深，渲染过程中也有可能发生OOM，导致白屏。

因此，需要一种即时的测试方法或工具，可以在新包打好之后快速检测该安装包是否存在白屏Bug，并在发现问题后立即告警，提醒开发人员尽快修复，提高测试效率。

图1 某邮箱APP出现白屏问题的示例

---

二、 问题分析与拆解

2.1 人工判定一个白屏问题的逻辑

测试人员在安装好一个新的包，对特定的功能展开测试前心里会有一个预期，屏幕中特定的位置应该渲染出特定的控件，或者在进行一些操作后，预期界面中的控件会发生特定的变化。

图1某邮箱APP出现白屏问题的示例，我们可以很清晰的看到，预期的顶部工具栏、左侧账号树、中间的邮件列表、右侧的读信区域，全部没有渲染出来。其中任何一处没有渲染正确就已经很严重了，全部没有渲染出来的严重程度就更不用说。

2.2 自动化判定一个白屏问题的算法思想

• 判定对象
  自动化测试中，为了便于回溯和排查问题，我们会在特定的步骤执行前后获取当前屏幕的截图，并保存下来。因此截屏是一个常见且必要的操作，我们可以使用这些图片，通过特定的算法对是否出现了白屏问题加以判别。

• 算法思想
  本文所使用的截图白屏检测算法，其流程如图2所示，具体分为图像灰度化、图像二值化、计算置信度等3个部分，将在下一小节分别做介绍。

图2 白屏检测算法流程

---

三、 白屏检测算法

一句话说明算法思想: 对图片进行一定的预处理之后，统计出「前景像素点」和「背景像素点」的数量，并计算出比例。当这个比例低于设定的阈值时，判定当前图片中发生了白屏问题。

3.1 图像灰度化

• 原理: 将3个颜色（即R红色，G绿色，B蓝色）通道的原图像按一定算法转换为由灰度值（即Gray，图像的明暗程度，取值范围[0, 255])单通道表示的图像。
• 目的: 降低图像数据矩阵的维度，减少后续处理时程序的计算量，提高处理和计算速度。

3.2 图像二值化

• 原理: 在灰度图的基础上，按照一定的算法选定一个阈值，将灰度值在阈值以下的点灰度值设置为0（即最暗），反之则设置为255（即最亮）。选定阈值的的算法有很多种，本文及所实现的系统采用OSTU算法。
• 目的: 进一步将我们所需的图像前景信息从背景中完全分离出来，使其更加明显，为下一步的计算提供基础。

3.3 计算（判定为白屏）置信度

• 原理: 计算二值图中灰度为255的点（即背景点/非前景信息的点）的个数，然后求其在整张二值图中的占比。
• 目的: 该步骤得到的百分数值即为判断该图片对应的原图是否为一张白屏图像的基础。

---

四、 白屏检测系统的设计与实现

如图3所示，白屏检测系统除上述算法模块外，还包含UI自动化模块、后台计算/处理模块和前端平台模块3个部分。下面讲逐一进行介绍。

图3 白屏检测系统各模块

4.1 UI自动化任务

前文中说到，白屏检测可以用到现有UI自动化任务的Step截图，只需上传到系统后台的接口即可。另外，针对业务中重点关注的一些白屏高发、易发或核心场景，还可以建立专项的白屏检测UI自动化任务，每日定时执行检测。

特别需要注意的是，如果要检测的界面没有调整到最大化，需要对截屏进行裁剪，只取要检测的部分，如此可以降低系统误判的几率。参考代码如下：

def get_cropped_screenshot(uia_element, file_path):
	"""
	@param uia_element: 需要截取的uia控件，可传入主窗体的实例
	@param file_path: 图片文件存储的路径
	"""
	from PIL import ImageGrab
	# 获取uia控件的坐标，包含Left，Top， Right，Bottom
	element_rect = uia_element.BoundingRect.All
	ImageGrab.grab().crop(element_rect).save(file_path)

4.2 后台计算/处理模块

前文中提及的白屏检测算法也实现在该模块中，该模块的作用即对上传上来的图片进行检测，并将检测结果、图片文件、日志文件进行持久化。

并在一个检测任务执行结束后，如发现了疑似白屏记录，推送告警消息，便于开发人员即时了解到新包的问题，并快速定位、及时修复，提高测试效率。

4.3 前端页面系统

基于前文中所述的算法思想，我们可以快速得实现UI自动化测试任务 + 后台检测模块的最小功能组合。随着测试记录的增多，为了便于查看当前和过往的测试结果，即可按需实现一个前端页面。图4是笔者据此实现的系统某界面。

在此界面中，可以：

• 查看每次检查的置信度、阈值、结果、图片、时间等信息；
• 还可以做删除、提单、忽略等操作；
• 还可以手动对截图进行灰度化、二值化等处理，便于确认处理过程和结果的正确性。
• …

此处因人而异，丰俭由人，不再过多赘述。

图4 白屏检测系统-测试记录界面

总结

白屏检测作为一种辅助检测工具，在实际应用中具有接入简单、通用性高的优点。设定好例行的检测任务后，与客户端的打包流水线结合起来，可以做到包级别的检测粒度和分钟级别的检测效率。以此可以提高测试效率，帮助开发人员快速发现白屏问题。