基于图像匹配的Web UI自动测试方法研究

罗正军，金旭东，张丽丽

(南京航空航天大学，江苏 南京 211106)

0 引 言

随着Web2.0时代的到来和计算机科学的高速发展，Web应用的功能和体量逐渐增大，人们对软件的产品质量和交付速度提出了更高的要求，而测试工作是保证软件在最终交付时通过质量评价的重要方式。相较于传统的手工测试，自动化测试具有测试精准度高、测试时间短、用例覆盖全面、可回归测试等优势[1-3]。

在国内外的现有研究中，Web应用自动化测试研究的侧重点偏向于功能测试，接口测试和整体自动化测试框架，相较于UI层次，底层接口层面受业务变更影响较小，实施自动化测试的性价比较高。其次，对于Web应用后期的运营维护，用户界面层级不涉及底层框架，在不同时间点可能需要呈现不同的UI，较难达到与手工测试一致的测试覆盖率，控制成本较为困难。此外，用户界面某些元素涉及Web功能测试类别，例如完成页面跳转、元素展示等操作，不同测试类别之间相互融合具有一定的复杂性。

1 测试方法的实现

图像匹配技术主要包含匹配目标(基准目标、待测目标)和匹配标准两个部分。以不同的匹配目标和匹配标准可以划分为局部不变特征点匹配、直线匹配和区域匹配[7]。特征匹配领域中点特征一般证明图像中含有较为突出特征的关键点或兴趣点，具有简单且稳定的特性，并且基于其他特征，例如线特征(两点确定一条直线)，均可以转换为基于点特征的匹配[8-10]。此外，相较于模板匹配技术，特征点匹配可以有效减少匹配计算时间，同时降低图像噪点、畸变及其他因素对匹配性能的影响，是目前实现图像匹配的主要形式[11]。

1.1 测试方法的基本思路

以Python+Selenium为基础，驱动浏览器完成页面整体截图的采集建立匹配基准图片库和测试图片集，使用基于特征点匹配的SURF算法作为主体验证方法，利用RANSAC算法进行特征点的选取优化，并采用基于灰度的模板匹配SSDA算法作为辅助验证方法完成方法架构的整体搭建。通过每次测试得到的截图与基准图片库进行对比，得出每轮测试任务截图正确性的评估结果。

1.2 主体验证方法

特征点匹配算法可以有效减少匹配计算时间，同时降低图像噪点、畸变及其他因素对匹配性能的影响。该文所研究的对象为Web页面，不同项目的用户界面不一致并且图像素材较少，无法满足深度学习训练数据量要求[12]，故选用SURF算法作为基于特征点的匹配分支的主要方法。SURF算法的基本思想与SIFT一致，其在不同的尺度空间内判别局部外观的兴趣点，经计算处理后兴趣点变为与图像的拉伸和旋转无关的特征点。SURF算法的实现原理包括对其构造尺度空间、Hessian矩阵识别兴趣点、特征点过滤和定位、计算特征点主方向、生成特征描述及对其特征点匹配的描述[13-14]。下文即对基于改进SURF算法的Web UI自动化测试方法设计做进一步阐述。

本研究以OpenCV库提供的SURF对象为基础完成基于特征点匹配的方法设计。OpenCV中提供蛮力匹配(Brute-Force)和FLANN(Fast Library for Approximate Nearest Neighbors)匹配两种图像特征点匹配方式。蛮力匹配采用第一个图像中的一个特征点描述子，利用距离计算与第二个图像中的所有其他特征点匹配，最终返回距离最近的一个特征点。FLANN代表快速最近邻搜索包，与蛮力匹配相比，其针对大型数据集中的快速最近邻搜索和高维特征进行了优化，匹配速度更快。该文以Web页面为研究对象，数据规模较小，最终采用蛮力匹配法。

使用SURF算法识别两幅图像中特征点对时可能受到噪声的影响出现误匹配点对问题，当误匹配点对所占比例较高时，将会影响判断两幅图像的匹配度，最终造成测试任务的失败。基于SURF算法原理特点以及误匹配特征点的剔除要求，最终选用RANSAC算法进行选取优化。RANSAC算法的核心思想是从一组含有“外点”(outliers)的样本中估算出正确数学模型参数的迭代算法。“外点”一般指的样本中含有的噪声数据，例如图像匹配中的误匹配点和拟合曲线中的离群点。其假定给定一组(通常很小的)“内点”(可拟合模型的数据)，存在一个可以拟合估算模型参数的过程。

主体验证方法测试流程为首先输入预处理后的基准和待测Web UI图像并设置Hessian矩阵阈值和最小特征点匹配数，利用SURF模组返回各自图像的特征点和描述符，随后创建BF蛮力法匹配器生成特征点队列，若生成的特征点对数量大于最小特征点对匹配数量时使用RANSAC算法优化“内点”，随后将优化后的特征点队列(“内点”)计算对应特征点之间的欧氏距离，以特征点之间的欧氏距离是否为0评估对应特征点的匹配度，并以欧氏距离为0的特征点对占总特征点对的比例判断图像之间的匹配度，当匹配度低于百分之九十五，未成功匹配标识符置为1。最终方法返回“内点”数、匹配率和未成功匹配标识符。

1.3 辅助验证方法

该文的研究对象是Web UI，当待测网页元素整体缩放比例相同或同方向旋转时，因为SURF算法具有尺度不变性、旋转不变性和较高的视角变化鲁棒性，使用改进SURF方法匹配两幅图像的结果为高度匹配，测试通过，但待测元素不符合UI文档规范，实际测试结果应为不通过。为规避上述测试风险，故综合SSDA算法要求图像无拉伸、无旋转能够检测出元素缩放和旋转问题的优势，完成改进SURF+SSDA的Web UI自动化测试方法设计。

1972年SSDA算法(序贯相似性检测)由Barnea和Sliverman提出，该算法是一种模板匹配算法[15-16]。假定S(x,y)为M*N的搜索图像，T(x,y)为m*n的模板图像，Si,j为搜索图像的一个子图，其中i,j为图像左上角坐标，1≤i≤M-m-1，1≤j≤N-n-1。算法原理如下：定义绝对误差、设置误差累计阈值、计算绝对误差、累加绝对误差。

例1：“I thought you did,”said the mouse.I proceed.“Edwin and Morcar,the earls of Mercia and Northumbria,declared for him,and even Stigand,the patriotic archbishop of Canterbury,found it advisable—”[11]

模板匹配SSDA算法的启用代表基于特征点的匹配算法返回值中fail_match的标识符不为0，需利用SSDA算法进一步评估对应图像匹配效果。首先输入基准Web UI整体图像(模板图)和误匹配图像(搜索图)以及随机点误差阈值，SSDA算法随机点误差阈值经实验评估设置为10，随后将图像变为灰度图并确定子图搜索范围；然后利用Numpy模块计算模板图的均值，再以子图范围为基础遍历所有子图并计算子图均值，其中随机不重复的像素点使用random函数近似选取；最后累加计算绝对误差，当误差大于阈值范围时返回最佳匹配区域的左上角坐标。

1.4 综合测试方法

综合测试方法的数据处理包含两个部分，一是Web页面整体截图的采集，二是Web页面整体截图的子图分割。

Web页面截图采集操作流程为：首先输入待测网址，利用Selenium创建Chrome浏览器驱动，随后使用Selenium库内置方法设置浏览器打开网页时为全屏状态，打开网页后获取当前窗口高度和整体页面高度，将整体页面高度除以窗口高度获取窗口滚动次数，随后建立循环截取每一次滚动时的窗口截图并将其转为二维矩阵，最后拼接二维矩阵并将其转换为图像。

Web UI自动化测试出现图像误匹配时需要定位问题在UI表层的位置，因此需要对Web页面截图进行分割以满足测试需要，同时分割Web页面会降低图像规模加快特征匹配的速度，减少自动化测试运行时间。目前，显示器分辨率的长一般为4的整倍数，如1 920，1 680，宽度受Web页面实际长度影响无法精确，故指定每张图像的长为显示器分辨率除以4，宽为320。该部分使用Pillow的Image模块完成编写，图像列表以数字序号形式命名储存在数据库。

基于数据处理，综合自动化测试方法的核心步骤为：首先进行数据处理采集与预处理操作，随后依据改进SURF算法完成正确匹配区域的判定和错误匹配区域的预筛选，然后使用SSDA算法进一步验证错误匹配图像，返回其在整体页面截图中的最佳匹配左上角坐标，最后验证坐标并返回匹配判定结果。具体的方法运行流程如图1所示。

图1 方法运行流程

2 对比实验与结果分析

2.1 实验环境搭建

由于开发Web页面时遵循以用户为中心理念，页面的内容篇幅一般控制在鼠标十次滑动内，故整体截图的数据规模较小，运行该文设计的综合自动化测试方法无需服务器。实验对比环境的具体硬件配置为Intel Core(TM) i7-1065G7 CPU @1.3 GHz处理器+8 GB内存+1 920*1 080显示器。在软件层面，所有程序由Python进行开发，方法设计采用了Opencv3.4.21和Numpy1.19.5版本库，数据采集主要用到Selenium3.141.0版本库，数据持久化采用了Mysql数据库。

2.2 实验设计

实验对象的选取参考三个方面：Web页面设计、页面元素量和网站用户流量。Web网页分为静态网页和动态网页，本研究选取静态网页。相比较于动态网页而言，其无需后台数据库、不含JS等脚本代码并且不可交互，多适用于展示型网页。此外，静态网页能够更加快速确定基准图像，因此研究选取无动态元素或较少动态元素的静态网页进行实验。实验对象评估选取详见表1。

表1 实验对象评估

综合评估网页浏览量和网页设计特征，最终选取腾讯网首页(www.qq.com)作为实验对象。为评估方法的实际有效性，将腾讯网网页存储为本地文件后修改HTML和CSS代码制造Bug。同时选择使用Python搭建小型Web服务器的形式上线本地腾讯网网页，既可以修改本地网页文件制造Bug，又能利用Selenium进行驱动操作以完成实验测试。

分析UI设计需求和腾讯网的网页结构，共设计编写测试用例77条，其中文字相关54条，图片相关23条。其中预置条件说明测试该条用例需要将设备或软件调整至什么状态，用例步骤指明手工测试人员和测试脚本以什么样的顺序测试用例，预期结果是判断测试结果的对照标准。其次，为了对比验证方法效能，Bug检测层面参照用例设计表的用例类型分布比例，人工修改腾讯网本地HTML、CSS文件最终生成18个Bug，其中文字类12个，图片类6个。表2为部分设计用例。

表2 部分用例设计

2.3 实验指标与结果分析

对比实验不以实际项目流程作为依托，不存在项目迭代和自动化团队评价的要求，故摒弃自动化运行成功率、自动化运行频率和自动化维护成本指标，采用自动化用例覆盖率、自动化发现Bug比例、平均测试时长和结果人工验证四项指标评估对比方法。经多次测试，手工测试法、文本验证法和基于图像匹配算法的Web UI自动化测试方法的综合测试结果如表3所示，测试方法在平均Bug指标中具体的分布结果如图2所示。

表3 综合测试结果

图2 各方法Bug分布

综上，实验中改进SURF+SSDA方法除时间效率层面在用例覆盖率、Bug比例中测试时长指标中均优于传统Web UI自动化测试方法。与改进SURF方法相比，平衡一部分时间效率后，在Bug比例指标上得到提升。此外，除结果验证层面方法不具备优势，其余各指标均接近或优于手工测试法。

3 结束语

随着高速互通网络时代的到来，Web软件的更新迭代速度逐渐加快，自动化测试作为提高效率的有效方式被软件公司和学者广泛地研究和使用。从Web整体页面截图出发，该文探讨了一种Web UI的自动化测试方法。该方法使用Selenium采集基准图像和测试图像，结合基于特征点的SURF算法和基于模板匹配的SSDA算法构建验证框架，扩充了Web UI自动化测试方法体系，提升了自动化测试质量。

将图像匹配算法引入自动化测试做了一些尝试，提出的自动化测试方法能够较为全面地覆盖测试用例，较为高效地完成测试任务，并且方法的迁移成本较低可以满足广泛的测试需求。但不可否认的是该研究过程中还存在一些不足的地方。设计的自动化测试方法将网页整体截图分割为大小相同的图片，测试出的Bug图片需人工定位问题点反馈，这在一定程度上增加了测试成本。在之后的改进上可以引入深度学习的目标检测技术标注出所有元素范围框，再进行图像分割，牺牲一部分的测试时间可以加快结果定位，降低人工成本实现自动反馈。其次，图像和文字的色彩验证，特征点匹配算法和模板匹配算法以灰度图像验证两幅图像的匹配程度，无法验证图像色彩是否一致。Web UI中元素色彩是测试中的重要组成部分，后续可综合使用Pillow库和OpenCV库完成颜色空间上的对比测试，使得测试方法更具鲁棒性。