项目背景

浏览器测试组一直将录像分帧作为速度测试的重要手段之一。录像分帧具有结果简单直观，证据保存完好等优点。所以，虽然录像分帧在效率上比不上代码埋点，Hook 等方法，但一直沿用至今。

2016 年上半年开始，成都浏览器测试组进行主路径精细化测试，对各个常用场景的性能进行全面摸底测试。在浏览器 Feeds 流速度测试的时候，为了降低网络以及网页内容不同造成的误差，开发组建议一个场景进行 300 轮测试。如此多样的场景，加上如此多的轮数，庞大的数据量用人工或者简单自动化是无法处理的，我们必须要想新办法。

同时，深圳浏览器一直用摄像头视频分帧来进行网页速度测试，随着网页的变化，以前的自动化程序识别率逐步降低，也到了该更新的时候了。

项目现状

深圳网页速度测试，共 2 个关键帧，场景如下：

1、开始关键帧，通过查看屏幕上的白点来判断；

2、首屏完成关键帧, 通过查看下部网页是否铺满来判断。

成都 feeds 速度测试, 共 3 个关键帧, 场景如下：

1、开始，通过查看屏幕顶部的红蓝块变化，判断开始；

2、文字加载完成；

3、全部加载完成。

项目痛点

老方案的录像分帧速度测试，是由人工确定的” 饱和度” 算法，当页面铺满一定阈值的时候，确定为不同的状态。但这个方法也有明显的痛点。

1、饱和度阈值算法，必须针对具体的场景，由人工调试确定。

换一个场景，甚至网页发生了变化，必须重新人工调试阈值，如果场景一多，这是个较大的负担。而成都的主路径精细化测试，涉及到很多不同的场景，比如启动，比如多窗口，比如 feeds 流，比如下载等。

2、速度测试成都用的是屏幕录像，而深圳用的是摄像头。两者的视频质量差别很大，屏幕录像的饱和度和阈值，无法用在摄像头视频上，反之亦然。

所以，新方案必须要考虑下面两个因素：

（1）新方案必须可以运用在不同场景, 而无需重新开发；

（2）新方案必须可以同时适用于摄像头视频和屏幕录像视频。

今年上半年，google 的阿尔法狗很火同样，我们的这个需求，也可以用阿尔法狗的原理来实现！

技术实现

通过采用有监督的模式，通过人工标注一些关键帧，然后机器学习这些人工标注的关键帧，是否就可以自动识别新的性能视频呢？我们开始着手尝试这个系统。

系统在 Windows 上实现，对于 Windows 开发，作者习惯使用 C#，因此技术选型也基于 C#。项目需要用到两个开源库。

1、图像处理库：Emgu.net，也就是 OpenCV 的 C# 封装，支持常用 OpenCV 视频，图片处理功能。

2、机器学习库：Accord.net，是在 AForge.NET 项目的基础上封装和进一步开发而来。因为 AForge.NET 更注重与一些底层和广度，而 Accord.NET Framework 更注重与机器学习算法以及提供计算机视频、音频、信号处理以及统计应用相关的解决方案。

有了现成的机器学习库和图像处理库以后，我们只需要编写程序，选择合适的特征维度，通过机器学习即可识别相应场景的图片。

整体流程如下：

那么，应该选择哪几个维度的特征呢？根据人的认知，结合项目实际，我们选择下面 3 个维度的特征。

1、变化区域：比如提取下面红框范围，表示两张图片之间的明显变化区域；

2、颜色直方图：颜色直方图永远都是图片处理的重要特征之一；

3、帧序列号：由于速度测试都是通过脚本进行，并不是人为点击，所以相同场景的时间轴都比较类似，比如点击按钮可能都在 1.2s 左右。 帧序列号都是第 40 帧左右。

提取特征以后，我们可以采用机器学习方法，比如神经网络，学习特定场景的特征。训练完成以后，即可以识别新的分帧图片。

效果

方案对比：

使用机器学习处理录像分帧以后，性能测试的效率明显提升。

关注微信公众号腾讯移动品质中心 TMQ，获取更多测试干货！