页面对比测试方法、装置、计算机设备和存储介质制造方法及图纸

本申请涉及一种页面对比测试方法、装置、计算机设备、存储介质。可用于金融领域或其他领域。通过对多个浏览器展示的页面截图进行图像膨胀处理，确定字符内容所在的目标位置，从每个页面截图中提取对应碎片图像及其在页面截图的位置信息。识别基于每个目标页面截图得到的碎片图像中的目标字符内容。利用目标字符内容及所属碎片图像对应的位置信息，搜索其他页面的碎片图像，基于搜索结果信息确定待测试页面在多个浏览器中显示效果的对比结果。相较于传统通过人工对比，本方案通过对不同浏览器显示的页面图像进行图像膨胀后提取碎片图像，基于碎片图像包含的文字内容和位置信息进行不同浏览器显示的页面之间的对比，提高了页面对比测试的效率。对比测试的效率。对比测试的效率。

【技术实现步骤摘要】
页面对比测试方法、装置、计算机设备和存储介质


[0001]本申请涉及图像处理
，特别是涉及一种页面对比测试方法、装置、计算机设备、存储介质和计算机程序产品。

技术介绍

[0002]在针对浏览器进行前端网页开发时，需要在页面开发时对页面在不同的浏览器展示的内容进行测试。由于不同版本的浏览器的前端框架不同，为了使相同页面在不同浏览器中均展示相同的内容，在页面测试时需要将相同页面在不同浏览器中的展示内容进行对比，从而在确定相同页面在不同浏览器中存在差异时，可以针对差异点进行适应性修改。目前对相同页面在不同浏览器中的差异进行检测的方式通常是通过人工在不同浏览器之间逐一对比。然而，浏览器的类型众多，通过人工对比的方式，难以高效完成页面的测试。
[0003]因此，目前对页面的对比方法存在效率低的缺陷。

技术实现思路

[0004]基于此，有必要针对上述技术问题，提供一种能够提高效率的页面对比测试方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
[0005]第一方面，本申请提供了一种页面对比测试方法，所述方法包括：
[0006]针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；所述多个浏览器包括多个不同驱动的浏览器；
[0007]对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息；
[0008]针对目标页面截图，识别基于所述目标页面截图得到的各所述碎片图像中的字符内容，作为目标字符内容；所述目标页面截图为多个页面截图中的一个；
[0009]利用所述目标字符内容以及所述目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息；所述搜索结果信息包括各所述其他页面截图对应位置的碎片图像中是否包含所述目标字符内容；
[0010]基于所述搜索结果信息，确定所述待测试页面在所述多个浏览器中显示效果的对比结果。
[0011]在其中一个实施例中，所述获取待测试页面通过多个浏览器展示出的页面的多个页面截图，包括：
[0012]在自动化测试系统中配置脚本信息；所述脚本信息包括所述多个浏览器对应的驱动、所述待测试页面对应的访问地址以及预设的页面对比测试策略；所述预设的页面对比测试策略表征所述待测试页面在不同浏览器中进行对比时的执行逻辑；
[0013]基于所述脚本信息获取待测试页面在多个浏览器展示的页面的截图，得到多个页面截图。
[0014]在其中一个实施例中，所述脚本信息还包括截屏区域信息；
[0015]所述获取待测试页面在多个浏览器展示的页面的截图，包括：
[0016]通过多个浏览器打开所述业务系统，并基于所述访问地址，在各个浏览器中跳转至所述待测试页面；
[0017]基于所述脚本信息中的截屏区域信息，在各个浏览器当前展示的所述待测试页面中截取对应区域，作为所述待测试页面对应的页面截图。
[0018]在其中一个实施例中，所述基于所述脚本信息中的截屏区域信息，在各个浏览器当前展示的所述待测试页面中截取对应区域之前，还包括：
[0019]基于所述预设的页面对比测试策略，全屏化所述浏览器，以隐藏所述浏览器的菜单栏和/或工具栏。
[0020]在其中一个实施例中，所述对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，包括：
[0021]针对每个页面截图进行灰度处理和二值化处理，对灰度处理和二值化处理后的页面截图进行膨胀处理，使得膨胀后的页面截图中相邻的字符内容连接在一起，得到膨胀后的页面截图；
[0022]根据所述膨胀后的页面截图中多个相邻且颜色相同的像素点，提取所述膨胀后的页面截图中包含的至少一个轮廓信息，得到目标位置；所述轮廓信息表征所述膨胀后的页面截图中的所述相邻的字符内容对应的轮廓。
[0023]在其中一个实施例中，所述基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息，包括：
[0024]根据所述至少一个轮廓信息在所述膨胀后的页面截图中的目标位置，确定每个所述页面截图中的字符位置信息；
[0025]针对每个所述页面截图，提取所述字符位置信息的图像得到至少一个碎片图像，并记录所述至少一个碎片图像在所述页面截图中的位置信息。
[0026]在其中一个实施例中，所述针对目标页面截图，识别基于所述目标页面截图得到的各所述碎片图像中的字符内容，作为目标字符内容，包括：
[0027]针对目标页面截图，对所述目标页面截图中的各碎片图像进行灰度处理，将灰度处理后的各碎片图像存储至卡夫卡队列中；
[0028]根据预设文字识别算法，并发识别所述卡夫卡队列中各碎片图像对应的字符，作为目标字符内容。
[0029]在其中一个实施例中，所述利用所述目标字符内容以及所述目标字符所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息，包括：
[0030]针对所述目标字符内容，检测每个其他页面截图对应的碎片图像中是否包含相同字符内容；
[0031]若检测结果为否，得到第一搜索结果信息；若检测结果为是，比对所述相同字符内容的位置信息，与所述目标字符内容对应的位置信息；
[0032]若所述比对结果为二者的位置信息偏差小于或等于预设阈值，得到第二搜索结果信息；若所述比对结果为二者的位置信息偏差大于设定阈值，得到第三搜索结果信息；
[0033]其中，所述相同字符内容的位置信息、所述目标字符内容对应的位置信息，分别基
于各自所属碎片图像对应的位置信息确定。
[0034]在其中一个实施例中，各碎片图像对应的位置信息为各碎片图像的顶点坐标信息；所述比对所述相同字符内容的位置信息，与所述目标字符内容对应的位置信息，包括：
[0035]根据所述目标字符内容所属碎片图像的顶点坐标信息，确定所述目标字符内容的第一中心坐标，以及根据所述相同字符内容所属碎片图像的顶点坐标信息，确定所述相同字符内容的第二中心坐标；
[0036]比对所述第一中心坐标与所述第二中心坐标，确定所述目标字符内容的位置信息和所述相同字符内容的位置信息的比对结果。
[0037]第二方面，本申请提供了一种页面对比测试装置，所述装置包括：
[0038]获取模块，用于针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；所述多个浏览器包括多个不同驱动的浏览器；
[0039]处理模块，用于对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息；
[0040]识别模块，用于针对目标页面截图，识别本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面对比测试方法，其特征在于，所述方法包括：针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；所述多个浏览器包括多个不同驱动的浏览器；对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息；针对目标页面截图，识别基于所述目标页面截图得到的各所述碎片图像中的字符内容，作为目标字符内容；所述目标页面截图为多个页面截图中的一个；利用所述目标字符内容以及所述目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息；所述搜索结果信息包括各所述其他页面截图对应位置的碎片图像中是否包含所述目标字符内容；基于所述搜索结果信息，确定所述待测试页面在所述多个浏览器中显示效果的对比结果。2.根据权利要求1所述的方法，其特征在于，所述获取待测试页面通过多个浏览器展示出的页面的多个页面截图，包括：在自动化测试系统中配置脚本信息；所述脚本信息包括所述多个浏览器对应的驱动、所述待测试页面对应的访问地址以及预设的页面对比测试策略；所述预设的页面对比测试策略表征所述待测试页面在不同浏览器中进行对比时的执行逻辑；基于所述脚本信息获取待测试页面在多个浏览器展示的页面的截图，得到多个页面截图。3.根据权利要求2所述的方法，其特征在于，所述脚本信息还包括截屏区域信息；所述获取待测试页面在多个浏览器展示的页面的截图，包括：通过多个浏览器打开所述业务系统，并基于所述访问地址，在各个浏览器中跳转至所述待测试页面；基于所述脚本信息中的截屏区域信息，在各个浏览器当前展示的所述待测试页面中截取对应区域，作为所述待测试页面对应的页面截图。4.根据权利要求3所述的方法，其特征在于，所述基于所述脚本信息中的截屏区域信息，在各个浏览器当前展示的所述待测试页面中截取对应区域之前，还包括：基于所述预设的页面对比测试策略，全屏化所述浏览器，以隐藏所述浏览器的菜单栏和/或工具栏。5.根据权利要求1所述的方法，其特征在于，所述对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，包括：针对每个页面截图进行灰度处理和二值化处理，对灰度处理和二值化处理后的页面截图进行膨胀处理，使得膨胀后的页面截图中相邻的字符内容连接在一起，得到膨胀后的页面截图；根据所述膨胀后的页面截图中多个相邻且颜色相同的像素点，提取所述膨胀后的页面截图中包含的至少一个轮廓信息，得到目标位置；所述轮廓信息表征所述膨胀后的页面截图中的所述相邻的字符内容对应的轮廓。6.根据权利要求5所述的方法，其特征在于，所述基于所述目标位置从每个所述页面截
图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息，包括：根据所述至少一个轮廓信息在所述膨胀后的页面截图中的目标位置，确定每个所述页面截图中的字符位置信息；针对每个所述页面截图，提取所述字符位置信息的图像得到至少一个碎片图像，并记录所述至少一个碎片图像在所述页面截图中的位置信息。7.根据权利要求1所述的方法，其特征在于，所述...

【专利技术属性】
技术研发人员：梁雄，林锐，余小娟，黄展辉，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：