彭飞, 王建, 寇超, 田芳
(西昌卫星发射中心,四川 西昌 615000)
doi:10.19708/j.ckjs.2024.07.238
引用格式:
彭飞,王建,寇超,等.基于图像的航天业务软件Web UI自动化测试方法[J].测控技术,2024,43(9):21-27.
摘要
当前航天业务繁重,如何高效准确地完成相关软件的测试尤为重要。设计了一种基于图像的航天业务软件Web UI自动化测试方法。该方法以用户视角进行自动化测试,使用YOLOv8模型检测被测Web软件截图,识别出表格、折线图和导航按键(包括导航菜单、面包屑、按钮等按键)3类网页元素。之后利用Selenium工具自动测试导航按键元素的可访问性,使用文字识别技术PaddleOCR、结构相似性(Structural Similarity,SSIM)指数算法分别测试表格元素和折线图元素信息的正确性,并生成测试报告。该方法可移植性好,能够自动为Selenium提供元素定位,改善Selenium脚本易失效的问题,并且可以自动检查图表数据的正确性。实验结果表明,该方法能够覆盖90%的测试用例,可检测具体错误位置和相关信息,显著减少了手动测试工作量,提高了测试效率。
关键词
Web UI自动化测试;YOLOv8 算法;结构相似性算法;PaddleOCR;Selenium
当前航天业务繁重,对航天业务Web软件进行高效准确的测试至关重要。航天业务Web软件主要是对数据进行处理并显示的一类软件,软件页面中包含大量的数据图表。在传统Web UI测试中,需要人工检查页面数据信息的正确性和导航按键是否可访问,这项工作非常耗时且易出错,相比之下自动化测试方法具有可重复性强、速度快、可靠性好等优势,因此使用自动化测试方法成为了更好的选择。目前,针对Web应用软件的自动化测试工具有很多,Selenium作为其中一种知名工具,能够利用预设脚本自动化访问和测试网页元素,但是其问题在于当网页元素变化时,自动化的测试脚本就会失效,需要测试人员及时检查网页状态变化,重新定位元素位置,更新测试脚本。
现有研究中,Web UI的自动化测试主要包括布局图对齐测试和基于图像的自动化测试。布局图对齐测试更适用于检测响应式设计中的布局问题,通过提取和比较页面的2个版本的响应式布局来确保元素的正确放置和响应式行为,由于用户界面的设计和布局可能会随着时间的变化而变化,布局图测试需要重新分析网页的文档对象模型(Document Object Model,DOM)结构更新来适应网页变化,且布局图对齐测试难以完全模拟用户的主观感受,而基于图像的自动化测试则侧重于用户视角的差异和一致性。对于航天业务网页这种数据展示类网页而言,用户视角的差异更为重要,因此可采用基于图像的测试方法。罗正军等使用了基于特征点匹配的改进型加速鲁棒特性(Speeded Up Robust Features,SURF)算法作为方法设计验证主体,该方法将网页截图与UI设计文档中的标准图进行对比,但是这种验证方法只能显示匹配内容,无法直接给出问题点,测试出的Bug 图片需人工定位问题点,且该方法无法对网页元素做任何操作。White等创建了一个随机边界框测试器,它在给定的边界框内随机点击,使用YOLO(You Only Look Once)算法从屏幕截图中识别GUI控件,并使用这些信息来指导随机测试。还有许多研究使用机器学习和深度学习技术来自动分析用户界面,Widodo、Su、Liu等使用卷积神经网络(Convolutional Neural Network,CNN)模型对GUI屏幕进行分析,这些方法能够识别出文本重叠、触摸目标过小、屏幕模糊、图像缺失等常见的UI设计错误,但无法识别网页中信息不正确、导航按键不可访问等错误,且这些方法都没有与Selenium相结合。
本文设计了一种基于图像的自动化航天业务软件Web UI测试方法,使用当前先进的目标检测模型YOLOv8来识别并分类网页元素,自动为Selenium测试脚本提供元素定位,改善Selenium脚本易失效的问题,并结合图像处理技术自动检测页面图表数据错误。在该方法中,首先收集数据展示类网页截图作为图像数据集并标记网页元素,使用YOLOv8模型对图像数据集进行训练,并用训练好的模型识别被测Web软件首页截图中的元素。然后,结合Selenium工具测试脚本自动测试导航按键元素(包括导航菜单、面包屑、按钮等)的可访问性,并捕获新的截图传给YOLOv8模型用于进一步识别,以此来迭代访问更多相关页面,形成自动化的导航和测试,同时使用PaddleOCR将识别出的表格元素转换为Excel数据格式并测试数据的正确性,使用结构相似性(Structural Similarity,SSIM)指数算法测试折线图元素信息的正确性。最后,将检测到的Bug信息和位置记录到测试报告中。该方法可自动定位元素,减少手动更新脚本中定位器和人工检查数据正确性的工作量,可明确定位错误位置,显著提升测试效率和测试精度。
1 测试方法的实现
1.1 测试方法的基本思路
由于同类型的航天业务在数据处理和显示上很相似,因此在具体测试过程中,使用同类型业务的历史软件最新版本和对应的飞行数据作为测试输入,并将软件截图作为标准图与待测Web软件截图进行对比测试。在具体测试用例设计中,表格测试用例使用PaddleOCR技术将图片表格转换为文本表格,通过与参数约定文书中的表格加以对比来检测数据正确性。折线图测试用例使用SSIM指数算法对照标准图检查折线图显示的正确性。导航按键测试用例分为3个步骤:① 通过PaddleOCR技术将导航按键元素识别框中的文字信息提取出来;② 使用Selenium工具依据按键名称查找并访问导航按键元素,截图并记录按键的访问状态;③ 将新的截图输入YOLOv8模型进行识别后回到第①步再次访问识别出的按键,形成自动化迭代测试,以识别出的按键全部已访问作为测试结束标志。在网页设计过程中,按钮、导航菜单、标签页、面包屑等导航按键的设计方法不一样,但是这对于测试而言没有本质区别,测试时可以使用Selenium工具的click()方法对这些导航按键进行访问并测试,因此,在元素识别时将这些按键都识别为导航按键类别,方便之后的测试。航天业务软件Web UI自动化测试方法框图如图1所示。

图1 航天业务软件Web UI自动化测试方法框图
1.2 收集图片数据集
为了提高预测模型的通用性,所使用的图片数据集除了包括多个航天业务软件网页截图外,还包括同类型数据展示网页和其他类似主题的网页截图。在准备数据集的过程中,使用Selenium工具 WebDriver插件导航到指定的网页,收集网页的屏幕截图共320幅,并使用LabelImg软件对截图中的元素进行标记,形成图片数据集。由于航天业务Web软件的主要功能是数据展示,页面中主要包括数据表单和折线图这2种数据显示形式和各类导航按键,因此主要关注并标记导航按键(button)、表格(table)和折线图(line plot)这3类元素。在完成上述工作后,需将图片对应的标签文件转为YOLO格式,并对图片数据集以80%为训练组、20%为验证组的比例进行随机划分,以备之后的训练使用。
1.3 使用YOLOv8对图片数据集进行训练
由于UI测试通常有快速响应和实时反馈的要求,YOLOv8作为一种单阶段检测器,其高速度和实时性更适用于完成测试工作。相比之下,CNN虽然在图像分类和检测任务中表现出色,但其作为多阶段检测器,需要更多的计算资源且速度较慢,在需要快速处理图像的测试场景中,YOLO的优势更为明显,且YOLO算法能够适应不同尺寸的输入图像,由于可能会存在不同尺寸的界面截图,这对于UI测试来说是一个优势。在UI测试场景下,YOLOv8模型在性能和效率上更具有优势,因此选择YOLOv8模型来进行网页元素的识别。
在训练时使用的运行环境为IntelⓇ CoreTM i7-9750H 处理器,内存大小为16 GB,显卡为NVIDIA GeForce RTX2060,使用Windows操作系统。使用的输入参数为epochs=500,imgsz=640,batch=8,workers=4。模型在训练损失不再改善时自动停止,在500个周期的训练阶段中,选择在验证数据集上准确度最高的模型作为最终模型。模型的混淆矩阵如图2所示,由图2可知,YOLOv8对导航按键类的检测准确率为76%,漏检率为24%,但是会出现92%的误检率。漏检是指导航按键没有被识别出来,误检是指将部分背景识别为导航按键。YOLOv8对表格类的检测准确率为94%,漏检率为7%,误检率为3%;YOLOv8对折线图类的检测准确率为90%,漏检率为10%,误检率为4%。导航按键类误检率高的原因是部分网页的导航按键没有边框和背景色,与页面其他文字相比特征不明显,如果使用导航按键有明确特征的页面作为训练和测试数据,其识别效果会提升很多。针对此问题,可以与其他基于DOM分析的测试方法相结合来减少误检率,这项工作会在之后的研究中进一步完善。

图2 混淆矩阵
1.4 使用YOLOv8识别网页元素
在训练完成之后,使用训练模型文件对被测试网页进行识别。首先,使用Selenium工具 WebDriver的get方法,导航到被测网页首页的URL并进行截图,截图通常以首页或者最近一次点击的导航按键的名称来命名并保存。之后,使用精确度最高的训练模型文件best.pt对页面截图进行检测。为了更全面地验证模型的识别效果,选择包含标签页、面包屑、按钮等不同设计风格按键类型的网页来测试,预测结果如图3所示,可以看到YOLOv8模型能够正确标记出各类导航按键、表格和折线图元素。由于之后还需要使用预测框的坐标来定位元素,在预测过程中使用YOLOv8模型提供的Result.boxe()方法给出预测框的坐标等信息,并将这些信息输入元素测试模块,以便对不同类型的页面元素进行测试。

图3 YOLOv8页面元素识别示例图
1.5 基于通道注意力机制的ResNet50网络
网页元素测试用例按照YOLOv8识别的结果主要分为3类:导航按键测试用例、折线图测试用例和表格测试用例。3类测试用例执行的优先级顺序为:先执行按键可访问测试用例,再执行折线图测试用例和表格测试用例。
在导航按键测试用例中,主要使用PaddleOCR技术和Selenium工具对按键进行测试。在测试用例具体实现中,首先使用PaddleOCR提取出导航按键元素中的文字,然后调用Selenium工具的find_element元素查找方法来查找并访问元素,例如可依据文本进行元素查找,调用driver.find_element(By.XPATH,″//*[text()=′网盘′]″).click()来单击访问导航按键网盘。由于导航按键的访问顺序和网页层次设计通常会有关联,因此在导航按键测试用例执行过程中需要按层次执行。测试用例执行的预期结果为按键可访问,当按键可访问时需截图并输入YOLOv8模型用于识别截图中所有的导航按键名称,并作为新的一层。测试过程中按照导航按键名称制作字典,标记导航按键的访问状态,并将访问状态记录到测试报告中,每层导航按键均标记为已访问后,则返回上一层,依次迭代访问直到返回首页,将“所有导航按键均已访问”作为导航按键访问测试的终止条件。如测试用例执行结果为无法访问,则抛出异常并将导航按键名称和异常信息记录到测试报告中。
在折线图测试用例设计中,测试的主要方式是将同类型历史业务Web软件截图作为标准图,通过将被测Web软件截图中的折线图与标准图比对来反映折线图信息的正确性。在同类型业务软件中,相同数据展示页面中的折线图趋势是基本一致的,只在个别参数的数值上会有细微差别(小数点后的数值有差异),当以折线图形式反映数据变化时,以人类视角观察图像时自然而然会对相对值敏感而对绝对值不敏感,小数点后的数值差异在人类视角中看不出区别,但能看出曲线趋势和结构的变化。如果因为参数装填或者处理错误,导致曲线结构发生变化,则需要检测出这类问题,这种情况下只考虑像素级别的误差肯定是不合适的,其会反馈冗余错误,因此选择使用SSIM指数算法对2幅折线图进行比较。SSIM是一种用于衡量2幅图片相似度的指标,它不仅考虑了像素级别的误差,而且考虑了图像的亮度、对比度和结构信息的差别,其核心思想是通过评估这些视觉信息在原始图像和比较图像之间的相似度,来更准确地反映人眼对图像质量的感知。在测试用例具体实现中,由于不同折线图的检测框大小不一样,而SSIM要求2幅图片的大小相同,且折线图在检测框中的位置也会影响自动检测效果,因此需要对图片大小进行调整,对较小的图片右下角取色后使用该颜色加边框,使2幅图片大小相同,之后使用SURF算法对图像位置进行调整,如果没有加边框,则会导致调整后的图像有黑边,影响之后的检测效果。使用Riba等提供的losses.ssim_loss方法来比较图片并计算SSIM损失值。当2幅图片完全相同时,SSIM损失值为0,当2幅图片有差异时损失值会大于0。折线图测试用例执行的预期结果为信息正确。经实验检验,折线图内容完全相同但检测框的位置不同的曲线在经过配准后,SSIM损失值在0.010以下,因此,将0010设置为2条曲线是否有结构性不同的测试标准,将SSIM损失值小于等于0.010的图像的测试结果记录为信息正确,将SSIM损失值大于0.010的图像的测试结果记录为信息不正确,并在图像上标记出差异位置后将测试结果添加到测试报告中。图4为使用SURF进行图像配准并使用SSIM算法标记出的折线图差异对比图,这2幅图的SSIM损失值为0.024 2。

图4 使用 SSIM进行图片比较示例图
在表格测试用例中,使用PaddleOCR技术将图片表格提取为文本后进行对比测试。目前知名的文字处理技术有PaddleOCR、EasyOCR、Tesseract等,选择PaddleOCR是由于其在中文表格提取中更具优势,而EasyOCR和Tesseract在中文表格提取中易出现文字错位等问题,会影响之后的参数比对。在测试用例实现中,使用PaddleOCR的PPStructure包所提供的工具,将截图中的表格元素提取为Excel格式,再与参数约定文书中的表格和标准页面中的参数表格进行自动化比对,比对参数数值显示和理论范围等信息是否正确。测试用例执行结果为数据正确和数据不正确2种,当参数一致时测试结果为数据正确,当参数不一致时,测试结果为数据不正确,同时标记出显示不一致的参数,并记录到测试报告中。
2 实验结果对比和分析
选取1个未加入图片数据集的航天业务Web软件进行测试。为了更好地验证方法的有效性,对网页内容进行修改,设计了17个按键不可访问Bug、10个表格数据不正确Bug和5个折线图数据不正确Bug。在设计导航按键不可访问Bug时,由于对导航按键的访问会影响相关页面的折线图和表格的识别和测试,因此,选择7个与折线图和表格页面不发生关联的按键,修改为不可访问,另外添加10个不可访问导航按键。10个表格数据不正确Bug具体包含5类:在原表格中删除参数、修改参数代号、修改参数值、修改参数范围和增加参数。5个折线图数据不正确Bug主要分为2种类型:在原有折线图数据中替换一段数据和在原有折线图数据中删除一段数据。经修改,被测Web软件共包括66个按键测试用例(包含49个按键可访问用例和17个按键不可访问用例)、10个表格测试用例(均设计不正确参数)和23个折线图测试用例(包含18个数据正确用例和5个数据不正确用例)。
在本方法中,YOLOv8模型检测的准确性会影响后续测试,因此,首先对网页元素的识别结果进行统计,结果如表1所示。本方法能够覆盖90%以上的网页元素。由于部分导航按键没有底色或者边框,特征不明确,使用YOLOv8进行识别时出错概率更高,相比之下,折线图和表格类的设计风格稳定且特征明显,会更容易被识别和分类。经统计,导航按键类会出现14%的误报和8%的漏报,即14%原本不是导航按键的位置被识别成导航按键,8%的导航按键未被识别出来。导航按键的漏识别进一步影响了关联页面访问,使页面截图没有进入YOLOv8模型中,导致1个表格被漏识别。将漏识别的表格所在页面截图送入YOLOv8模型进行识别,发现其是可以被正确识别的。
表1 网页元素识别结果

查看生成的测试报告,测试报告中包含测试发现的错误信息、所涉及的网页元素和对应的截图,测试结果统计如表2所示,共测试出25个导航按键错误、5个折线图错误和9个表格错误。在25个导航按键错误中,包含15个实际导航按键错误、10个非导航按键被检测为导航按键所产生的误报;有2个不可访问导航按键错误漏识别和1个错误表格错误漏识别,原因是在元素识别过程中,2个导航按键已经被漏识别,1个表格所在页面关联的按键也未被识别,影响了对该页面的访问和测试。
表2 测试结果

经验证,该测试方法可达到90%以上的用例覆盖率和Bug发现率,相比手动测试,该自动化测试只需要用原来1/3的时间即可完成,显著减少了测试时间,并且该方法可以自动定位元素,减少了手动定位的工作量,所提供的测试报告可以准确反映出错的信息和位置,相比人工检查,显著提高了测试精度和测试效率。
3 结束语
本文设计了一种基于图像的航天业务软件Web UI自动化测试方法,能够从用户视角进行Web UI自动化测试并生成测试报告。该方法将目标检测模型YOLOv8、文字识别技术PaddleOCR和图像对比技术SSIM用于Web UI自动化测试中,结合Selenium工具查找并访问导航按键元素,以此来自动化迭代访问更多的页面。该方法能够高效地完成测试工作,对导航按键、表格和折线图这3类网页元素有较好的覆盖率,并且可以准确定位错误类型和位置,减少人工更新Selenium定位器和检查页面数据信息的工作量,提升了测试准确性,且可移植性好,能够显著提高测试效率。受目前业务类型的影响,在网页元素识别时主要集中于导航按键类、折线图类和表格这3种元素类型,在之后的测试工作中可以扩展识别输入框、开关器、柱状图等更丰富的网页元素,并将识别出的元素信息与Selenium测试脚本进行关联,完成自动化测试。该方法在按键识别上还有较大的提升空间,原因是部分网页按键没有边框和背景色,特征不明确,导致识别效果不好,可以与其他基于DOM分析的测试方法相结合来减少误检率。需要注意的是,该方法的测试用例覆盖率依赖于YOLOv8模型的目标检测效果,而目标检测与Web软件页面设计风格有很大关系,如果页面设计风格变化较大,则需要重新收集图片数据集并训练模型文件,以确保检测效果。
END
热点文章 (向上滑动阅览)
期刊动态 (向上滑动阅览)
关于第二十届中国航空测控技术年会征文的通知
关于《测控技术》“力触觉技术“专栏征文的通知
关于《测控技术》“燃气涡轮发动机测控技术“专栏征文的通知
《测控技术》继续入选“中国科技核心期刊”
期刊目录 (向上滑动阅览)


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/45892.html