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

技术领域

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

背景技术

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

因此，目前对页面的对比方法存在效率低的缺陷。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高效率的页面对比测试方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种页面对比测试方法，所述方法包括：

针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；所述多个浏览器包括多个不同驱动的浏览器；

对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息；

针对目标页面截图，识别基于所述目标页面截图得到的各所述碎片图像中的字符内容，作为目标字符内容；所述目标页面截图为多个页面截图中的一个；

利用所述目标字符内容以及所述目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息；所述搜索结果信息包括各所述其他页面截图对应位置的碎片图像中是否包含所述目标字符内容；

基于所述搜索结果信息，确定所述待测试页面在所述多个浏览器中显示效果的对比结果。

在其中一个实施例中，所述获取待测试页面通过多个浏览器展示出的页面的多个页面截图，包括：

在自动化测试系统中配置脚本信息；所述脚本信息包括所述多个浏览器对应的驱动、所述待测试页面对应的访问地址以及预设的页面对比测试策略；所述预设的页面对比测试策略表征所述待测试页面在不同浏览器中进行对比时的执行逻辑；

基于所述脚本信息获取待测试页面在多个浏览器展示的页面的截图，得到多个页面截图。

在其中一个实施例中，所述脚本信息还包括截屏区域信息；

所述获取待测试页面在多个浏览器展示的页面的截图，包括：

通过多个浏览器打开所述业务系统，并基于所述访问地址，在各个浏览器中跳转至所述待测试页面；

基于所述脚本信息中的截屏区域信息，在各个浏览器当前展示的所述待测试页面中截取对应区域，作为所述待测试页面对应的页面截图。

在其中一个实施例中，所述基于所述脚本信息中的截屏区域信息，在各个浏览器当前展示的所述待测试页面中截取对应区域之前，还包括：

基于所述预设的页面对比测试策略，全屏化所述浏览器，以隐藏所述浏览器的菜单栏和/或工具栏。

在其中一个实施例中，所述对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，包括：

针对每个页面截图进行灰度处理和二值化处理，对灰度处理和二值化处理后的页面截图进行膨胀处理，使得膨胀后的页面截图中相邻的字符内容连接在一起，得到膨胀后的页面截图；

根据所述膨胀后的页面截图中多个相邻且颜色相同的像素点，提取所述膨胀后的页面截图中包含的至少一个轮廓信息，得到目标位置；所述轮廓信息表征所述膨胀后的页面截图中的所述相邻的字符内容对应的轮廓。

在其中一个实施例中，所述基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息，包括：

根据所述至少一个轮廓信息在所述膨胀后的页面截图中的目标位置，确定每个所述页面截图中的字符位置信息；

针对每个所述页面截图，提取所述字符位置信息的图像得到至少一个碎片图像，并记录所述至少一个碎片图像在所述页面截图中的位置信息。

在其中一个实施例中，所述针对目标页面截图，识别基于所述目标页面截图得到的各所述碎片图像中的字符内容，作为目标字符内容，包括：

针对目标页面截图，对所述目标页面截图中的各碎片图像进行灰度处理，将灰度处理后的各碎片图像存储至卡夫卡队列中；

根据预设文字识别算法，并发识别所述卡夫卡队列中各碎片图像对应的字符，作为目标字符内容。

在其中一个实施例中，所述利用所述目标字符内容以及所述目标字符所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息，包括：

针对所述目标字符内容，检测每个其他页面截图对应的碎片图像中是否包含相同字符内容；

若检测结果为否，得到第一搜索结果信息；若检测结果为是，比对所述相同字符内容的位置信息，与所述目标字符内容对应的位置信息；

若所述比对结果为二者的位置信息偏差小于或等于预设阈值，得到第二搜索结果信息；若所述比对结果为二者的位置信息偏差大于设定阈值，得到第三搜索结果信息；

其中，所述相同字符内容的位置信息、所述目标字符内容对应的位置信息，分别基于各自所属碎片图像对应的位置信息确定。

在其中一个实施例中，各碎片图像对应的位置信息为各碎片图像的顶点坐标信息；所述比对所述相同字符内容的位置信息，与所述目标字符内容对应的位置信息，包括：

根据所述目标字符内容所属碎片图像的顶点坐标信息，确定所述目标字符内容的第一中心坐标，以及根据所述相同字符内容所属碎片图像的顶点坐标信息，确定所述相同字符内容的第二中心坐标；

比对所述第一中心坐标与所述第二中心坐标，确定所述目标字符内容的位置信息和所述相同字符内容的位置信息的比对结果。

第二方面，本申请提供了一种页面对比测试装置，所述装置包括：

获取模块，用于针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；所述多个浏览器包括多个不同驱动的浏览器；

处理模块，用于对每个所述页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于所述目标位置从每个所述页面截图中提取得到对应的碎片图像，并记录各碎片图像在所述页面截图的位置信息；

识别模块，用于针对目标页面截图，识别基于所述目标页面截图得到的各所述碎片图像中的字符内容，作为目标字符内容；所述目标页面截图为多个页面截图中的一个；

搜索模块，用于利用所述目标字符内容以及所述目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息；所述搜索结果信息包括各所述其他页面截图对应位置的碎片图像中是否包含所述目标字符内容；

对比模块，用于基于所述搜索结果信息，确定所述待测试页面在所述多个浏览器中显示效果的对比结果。

第三方面，本申请提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述的方法的步骤。

第四方面，本申请提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法的步骤。

第五方面，本申请提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述的方法的步骤。

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

附图说明

图1为一个实施例中页面对比测试方法的流程示意图；

图2为一个实施例中截屏步骤的界面示意图；

图3为一个实施例中位置提取步骤的流程示意图；

图4为一个实施例中膨胀步骤的界面示意图；

图5为一个实施例中轮廓识别步骤的界面示意图；

图6为一个实施例中字符识别步骤的流程示意图；

图7为一个实施例中对比步骤的流程示意图；

图8为一个实施例中页面对比测试系统的结构示意图；

图9为另一个实施例中页面对比测试方法的流程示意图；

图10为一个实施例中页面对比测试装置的结构框图；

图11为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

需要说明的是，本公开页面对比测试确定的方法和装置可用于金融领域在银行业务页面中的测试对比，也可用于除金融领域之外的任意领域的页面内容对比，本公开页面对比测试的方法和装置的应用领域不做限定。

在一个实施例中，如图1所示，提供了一种页面对比测试方法，本实施例以该方法应用于终端进行举例说明，可以理解的是，该方法也可以应用于服务器，还可以应用于包括终端和服务器的系统，并通过终端和服务器的交互实现，包括以下步骤：

步骤S202，针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；多个浏览器包括多个不同驱动的浏览器。

其中，业务系统可以是需要进行测试的业务系统，例如银行中的相关业务系统，待测试页面可以是业务系统中的页面，例如银行交易业务系统中待测试的网页。网页需要在浏览器中显示，由于不同浏览器对网页的显示效果存在差异，例如位置存在偏差、字体颜色差异和元素渲染差异等。为保证相同页面在不同浏览器中具有相同的显示效果，需要对一个网页在多个浏览器中的显示页面进行对比测试。则对于业务系统中的待测试页面，终端可以获取待测试页面在多个浏览器中展示出的多个页面截图。其中，上述多个浏览器可以是多个不同驱动的浏览器，不同驱动的浏览器对于相同网页的渲染方式可能不同，因此终端可以提取每个浏览器中显示的针对上述待测试页面的展示的页面，从而终端可以确定各个浏览器中的页面截图，得到多个页面截图。

步骤S204，对每个页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于目标位置从每个页面截图中提取得到对应的碎片图像，并记录各碎片图像在页面截图的位置信息。

其中，一个页面截图可以是基于待测试页面在一个浏览器中显示的页面进行处理后得到的截图，例如终端可以对待测试页面在一个浏览器中显示的页面进行截屏处理，具体可以是截取感兴趣的部分，从而得到该浏览器的页面截图。终端可以对每个需要测试的浏览器均进行页面截图的获取，从而终端可以得到多个页面截图。对于每个页面截图，终端可以对各个页面截图进行图像膨胀处理。其中，上述页面截图中可以包括有字符内容，例如文字信息，图像膨胀处理可以是对字符的边缘像素进行扩展的技术，由于字符内容使用的像素颜色与其所在的背景的颜色不同，终端可以基于字符内容的像素颜色，将相邻的字符之间的空间进行填充，形成一片连续的像素区域，得到膨胀后的页面截图，从而终端可以从膨胀后的页面截图中确定字符内容所在的目标位置。即该目标位置可以是膨胀后字符内容在页面截图中所占的区域。终端可以基于目标位置，从每个页面截图中提取对应的碎片图像，并记录各碎片图像在页面截图的位置信息。例如，终端可以基于上述膨胀后页面截图中的目标位置的区域，在该膨胀后页面截图对应的未经处理的页面截图中与上述区域对应的位置，提取得到上述碎片图像，即碎片图像可以从未经膨胀等处理的页面截图中提取。并且，由于膨胀后的页面截图与其对应的未经处理的页面截图属于同一浏览器的同一页面，因此终端可以将上述膨胀后页面截图中确定的各个字符内容的目标位置，作为上述对应的碎片图像在的位置信息，并进行记录。

步骤S206，针对目标页面截图，识别基于目标页面截图得到的各碎片图像中的字符内容，作为目标字符内容；目标页面截图为多个页面截图中的一个。

其中，终端可以从多个页面截图中确定一个目标页面截图，该目标页面截图可以是用于与其他浏览器的页面截图进行对比的截图，上述每个浏览器的页面截图均可以成为目标页面截图，例如终端完成一个目标页面截图与其他目标页面截图的对比测试后，可以从剩余的页面截图中选择下一个目标页面截图。对于目标页面截图对应的各碎片图像，终端可以识别基于目标页面截图得到的各碎片图像中的字符内容，从而得到目标字符内容。其中，终端可以通过预设的文字识别算法识别碎片图像中的字符内容。

步骤S208，利用目标字符内容以及目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息；搜索结果信息包括各其他页面截图对应位置的碎片图像中是否包含目标字符内容。

其中，终端识别出目标字符内容后，可以将上述目标页面截图与其他浏览器的页面截图进行对比，例如进行字符内容和位置的对比，确定字符内容是否均存在与两个页面截图中，以及字符内容的位置是否一致。在对比时，终端可以利用从上述目标页面截图的目标字符内容，以及目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，检测各其他页面截图对应位置的碎片图像是否包含上述目标字符内容，从而得到搜索结果信息。其中，上述目标字符内容所属碎片图像对应的位置信息可以是碎片图像在目标页面截图中的位置信息，上述各其他页面截图对应位置可以是与上述碎片图像在目标页面截图中的位置信息对应的位置，即终端可以先基于上述位置信息在各其他页面截图中确定对应位置，再在该对应位置中检测是否存在目标字符内容。

步骤S210，基于搜索结果信息，确定待测试页面在多个浏览器中显示效果的对比结果。

其中，终端将上述目标页面截图的碎片图像与各其他页面截图的碎片图像进行基于位置和目标字符内容的对比后，可以得到搜索结果信息，上述浏览器可以有多个，则终端可以得到目标页面截图与多个浏览器的页面截图对比后得到的多个搜索结果信息，终端可以基于这些搜索结果信息确定待测试页面在多个浏览器中显示效果的对比结果。具体可以包括字符内容是否有差异、字符内容的位置是否有偏差等，若终端确定出属于两个不同浏览器的两个碎片图像的字符内容相同，且碎片图像的位置也相同，终端可以确定这两个碎片图像为相同碎片，终端确定属于两个不同浏览器的页面截图中所有碎片图像均属于相同碎片时，可以确定这两个页面截图属于相同页面，则终端可以确定上述待测试页面在这两个浏览器的显示对比测试的结果为通过，终端还可以就将通过测试的结果推送给相关测试人员，例如通过显示测试结果的方式进行推送。若终端检测到两个浏览器之间的碎片图像存在差异，包括字符内容差异和位置差异等，终端可以标记出差异的位置和信息。并且，终端还可以将该差异结果推送给测试人员，使得测试人员进一步确认是否是程序问题导致差异。

上述页面对比测试方法中，可用于金融领域或其他领域，通过对由待测试页面通过多个浏览器展示出的每个页面截图进行图像膨胀处理，基于在膨胀后的页面截图确定字符内容所在的目标位置，从每个页面截图中提取对应碎片图像，记录各碎片图像在页面截图的位置信息。识别基于每个目标页面截图得到的碎片图像中的目标字符内容。利用目标字符内容以及目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，基于得到的搜索结果信息确定待测试页面在多个浏览器中显示效果的对比结果。相较于传统的通过人工在不同浏览器之间逐一对比的方式，本方案通过对不同浏览器显示的页面图像进行图像膨胀后提取碎片图像，基于碎片图像包含的文字内容和位置信息进行不同浏览器显示的页面之间的对比，提高了页面对比测试的效率。

在一个实施例中，获取待测试页面通过多个浏览器展示出的页面的多个页面截图，包括：在自动化测试系统中配置脚本信息；脚本信息包括多个浏览器对应的驱动、待测试页面对应的访问地址以及预设的页面对比测试策略；预设的页面对比测试策略表征待测试页面在不同浏览器中进行对比时的执行逻辑；基于脚本信息获取待测试页面在多个浏览器展示的页面的截图，得到多个页面截图。

本实施例中，终端可以通过运行脚本的方式进行上述各个浏览器之间的页面截图对比。在此之前，终端可以预先对脚本信息进行配置。终端中可以设置有自动化测试系统，终端可以在自动化测试系统中配置脚本信息。其中，脚本信息中包括多个浏览器对应的驱动、上述待测试页面对应访问地址以及预设的页面对比测试策略。其中，不同浏览器的驱动可以不一致，并且由于不同浏览器的驱动不同，会导致不同浏览器对同一页面进行渲染后得到的页面可能不同，待测试页面的访问地址可以是待测试页面的url地址；上述待测试页面还可以是银行业务系统对应的起始页面中的某个二级页面的地址，因此终端可以基于该访问地址在起始页面中找到对应的目标二级页面按钮，进而进入到待测试页面对应的页面；上述预设的页面对比测试策略可以表示待测试页面在不同浏览器中进行对比时的执行逻辑。例如可以包括如何在不同浏览器中打开待测试页面对应的页面，打开后要如何截取该每个浏览器中的页面截图以及如何进行对比等逻辑。终端可以基于上述脚本信息获取待测试页面在多个浏览器中展示的页面的截图，从而得到多个页面截图。

其中，在一些实施例中，上述脚本信息还包括截屏区域信息，对于每个浏览器的页面截图获取过程，终端截取页面截图时，可以在页面中预设的截屏区域进行页面图像截取。例如，在一个实施例中，上述获取待测试页面在多个浏览器展示的页面的截图，包括：通过多个浏览器打开业务系统，并基于访问地址，在各个浏览器中跳转至待测试页面；基于脚本信息中的截屏区域信息，在各个浏览器当前展示的待测试页面中截取对应区域，作为待测试页面对应的页面截图。本实施例中，终端可以在多个浏览器中打开业务系统，例如银行的交易业务系统，由于上述脚本信息中包括访问地址，因此终端可以基于脚本信息中的访问地址，在各个浏览器中跳转至待测试页面。上述脚本信息中包括截屏区域信息，则终端可以基于该截屏区域信息，在各个浏览器当前展示的待测试页面中截取对应区域，从而得到待测试页面对应的页面截图。其中，上述待测试页面对应的网页可以带有菜单栏、工具栏等无关信息，终端在截屏前可以将这些信息进行去除，例如在一些实施例中，终端可以基于上述预设的页面对比测试策略，将浏览器进行全屏，从而可以实现隐藏浏览器的菜单栏、工具栏等无关信息的效果。并且，为进一步减少待测试页面中无关信息的干扰，上述截屏区域信息可以是浏览器中显示上述待测试页面时的部分区域。

具体地，如图2所示，图2为一个实施例中截屏步骤的界面示意图。终端启动脚本信息时，可以按照自动化脚本中配置的url地址、数据、元素定位及执行方法等信息，驱动浏览器执行对应的动作，当浏览器打开时，终端可以将浏览器进行全屏化，例如通过浏览器中预设的全屏化功能进行，从而屏蔽不同浏览器的浏览器菜单、工具栏大小位置差异，保证截屏区域为相同图像。终端可以基于脚本信息中的访问地址，在各个浏览器中访问对应的页面，若需要测试二级菜单中的页面，终端可以基于对应的页面标识在当前页面中找到对应的入口进入，例如需要访问明细页，终端可以进入当前页面中的菜单页，并可以在延时预设时长后点击明细标识，从而进入相应的页面。终端还可以在脚本信息中记录截屏区域信息，例如截屏的坐标信息，该坐标信息可以是截屏区域的形成的形状的各个端点坐标，如图2中在上侧和左侧会有一些菜单栏等干扰信息，终端可以基于截屏区域信息截取兴趣区域。

通过上述实施例，终端可以基于脚本信息在各个浏览器中对应的截屏区域进行屏幕图像截取，从而得到各个浏览器对应的排除了干扰信息的页面截图，基于该页面截图进行对比测试，提高了对比测试的效率。

在一个实施例中，对每个页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，包括：针对每个页面截图进行灰度处理和二值化处理，对灰度处理和二值化处理后的页面截图进行膨胀处理，使得膨胀后的页面截图中相邻的字符内容连接在一起，得到膨胀后的页面截图；根据膨胀后的页面截图中多个相邻且颜色相同的像素点，提取膨胀后的页面截图中包含的至少一个轮廓信息，得到目标位置；轮廓信息表征膨胀后的页面截图中的相邻的字符内容对应的轮廓。

本实施例中，终端对页面截图进行膨胀处理的过程，具体可以是对灰度处理和二值化处理后的页面截图进行膨胀。其中，灰度处理是使色彩的三种颜色分量R、G、B的值相同，由于颜色值的取值范围是[0,255]，所以灰度的级别只有256种，即灰度图像仅能表现256种灰度颜色。二值化处理是指将图像上的像素点的灰度值设置为0或255，也就是将整个图像呈现出明显的只有黑和白的视觉效果。通过灰度处理和二值化处理后，终端可以得到只有黑白两种颜色的像素的页面截图，其中黑色像素可以是字符内容的像素，白色像素可以是背景的像素。则对于每个灰度化和二值化处理后的页面截图，终端可以对该页面截图进行膨胀处理，从而使得膨胀后的页面截图中，相邻的字符内容可以连接在一起，形成一片连续的黑色像素区域，得到膨胀后的页面截图。由于在页面截图中，一个词组与另一个词组之间的距离会较远，而一个词组中各个字符之间的距离会较近，因此上述膨胀后的页面截图中的各个相同像素的区域可以是一个词组对应的区域。则终端可以根据上述膨胀后的页面截图中多个相邻且颜色相同的像素点，提取膨胀后的页面截图中包含的至少一个轮廓信息，得到目标位置，例如，上述膨胀后的页面截图中，可以存在一片连续的黑色区域，则终端可以基于这些相邻且颜色相同的像素点，确定一组字符内容对应的区域，将该区域的轮廓作为上述目标位置，即轮廓信息可以是上述膨胀后的页面截图中相邻的字符内容对应的轮廓。其中，相邻的字符内容可以是属于同一个词组或按钮中的相邻字符。

并且，终端确定字符内容所在的目标位置后，可以基于该目标位置，在未经膨胀处理的页面截图中提取对应的字符位置信息。例如，在一个实施例中，终端得到上述目标位置后，可以根据至少一个对应的轮廓信息在膨胀后的页面截图中的目标位置，确定每个页面截图中的字符位置信息，其中，上述每个页面截图可以是未经膨胀处理的页面截图，即可以进行字符识别的页面截图。针对每个页面截图，终端可以提取上述字符位置信息的图像，从而终端可以得到至少一个碎片图像，至少一个碎片图像表示页面截图中可以包括至少一组字符内容，每个碎片图像中可以包括一组字符，终端还可以记录上述字符位置信息作为至少一个碎片图像在上述未经膨胀处理的页面截图中的位置信息。

具体地，终端提取位置的步骤的流程可以如图3所示，图3为一个实施例中位置提取步骤的流程示意图。包括膨胀、轮廓提取、位置确定和碎片分割等步骤，终端可以预先对上述截取的页面截图进行灰度处理，再进行二值化处理，随后对图像进行膨胀，从而使得将文字连接在一起，减少分割的碎片，进而提高字符内容识别的效率，如图4所示，图4为一个实施例中膨胀步骤的界面示意图。可见膨胀后相邻的字符可以形成一片连续的像素区域，终端基于这些连续的像素确定了一个个最小外包矩形，则终端可以基于这些矩形区域进行轮廓提取，终端提取至少一个轮廓信息后，可以在未经灰度、二值化和膨胀处理的页面截图中标记出对应的矩形区域，如图5所示，图5为一个实施例中轮廓识别步骤的界面示意图。可见上述轮廓信息即为由上述连续的像素区域组成的矩形的轮廓，终端可以将该矩形区域作为其对应的原始的页面截图中对应的字符内容的字符位置信息，终端可以将如图5所示的各个矩形区域进行图像分割，形成至少一个图像碎片，则每个图像碎片可以对应一组字符内容，终端还可以将每个矩形区域相对于原始的页面截图的位置进行记录，即记录上述字符位置信息。具体地，终端可以记录各个图像碎片的左上角坐标和矩形对应的宽和高，使得终端能够在对比图像碎片时快速得到位置信息。

通过上述实施例，终端可以通过灰度、二值化处理和膨胀处理对页面截图中各个字符内容进行位置提取，从而终端可以在各个浏览器中实现各个字符内容的位置对比测试，提高了对比测试的效率。

在一个实施例中，针对目标页面截图，识别基于目标页面截图得到的各碎片图像中的字符内容，作为目标字符内容，包括：针对目标页面截图，对目标页面截图中的各碎片图像进行灰度处理，将灰度处理后的各碎片图像存储至卡夫卡队列中；根据预设文字识别算法，并发识别卡夫卡队列中各碎片图像对应的字符，作为目标字符内容。

本实施例中，碎片图像可以是上述目标页面截图中的各字符内容对应的碎片图像。终端可以识别上述各个碎片图像中的字符内容。其中，终端可以对各碎片图像进行预处理后，再进行字符识别。对于上述目标页面截图，终端可以对目标页面截图中各碎片图像进行灰度处理，并将灰度处理后的各碎片图像存储至卡夫卡队列中，从而终端可以根据预设文字识别算法，并发识别上述卡夫卡队列中各碎片图像对应的字符，作为各碎片图像的目标字符内容。

具体地，如图6所示，图6为一个实施例中字符识别步骤的流程示意图。对于每个浏览器，由于彩色图像信息量大，并且二值化会把图像很多浅色底纹加深，为提高运算速度和减少文字识别的误识别率，终端可以将该浏览器的目标页面截图对应的各个碎片图像进行灰度化，并且，由于一张目标页面截图中可以分割出多个碎片图像，为提高对比的速度，不影响流程上图像处理速度，终端可以将图像碎片存储在卡夫卡队列中，实现解耦，并通过并发方式识别字符，从而终端可以得到上述目标页面截图上每个碎片图像的位置信息和目标字符内容。具体地，上述预设文字识别算法，可以是OCR(optical character recognition，文字识别)识别算法，OCR是指电子设备检查页面中的字符，然后用字符识别方法将形状翻译成计算机文字的过程。

通过本实施例，终端可以通过对灰度化处理的碎片图像进行并发文字识别，提高了对比测试的效率。

在一个实施例中，利用目标字符内容以及目标字符所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息，包括：针对目标字符内容，检测每个其他页面截图对应的碎片图像中是否包含相同字符内容；若检测结果为否，得到第一搜索结果信息；若检测结果为是，比对相同字符内容的位置信息，与目标字符内容对应的位置信息；若比对结果为二者的位置信息偏差小于或等于预设阈值，得到第二搜索结果信息；若比对结果为二者的位置信息偏差大于设定阈值，得到第三搜索结果信息；其中，相同字符内容的位置信息、目标字符内容对应的位置信息，分别基于各自所属碎片图像对应的位置信息确定。

本实施例中，终端确定各个碎片图像中的字符位置信息和目标字符内容后，可以进行各个浏览器之间的碎片图像对比。对于上述目标字符内容，终端可以检测每个其他页面截图对应的碎片图像中是否包含相同字符内容。其中，其他页面截图表示其他浏览器对应的页面截图，相同字符内容表示其他页面截图中与目标字符内容的字符内容相同的字符。若检测结果为否，则终端可以确定第一搜索结果信息。第一搜索结果信息可以是上述目标页面截图与其对比的浏览器的其他页面截图之间存在差异。若检测结果为是，则终端可以比对上述相同字符内容的位置信息与目标字符内容对应的位置信息。终端可以检测这两个位置信息是否相同，若终端检测到该比对结果为二者的位置信息偏差小于或等于预设阈值，则终端可以得到第二搜索结果，第二搜索结果可以表示相同字符内容和目标字符内容在其各自的页面截图中的位置相同，进而说明两个碎片图像相同；若终端检测到上述对比结果为二者的位置信息偏差大于设定阈值，则终端可以得到第三搜索结果，第三搜索结果表示相同字符内容和目标字符内容虽然字符内容相同，但在各自的页面截图中的位置存在差异。其中，上述相同字符内容的位置信息、目标字符内容的位置信息，可以分别基于各自所属碎片图像对应的位置信息确定，例如碎片图像对应的位置信息即为字符内容对应的位置信息。

其中，上述相同字符内容与目标字符内容的位置信息之间的比对，具体可以是坐标之间的比对。例如，在一些实施例中，上述各碎片图像的位置信息可以是各碎片图像的顶点坐标信息。例如各碎片图像的左上角、右下角的顶点坐标信息。终端也可以结合各碎片图像的宽高数值进行各个碎片图像间的比对。本实施例中，终端可以根据上述目标字符内容所述碎片图像的顶点坐标信息，确定目标字符内容的第一中心坐标。并根据相同字符内容所属碎片图像的顶点坐标信息，确定相同字符内容的第二中心坐标。从而终端可以将第一中心坐标和第二中心坐标进行比对，确定目标字符内容的位置信息和相同字符内容的位置信息的比对结果。

具体地，上述比对的过程可以如图7所示，图7为一个实施例中对比步骤的流程示意图。对于每两个浏览器，终端可以将两个浏览器的相同业务的页面截图进行上述预处理和文字识别后，确定各个文字的文字内容和目标位置，并且终端可以将各个浏览器之间的文字内容和位置进行比对，终端可以设置一定阈值作为误差容忍值，解决同一碎片图像有小偏差的情况，从而减少误识别率。若出现文字内容的差异或位置的差异，终端可以在碎片图像对应的原始的页面截图中进行标记。具体可以是终端将一张碎片图像去另外的浏览器中的另一张碎片图像中搜索，若无法搜索到相同的文字内容，则终端可以直接标识差异位置。若文字内容相同，则判断这两个碎片图像的中心坐标是否近似，终端可以基于各个碎片图像的顶点坐标和宽高信息(w,h)进行计算，其中，(x,y)可以是碎片图像的左上角坐标，w可以是碎片图像的宽度，h可以是碎片图像的高度。则中心坐标的公式如下所示：(x+w/2,y+h/2)，从而终端可以得到两个相同文字内容的碎片图像的中心坐标点，(x1,y1)及(x2,y2)，终端可以判断这两个中心坐标点的位置差是否在预设距离阈值内，位置差的计算公式可以为：d＝√((x

通过上述实施例，终端可以通过分别比对字符内容和字符内容所在的碎片图像的位置关系，确定分别属于两个浏览器的碎片图像是否相同，进而确定页面截图是否相同，提高了页面对比测试的效率。

在一个实施例中，如图8所示，图8为一个实施例中页面对比测试系统的结构示意图。系统包括脚本配置装置、脚本执行装置、图像预处理装置、OCR识别装置、碎片对比装置和差异推送装置。其中，脚本配置装置可以是用于配置脚本信息的装置；脚本执行装置可以是用于执行脚本信息的装置；图像预处理装置可以是对页面截图进行灰度、二值化和膨胀等处理的装置；OCR识别装置可以是对碎片图像进行文字识别的装置；碎片对比装置可以是用于对比碎片图像的装置；差异推送装置可以是在检测到两个页面间存在差异时，向测试人员进行差异信息推送的装置。

应用于上述图8中的系统，提供一种页面对比测试方法，如图9所示，图9为另一个实施例中页面对比测试方法的流程示意图。包括以下步骤：系统启动后，启动界面自动化测试框架，测试人员编写界面自动化脚本后，可以配置需要运行的浏览器环境和截屏区域等信息，调用相应的浏览器驱动，模拟人工点击，并进行相应的区域截屏。例如在第一浏览器中执行界面自动化脚本，获取页面截图并保存；以及在第二浏览器中执行界面自动化脚本，获取页面截图并保存。终端根据图像命名，将同一个业务的两张页面截图分别进行预处理，例如进行轮廓识别和位置提取，并进行图像分割，得到多个碎片图像。终端可以将两张图像的碎片图像分别进行OCR识别，得到两张图像中的图像碎片位置信息和文字信息。从而终端可以将两个碎片图像进行对比，检测出存在差异的文字内容和位置。若有存在差异的碎片图像，终端可以在其原始的页面截图中进行标识。终端每两个浏览器的碎片图像均对比完成后，若存在差异，则终端可以将差异信息推送至测试人员进行分析确认。当自动化测试脚本运行完成后，终端可以启动其他部分，例如脚本运行完成后的测试报告生成等步骤。

通过上述实施例，终端通过对不同浏览器显示的页面图像进行图像膨胀后提取碎片图像，基于碎片图像包含的文字内容和位置信息进行不同浏览器显示的页面之间的对比，提高了页面对比测试的效率。并且，采用图像轮廓提取与图像分割后再进行OCR识别，相对于全图做OCR文字识别，更容易进行精确的位置与文字对比判断；轮廓提取与OCR结合使用，解决了元素渲染等造成图片差异较大而无法开展传统图像识别对比，使界面自动化对比测试顺利开展，无需测试人员在多浏览器进行人工测试。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的页面对比测试方法的页面对比测试装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个页面对比测试装置实施例中的具体限定可以参见上文中对于页面对比测试方法的限定，在此不再赘述。

在一个实施例中，如图10所示，提供了一种页面对比测试装置，包括：获取模块500、处理模块502、识别模块504、搜索模块506、和对比模块508，其中：

获取模块500，用于针对业务系统中的待测试页面，获取待测试页面通过多个浏览器展示出的页面的多个页面截图；多个浏览器包括多个不同驱动的浏览器。

处理模块502，用于对每个页面截图进行图像膨胀处理，在膨胀后的页面截图中确定字符内容所在的目标位置，基于目标位置从每个页面截图中提取得到对应的碎片图像，并记录各碎片图像在页面截图的位置信息。

识别模块504，用于针对目标页面截图，识别基于目标页面截图得到的各碎片图像中的字符内容，作为目标字符内容；目标页面截图为多个页面截图中的一个。

搜索模块506，用于利用目标字符内容以及目标字符内容所属碎片图像对应的位置信息，搜索其他页面截图对应的碎片图像，得到搜索结果信息；搜索结果信息包括各其他页面截图对应位置的碎片图像中是否包含目标字符内容。

对比模块508，用于基于搜索结果信息，确定待测试页面在多个浏览器中显示效果的对比结果。

在一个实施例中，上述获取模块500，具体用于在自动化测试系统中配置脚本信息；脚本信息包括多个浏览器对应的驱动、待测试页面对应的访问地址以及预设的页面对比测试策略；预设的页面对比测试策略表征待测试页面在不同浏览器中进行对比时的执行逻辑；基于脚本信息获取待测试页面在多个浏览器展示的页面的截图，得到多个页面截图。

在一个实施例中，上述获取模块500，具体用于通过多个浏览器打开业务系统，并基于访问地址，在各个浏览器中跳转至待测试页面；基于脚本信息中的截屏区域信息，在各个浏览器当前展示的待测试页面中截取对应区域，作为待测试页面对应的页面截图。

在一个实施例中，上述装置还包括：全屏模块，用于基于预设的页面对比测试策略，全屏化浏览器，以隐藏浏览器的菜单栏和/或工具栏。

在一个实施例中，上述处理模块502，具体用于针对每个页面截图进行灰度处理和二值化处理，对灰度处理和二值化处理后的页面截图进行膨胀处理，使得膨胀后的页面截图中相邻的字符内容连接在一起，得到膨胀后的页面截图；根据膨胀后的页面截图中多个相邻且颜色相同的像素点，提取膨胀后的页面截图中包含的至少一个轮廓信息，得到目标位置；轮廓信息表征膨胀后的页面截图中的相邻的字符内容对应的轮廓。

在一个实施例中，上述处理模块502，具体用于根据至少一个轮廓信息在膨胀后的页面截图中的目标位置，确定每个页面截图中的字符位置信息；针对每个页面截图，提取字符位置信息的图像得到至少一个碎片图像，并记录至少一个碎片图像在页面截图中的位置信息。

在一个实施例中，上述识别模块504，具体用于针对目标页面截图，对目标页面截图中的各碎片图像进行灰度处理，将灰度处理后的各碎片图像存储至卡夫卡队列中；根据预设文字识别算法，并发识别卡夫卡队列中各碎片图像对应的字符，作为目标字符内容。

在一个实施例中，上述搜索模块506，具体用于针对目标字符内容，检测每个其他页面截图对应的碎片图像中是否包含相同字符内容；若检测结果为否，得到第一搜索结果信息；若检测结果为是，比对相同字符内容的位置信息，与目标字符内容对应的位置信息；若比对结果为二者的位置信息偏差小于或等于预设阈值，得到第二搜索结果信息；若比对结果为二者的位置信息偏差大于设定阈值，得到第三搜索结果信息；其中，相同字符内容的位置信息、目标字符内容对应的位置信息，分别基于各自所属碎片图像对应的位置信息确定。

在一个实施例中，上述搜索模块506，具体用于根据目标字符内容所属碎片图像的顶点坐标信息，确定目标字符内容的第一中心坐标，以及根据相同字符内容所属碎片图像的顶点坐标信息，确定相同字符内容的第二中心坐标；比对第一中心坐标与第二中心坐标，确定目标字符内容的位置信息和相同字符内容的位置信息的比对结果。

上述页面对比测试装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面对比测试方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置。显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述的页面对比测试方法。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述的页面对比测试方法。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述的页面对比测试方法。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。