徐时怀,陆慧娟,叶敏超,严 珂,金 群
(1.中国计量大学 信息工程学院,浙江 杭州 310018;2.日本早稻田大学 人间科学学术院,日本 所泽 359-1192)
软件图形用户界面(graphical user interface,GUI)是软件设计中重要的组成部分之一.一个软件图形界面视觉设计的好坏主要是由软件界面的功能配置合理性、操作易用性和美观程度等方面决定.软件GUI视觉设计的好坏直接影响到用户体验并且在一定程度上决定软件是否会被用户接受并取得市场效益[1].最初的软件测试往往只注重于测试软件的功能和性能,而忽视了软件图形用户界面对软件使用者的重要性[2].随着互联网的普及,软件测试人员通过测试软件GUI的视觉设计来判断其是否满足用户需求的过程变得越来越重要.软件界面测试是衡量一个软件界面是否满足用户需求而进行评估的过程,包括界面一致性测试、信息反馈测试和美观程度测试等.界面一致性测试判断的是软件GUI的视觉设计是否具有整体性,例如同类数据显示精度是否统一,各控件的对齐方式、输入界面和输出界面在外观、布局和交互方式上是否一致等[3].信息反馈测试要求软件用户图形界面有足够的输入检查和错误提示功能来确保用户在操作软件时得到及时的反馈[2].界面美观程度测试考查的是软件GUI的色彩舒适度,以及界面布局整洁程度和关键信息突出程度等.本文重点研究软件GUI的美观程度的自动评价算法.过去几乎所有的软件GUI测试都是由专业人员人工完成的,这不仅需要大量的人力而且造成测试不便.此外,随着图形用户界面设计行业的日益兴起,用户的需求将越来越难以满足,并且要求将更加严格.CHOI等人提出一种自动化测试算法来测试软件GUI从而提高测试效率和精度[4].Yeh T等人建议在GUI测试中使用计算机视觉技术来实现GUI测试自动化从而避免人力资源的浪费[5].目前,深度神经网络(deep neural network,DNN)是计算机视觉应用中最有效的方法之一.所以,本文对比了使用传统机器学习与基于DNN的图像分类技术实现软件界面美观程度的自动测试.
同时,系统被部署到云平台上供更多用户方便的使用.使用云计算平台进行软件测试有利于按需使用软硬件资源,降低测试成本,提高测试的效率、灵活性以及便捷性,特别适合于软件的功能和性能测试[6-7].系统为用户提供了一个自动截屏上传程序来截取各类软件的图形界面,大量的屏幕截图及相关信息会被自动上传到云服务器中.随后使用两种不同的图像分类算法进行自动分类:1)传统的方向梯度直方图(histogram of oriented gradient,HOG)特征配合支持向量机(support vector machine,SVM)分类器;2)深度神经网络模型AlexNet,同时具备特征提取与分类功能.以上两种图像分类模型对计算机资源存在巨大的消耗,为满足计算性能的需求,系统中的云测试平台拟采用云服务器进行数据存储、模型训练和运行Web服务.云服务器系统支持各种数据处理、计算模型,满足不同领域、不同特点的计算需求,解决了海量界面图像的存储问题和两种图像分类模型对计算资源的巨大消耗.
本文的最终目标是开发一套帮助人们评价软件GUI视觉设计好坏的系统,从而让机器代替人力去自动完成测试任务.系统的不同部分对应了不同的模块和功能.首先,编写自动截屏上传模块供用户使用,当用户使用各类软件时,自动截屏上传模块实时截取各类软件的GUI图像并自动上传到云服务器的数据库中.其次,开发用户评分系统为数据集中的软件GUI的截屏图像进行评分并标记.在模型训练阶段,通过存储在云服务器上的图像训练两个图像分类模型,从而得到最终的模型.之后,用户可以借助两个图像分类模型来自动区分软件GUI的美观程度并标记为好或坏.系统架构如图1.
图1 系统架构Figure 1 Architecture of the system
图1中,系统主要分为两个部分:客户端和云服务器.客户端主要由两个部分组成,自动截屏上传模块和网页浏览器.云服务器主要由Web服务器、数据库和图像分类模型组成.首先,Web服务器用于向用户显示系统的界面并接收用户请求.其次,数据库用于存储软件界面图像的信息,包括图像编号、存储路径和相应的软件名称.图像分类模块则用来完成GUI图像的自动分类.屏幕截图接收模块和网络爬虫模块先将图像存储到文件系统,再将其存入数据库中.两者的不同之处在于前者接收用户通过自动截屏程序自动上传的图像,而爬虫模块从互联网的搜索引擎中获取软件GUI图像.
HOG特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子.它与其它的图像几何特征的不同之处在于HOG不从图像的整体去考虑其特征,而是将图像划分为多个小的细胞单元(cell),每个细胞单元由8×8个像素点构成一块连通区域,然后计算和统计所有细胞单元中各像素点的梯度方向直方图来构成特征[8].作为一种经典的图像分类算法,HOG特征结合SVM分类器已经被广泛应用于图像分类中,尤其在行人检测和图像识别方面获得了极大的成功.
HOG算法流程如图2.
图2 HOG算法流程图Figure 2 Flowchart of the HOG algorithm
图2中,首先调整输入的软件GUI图像的尺寸,然后再把彩色GUI图像转换为灰度图像,然后利用γ压缩公式标准化γ空间和颜色空间,γ可以取1/2.如式(1)
I(x,y)=I(x,y)γ.
(1)
然后计算图像梯度,图像中像素点(x,y)的梯度如下式
Gx(x,y)=H(x+1,y)-H(x-1,y),
(2)
Gy(x,y)=H(x,y+1)-H(x,y-1).
(3)
式(2)、(3)中Gx(x,y),Gy(x,y),H(x,y)分别表示输入图像中像素点处的水平方向梯度、垂直方向梯度和像素值.像素点处的梯度幅值和梯度方向分别为式(4)和式(5)
(4)
(5)
然后为每个细胞单元构建梯度方向直方图,再把细胞单元组合成大的块(block),块内归一化梯度直方图,最后将检测窗口中所有重叠的块进行HOG特征的收集,并将它们组合成最终的特征向量供分类器使用.
SVM是基于一个线性的判别函数流行的分类器.它非常适合用于二进制分类并一直广泛地应用在关于图像识别和数据挖掘的研究中[9].SVM具有如下特点.
1)通过降维的方式,将非线性的问题转化为线性问题,最终决策函数也是仅由少数的几个支持向量确定的,计算的复杂度只和支持向量的数目有关,和样本空间的实际维数无关,也是支持向量机能有效地解决“维灾难”问题的原因[10].
2)支持向量机解决的是一个凸二次规划的Lagrange对偶问题,如此就能避免局部最优解[11].
3)SVM实现的是结构风险最小化,能在给定数据逼近精度与逼近函数复杂度之间寻求一个折中点,获得更好的推广能力.
HOG+SVM是传统的机器学习算法,其速度和效果综合平衡性能较好.在本系统中,首先输入训练集图像,随后对图像进行预处理,再通过HOG算法提取图像的特征,然后将这些特征文件和标签输入到SVM进行训练,训练之后用测试集进行测试.具体流程如图3.
图3 HOG+SVM算法流程图Figure 3 Flowchart of the HOG+SVM algorithm
首先利用网络爬虫爬取549幅软件GUI图像作为实验数据集,并打上标签.再随机抽取其中449幅图像作为训练集,随后再对这些训练集进行预处理,预处理的流程包括尺寸调整和归一化.系统把训练集中的所有样本都调整为128×128像素的图像,然后再定义8×8为一个块进行直方图特征提取,并将这些特征文件和标签输入到线性SVM中进行训练得到最终模型.最后用余下的100幅利用网络爬虫爬取的图像作为测试集进行测试,得到最终的分类精度.
深度学习是基于人工神经网络的一个机器学习方向.其主要包括卷积神经网络、递归神经网络和深度信念网络[12-14].许多基于卷积神经网络(convolution neural network,CNN)的网络模型在图像分类、检测分割和其他方向上有着广泛的应用[15-17].AlexNet就是关于深度学习的一个经典模型,AlexNet是2012年由多伦多大学的Alex Krizhevsky等人提出的深层神经网络模型[12].该模型在海量图像分类领域取得了突破性的成果[15],其在2012年的ImageNet大规模视觉识别竞赛(ImageNet large scale visual recognition competition,ILSVRC)中Top5的错误率是17%,大大提高了图像识别的准确性.
AlexNet模型的结构如图4,该模型共有8层网络结构,包括5个卷积层和3个全连接层.AlexNet模型与基本的CNN模型的不同之处在于AlexNet模型在准确性和泛化性方面做了如下改进:
1)为数据集引入数据增强来减少模型的过拟合;
2)使用ReLU函数作为激活函数来提高训练速度,而不是传统的Sigmoid函数;
3)添加LRN(局部响应标准化)层来提高训练精度;
4)使用Overlap Pooling作为池化层来提高训练精度和减少模型的过拟合;
5)使用Dropout训练方法来减少模型的过拟合.
图4 AlexNet模型Figure 4 AlexNet model
在模型训练方面,AlexNet使用反向传播算法训练模型的参数,并使用多GPU并行训练来提高训练速度.AlexNet的出现极大地提高了ILSVRC的图像分类精度,并且与传统的图像分类算法相比具有明显的优势.
迁移学习是运用已有的知识对不同但相关领域问题进行求解的一种机器学习方法,其目标是完成知识在相关领域之间的迁移.对于卷积神经网络而言,迁移学习就是要把在特定数据集上训练得到的“知识”成功运用到新的领域之中[18].例如,Hoo-Chang等人用胸腹淋巴结数据集微调从自然图像数据集上预训练的CNN模型应用于医学领域中胸腹淋巴结图像检测任务[19]并取得了很好的效果.
考虑到软件GUI数据样本量小,而AlexNet网络参数众多,需要大量的训练样本,否则极易造成过拟合.因此,本文根据迁移学习的思想,利用在ImageNet数据集上预训练完毕的AlexNet网络在软件GUI图像数据集上进行迁移训练,保留预训练模型的全部卷积层参数,微调最后三层全连接层,使AlexNet网络能够适应对软件GUI图像的分类以保证深度神经网络模型AlexNet能够在数据样本量小的情况下获得好的检测效果并避免了重复的大规模计算.深度学习模型在性能上大大超过了传统的机器学习模型,同时深度学习模型对图像的几何学和光学的形变都保持了良好的不变性.
本系统只对软件的GUI做出“美观”和“欠美观”的分类.普通用户可以访问Web服务器上传软件GUI图像并且使用两种图像分类模型对软件GUI图像进行自动评估并得到测试结果.后台标记人员可以检查并更改数据库中错误的系统测试结果并保存以便管理员利用这些图像对模型进行多次训练.
该系统所需的硬件和软件包括云服务器和多个组件.系统中每个模块所需的工具和环境如下所示:
4.1.1 云服务器
PHP 7.0.11:PHP(Hypertext Preprocessor)是一种通用的轻量级的开源脚本语言,是动态嵌入在HTML中的,它预先设置了连接数据库的可变函数.与其他编程语言相比,PHP具有更好的开发小型Web项目的能力.此外,配置PHP环境相对方便,可以节省大量时间.
MySQL 5.7.14:MySQL是一种关系型数据库管理系统,它将数据保存在不同的表中,具有更快、更灵活的特点.MySQL是轻量级开源软件,拥有更好的性能,因此许多中小型网站都选择它作为数据库管理系统.
Apache 2.4.23:Apache HTTP服务器是一个开源的Web服务器,能在大多数操作系统中安全地被使用.它的响应速度快且安全,并且支持多种编程语言,例如Perl和Python.
Wamp Server 3.0.6:因为需要在Windows系统中配置Apache,MySQL和PHP的运行环境,所以选择Wamp Server这个可以将这些模块集成在一起的软件.它的启动、刷新和关闭非常方便,并且还支持扩展Python解释器.
FileZilla Server 0.9.60.2:本文选择FileZilla服务器0.9.60.2来设置一个FTP服务器用来存储上传的软件GUI图像.
4.1.2 模型实现辅助组件
Python 3.5&Pycharm:Python是目前人工智能领域使用最广泛的语言,它可以通过少量代码来训练和使用深度学习模型.Pycharm是用于Python编程的完全免费的IDE,它可以给用户带来良好的使用体验.
Tensorflow-GPU 1.4:Tensorflow是本系统中用来实现神经网络模型的框架.GPU版本的Tensorflow将极大地减少训练和测试的时间.
CUDA 8.0 & CuDNN 6.0:借助CUDA(Compute Unified Device Architecture),系统的图像分类模型将在GPU上具有更好的性能.CuDNN(CuDA® Deep Neural Network library)可以优化神经网络的部分操作,例如汇集、卷积等.CuDNN 6.0与CUDA 8.0相匹配.
4.1.3 客户端实现自动截屏和上传图像
1)安卓端
Android截屏功能调用了MediaProjectionManagerApi来实现,通过调用createVirtualDisplay做准备工作,然后创建一个Bitmap,将图像存入文件中.程序中采用一个继承于Application的共享类来共享返回值,可在MainActivity中开启服务,接着创建悬浮窗口和获取屏幕信息,然后监听点击事件调用截屏方法.截屏后,截屏图像信息直接使用JDBC写入服务器的数据库中.而截屏图像文件通过FTP上传至服务器,本文采用FTPClient进行实现.首先创建FTPClient的实例,然后连接FTP服务器,登录尝试,接着获取返回码,若登录成功就设置上传的目录,最后上传文件到指定的目录.
2)PC端
PC端的截屏功能和自动上传图像功能使用C#语言,在微软公司的Visual Studio 2017开发工具上完成.自动截图模块调用了.NET类库中的System.Drawing命名空间下的Bitmap类和Graphics类来实现.自动上传图像功能利用了FTP协议连接服务器端的Filezilla Server实现自动上传图像功能并同时写入服务器数据库,它调用了.Net类库中的System.Net命名空间下的FtpWebRequest类和WebClient类来实现.
系统通过网络爬虫得到实验数据集,共549幅软件GUI图像.本文邀请了不同年龄段的10位软件用户,分别从软件GUI的色彩舒适度、界面布局整洁程度和关键信息突出程度这三个方面,对截屏图像进行评分,每个方面的评分范围为0到5分,分数越高则表示这个方面的效果越好.当所有用户评分完毕后,根据式(6)计算每个软件GUI图像的平均得分.
(6)
式(6)中的xij代表第i位评分人对于当前的软件GUI图像的第j个方面的评分,如x31代表第三位评分者对于软件GUI的色彩舒适度的评分,n代表被邀请参加测评的软件用户人数.随后根据式(7)标记数据集中的GUI图像.
(7)
式(7)中的y代表标签类型,若样本的y值等于1则将其标记为正类(美观)样本;若样本的y值等于0则将其被标记为负类(欠美观)样本.最后将549幅图像分成正类样本和负类样本.正类样本具有色彩舒适度好、布局合理和关键信息突出等特点,具有好的视觉效果,而负类样本的美观程度就相对较差.正类样本和负类样本的例子如图5.
图5 正类样本和负类样本样例Figure 5 Examples of positive and negative dataset
然后,随机抽取数据集中的449幅软件GUI图像作为训练集,训练集中含有335幅正类样本和114幅负类样本.余下的100幅软件GUI图像则作为测试集,其中正类样本有40幅,负类样本有60幅.训练集与测试集彼此独立,如表1.
表1 数据集Table 1 Dataset
首先得到HOG+SVM模型的实验结果,如表2.
表2 HOG+SVM模型实验结果Table 2 Training results of the HOG+SVM model
本文使用Scikit-Learn学习库中的SVC方法实现SVM分类器,核函数类型为线性核,其关键参数为正则化参数C.参数C用来权衡样本分类的正确性与决策边界间距的最大化问题.对于较大的C,如果决策函数能更加准确地分类所有的训练样本,则接受较小的间距.反之,较低的C鼓励更大的间距.通过参数网格交叉验证,得出最优参数为C=1.实验中测试精度的定义为
(8)
式(8)中TP表示结果为正确肯定(true positive,TP)的样本个数,在本文中代表预测为美观样本,实际也为美观样本的GUI图像数量.TN表示结果为正确否定(true negative,TN)的样本个数,文中代表预测为欠美观样本,实际也为欠美观样本的GUI图像数量.FP表示结果为错误肯定(false positive,FP)的样本个数,文中代表预测为美观样本,实际为欠美观样本的GUI图像数量.FN表示结果为错误否定(false negative,FN)的样本个数,文中代表预测为欠美观样本,实际为美观样本的GUI图像数量.最终HOG+SVM这种传统的机器学习算法的测试精度为82%.随后,得到了AlexNet模型的实验数据,如表3.
表3 AlexNet模型实验结果Table 3 Training results of AlexNet model
AlexNet深度模型的测试精度达到了95%.实验结果表明,AlexNet模型的准确性和性能相比于HOG+SVM模型有了显著的提高.并且AlexNet模型通过多次的训练,该模型的测试精度不断地上升.而传统的机器学习模型HOG+SVM的测试精度一直稳定在82%,并没有显著的提高.这也是深度学习模型相比于传统的机器学习模型的一个显著优势.体现了深度学习模型在GUI测试中的应用能力比较传统的机器学习模型有着更好的泛化性和稳健性等特点.
系统为用户提供了自动截屏上传模块,以便用户截取软件界面图像并自动上传到云服务器中.自动截屏上传模块如图6.
图6 PC端自动截屏上传模块Figure 6 Automatic screen-shoot module on PC
此外,用户可以输入云服务器的URL地址进入到服务器登录界面中注册个人账号并登录.云服务器的登录界面如图7.
图7 服务器登录界面Figure 7 Login interface of the server
用户可以选择以使用者的身份或者标记者的身份进入服务器系统.在模型训练阶段,软件用户以标记者的身份进入评分系统对待标记的软件界面图像进行评分,评分系统如图8.
图8 软件GUI评价系统Figure 8 Marking system of the software’s GUI
待模型训练完毕后,用户可以选择以使用者的身份进入服务器并通过映像名称查找软件GUI图像并选择HOG+SVM模型或AlexNet模型来测试软件GUI并输出结果.测试结果如图9.
图9 GUI预测结果Figure 9 GUI predict results
管理员用户可以进入云服器来训练HOG+SVM模型和AlexNet模型.
构建了一个基于云平台的软件界面自动测试系统并使用HOG+SVM和AlexNet这两种强大的图像分类模型进行软件GUI自动化测试.系统可以提高软件GUI测试的效率,减少手动测试的工作量.实验结果表明,在GUI图像测试方面,基于DNN的AlexNet模型比传统的机器学习模型HOG+SVM的测试精度更高.今后,将进一步提高系统的GUI自动化测试能力.同时,将收集更多样本来训练HOG+SVM模型和AlexNet模型,以提高软件GUI的分类准确性.