CN111460355A - 一种页面解析方法和装置 - Google Patents

Abstract

本说明书实施例提供一种页面解析方法和装置，该方法包括：在对待解析的目标页面进行解析时，获取目标图片，所述目标图片中包括所述目标页面中的内容；对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；基于所述目标图片进行布局生成，确定所述多个控件的布局信息；基于所述多个控件的属性信息和布局信息，可以得到对所述目标页面的解析结果。

Description

一种页面解析方法和装置

技术领域

本文件涉及计算机技术领域，尤其涉及一种页面解析方法和装置。

背景技术

目前，在多种业务场景中都需要对页面进行解析，以根据解析结果执行与业务场景对应的业务操作。比如，在UI自动化测试场景中，需要对测试页面进行解析，以确定测试页面中是否包括想要的控件（也可以称为元素，比如文本、按钮，弹窗等）。

通常，页面中包括的内容较多，控件的控件信息也比较复杂，例如，页面中可以包括多个不同类型的控件，同一类型的控件的个数可以有多个，且该多个类型相同的控件可以分布在页面的不同区域，这样，就会导致在对页面进行解析时，解析难度较高，往往无法得到有效地解析结果。有鉴于此，需要提供一种有效地方案可以实现对页面的有效解析。

发明内容

本说明书实施例提供一种页面解析方法和装置，用于解决目前在对页面进行解析时，无法对页面进行有效解析的问题。

为解决上述技术问题，本说明书实施例是这样实现的：

第一方面，提出一种页面解析方法，包括：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

第二方面，提出一种页面解析装置，包括：

获取单元，获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

控件解析单元，对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

布局生成单元，基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

确定单元，基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

第三方面，提出一种电子设备，该电子设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，该可执行指令在被执行时使该处理器执行以下操作：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

第四方面，提出一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行以下方法：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

本说明书一个或多个实施例采用的上述至少一个技术方案能够达到以下技术效果：

本说明书一个或多个实施例提供的技术方案，在对目标页面进行解析时，由于可以在对目标页面进行控件解析得到目标页面中包括的多个控件的属性信息的基础上，还对该多个控件进行了布局生成，得到该多个控件的布局信息，其中，多个控件的属性信息可以包括多个控件的坐标、类别和语义信息，因此，结合解析到的多个控件的属性信息和生成的布局信息，可以得到针对目标页面的更为有效地解析结果。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书实施例中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本说明书的一个实施例页面解析方法的流程示意图；

图2是本说明书的一个实施例基于目标图片生成一级布局信息的流程示意图；

图3是本说明书的一个实施例目标图片的示意图；

图4是本说明书的一个实施例电子设备的结构示意图；

图5是本说明书的一个实施例页面解析装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书实施例中的技术方案，下面将结合本说明书一个或多个实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本文件的保护范围。

以下结合附图，详细说明本说明书各实施例提供的技术方案。

图1是本说明书的一个实施例页面解析方法的流程示意图。所述方法如下所述。

S102：获取目标图片，所述目标图片中包括待解析的目标页面中的内容。

在S102中，在对目标页面进行解析时，可以获取该目标页面对应的目标图片，以便基于目标图片对目标页面进行解析。其中，目标页面可以是APP中的某个页面，也可以是浏览器中的某个页面等，目标图片中可以包括目标页面中的内容。

本实施例中，在获取目标图片时，可以通过对目标页面进行截图的方式获取得到，例如，在对智能手机中某个APP的登录页面进行解析时，可以通过截屏的方式得到目标图片。当然，在其他实现方式中，也可以通过对目标页面进行拍照等方式得到目标图片，这里不再一一举例说明。

S104：对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息。

目标页面中通常包括多个控件，这些控件可以是按钮、图标/图片、文本、进度条、switch开关、更多按钮、编辑框、弹窗、复选框、返回按钮、关闭按钮等，在对目标页面解析时，往往需要得到这些控件的相关信息。有鉴于此，在S104中，在获取到目标图片后，可以对目标图片进行控件解析，得到目标图片（目标页面）中包括的多个控件的属性信息。其中，多个控件的属性信息可以包括多个控件的坐标、类别和语义信息。

控件的坐标可以理解为控件在目标图片中的位置坐标，控件的类别可以理解为文本、按钮、图标/图片、进度条等，控件的语义信息可以理解为控件中包括的字符串，也可以理解为控件具体是什么控件，例如，若控件的类别为文本，则该控件的语义信息可以是文本中包括的字符串，再例如，若控件为应用A的图标，则该控件的语义信息可以是应用A的名称。

本实施例中，在对目标图片进行控件解析时，具体可以包括如下步骤：

首先，可以基于预设的检测模型对目标图片进行控件检测，得到目标图片中包括的多个控件的控件信息。

预设的检测模型可以是现有的Yolo3-tiny模型，Yolo3-tiny模型为通用模型，可以对多种不同类型的控件进行检测，但需要注意的是，在一般情况下，Yolo3-tiny模型可以默认检测上百甚至上千种不同类别的控件，而在本实施例中，目标图片（目标页面）中包括的控件类别一般不会上百，因此，为了便于使用Yolo3-tiny模型对目标图片进行控件检测，需要修改Yolo3-tiny模型的header部分，该header部分可以表征Yolo3-tiny模型输出的控件类别的数量，通过修改header部分，可以调整Yolo3-tiny模型输出的控件类别的数量，进而调整Yolo3-tiny模型可以检测的控件种类，具体修改可以根据实际需要检测的控件类别而定，这里不做具体限定。

比如，假设Yolo3-tiny模型默认可以检测1000种类别的控件，目标图片中包括的控件的类别为11种（这11种类别可以是自定义的类别），那么，可以对Yolo3-tiny模型的header部分进行修改，使得Yolo3-tiny模型的可以检测这11种类别的控件。

当然，在其他应用场景中，若对控件的类别进行更细粒度的划分或更粗粒度的划分，则也可以对应调整Yolo3-tiny模型的header部分，使得Yolo3-tiny模型可以灵活地在不同的应用场景中检测不同类型数量的控件。

还需注意的是，Yolo3-tiny模型通常适合在PC端中使用，若需要在客户端（比如智能手机）使用，则需要对Yolo3-tiny模型进行转换，使得该模型可以在客户端运行。具体地，可以使用Tensorflow提供的TOCO模型转换工具完成PB模型到TensorFlow Lite模型的转换，并通过C++ API来实现对客户端的操作***Android、iOS、Linux等的适配。

应理解，在其他实现方式中，也可以采用其他的通用模型（可以对不同类型的控件进行检测）对目标图片进行控件解析，这里不再一一举例说明。

在基于预设的检测模型对目标图片进行控件检测时，可以将目标图片作为模型的输入，模型的输出结果即为目标图片中包括的多个控件的控件信息，其中，控件信息可以包括控件的类别和坐标。可选地，模型的输出结果还可以包括对多个控件的检测结果的置信度，该置信度可以表征对多个控件的检测结果的可信程度。

其次，基于预设的分类模型对多个控件中类别为图标/图片的第一控件进行分类，得到第一控件的语义信息。

在得到目标图片中多个控件的类别和坐标后，针对类别为图标/图片的控件，为了拓展这类控件的维度，体现更多的业务场景信息，可以对这一类的控件进行细分，得到能够体现图标/图片类控件的业务场景的语义信息。比如，目标图片中包括两个图标控件，分别是应用A的图标和应用B的图标，那么，需要对这两个控件进行细分，得到一个图标的语义信息是应用A的名称，另一个图标的语义信息是应用B的名称。

本实施例中，在对图标/图片类的控件（为了便于区分，以下可以由第二控件表示）进行分类时，可以基于预设的分类模型实现。

预设的分类模型可以是现有的MobileNet V1模型，该模型可以通过对不同业务场景下的图标以及代表UI异常的背景图训练得到，在基于该模型对上述第二控件进行分类时，可以将第二控件作为模型的输入，模型的输出结果即为第二控件的语义信息。

需要说明的是，MobileNet V1模型通常适合在PC端中使用，若需要在客户端（比如智能手机）使用，则需要对MobileNet V1模型进行转换，使得该模型可以在客户端运行。具体转换方法可以参见上述对Yolo3-tiny模型进行转换的描述，这里不再重复说明。

最后，对目标图片进行OCR识别，得到多个控件中其他类别的第三控件的语义信息。

基于上一步骤，我们得到了图标/图片类别的第二控件的语义信息，针对其他类别的控件（为了便于区分，以下可以由第三控件表示），在进行控件解析时，也需要得到其他类别的第三控件的语义信息。

本实施例中，由于其他类别的第三控件是非图标/图片类别的控件，因此，可以通过OCR技术得到其他类别的第三控件的语义信息。具体地，可以对目标图片进行OCR识别，得到目标图片中其他类别的第三控件的OCR识别结果，该OCR识别结果中可以包括对第三控件的字符串描述以及对第三控件的识别结果的置信度，若该置信度不小于设定阈值，则可以将识别得到的字符串描述作为第三控件的语义信息。

至此，通过上述三个步骤，可以解析得到目标图片中包括的多个控件的坐标、类别和语义信息，将多个控件的坐标、类别和语义信息进行融合，可以得到多个控件的属性信息。

可选地，在上述对目标图片进行OCR识别后，识别结果中还可以包括第三控件的坐标，由于OCR识别得到的坐标的准确度较高，因此，可以将OCR识别得到的第三控件的坐标代替上述基于预设的检测模型进行控件检测得到的第三控件的坐标。

具体地，针对任一个第三控件而言，可以判断OCR对第三控件的识别结果的置信度是否不小于设定置信度阈值，若是，则可以说明OCR的识别结果比较可靠，此时可以将上述控件检测得到的第三控件的坐标替换为OCR识别得到的第三控件的坐标，若否，则可以说明OCR的识别结果不可靠，此时可以不进行上述坐标替换。其中，设定置信度阈值可以根据实际情况确定，这里不做具体限定。

S106：基于所述目标图片进行布局生成，确定所述多个控件的布局信息。

在S106中，在解析得到目标图片中包括的多个控件的属性信息的基础上，还可以进一步基于目标图片进行布局生成，得到该多个控件的布局信息，以便基于多个控件的属性信息和布局信息得到对目标页面的解析结果。

多个控件的布局信息可以理解为多个控件在目标图片（目标页面）中的布局，具体可以包括一级布局信息和二级布局信息，其中，一级布局信息可以表征多个控件基于行的布局信息，比如，控件位于目标图片中的哪个行区域，二级布局信息可以表征多个控件基于列的布局信息，比如，控件是否存在子控件，该子控件可以理解为可以与该控件进行合并的控件。

本实施例中，在基于目标图片进行布局生成，确定多个控件的布局信息时，首先，可以基于预设的图像形态学算法对目标图片进行行分割，得到多个控件的一级布局信息；其次，可以基于一级布局信息，对多个控件进行基于列的布局分析，得到多个控件的二级布局信息；最后，将多个控件的二级布局信息添加到一级布局信息中，得到多个控件的布局信息。

以下将对上述布局生成的各步骤进行详细说明。

在采用预设的图像形态学算法对目标图片进行行分割，得到多个控件的一级布局信息时：

首先，可以对目标图片进行预处理，得到去除纵向噪音后的二值化图片。

二值化图片可以理解为图片中的像素值要么是0（黑色），要么是1（白色）的图片，由于目标图片通常为RGB图片，因此，为了得到二值化图片，这里需要将目标图片转换为灰度图片；在得到灰度图片后，对灰度图片执行二值化操作，从而得到二值化图片。

需要说明的是，由于二值化图片中通常会包括纵向的噪音，在对目标图片进行行分割时，这些噪音会产生干扰，影响分割结果的准确度，因此，在得到二值化图片后，还需要对二值化图片进行纵向去噪处理。具体地，可以构造形态学结构化元素，使用形态学结构化元素依次对二值化图片进行腐蚀和膨胀操作，这里的腐蚀和膨胀操作可以理解为去除纵向上的独立噪点，保留关键元素，使得二值化图像更干净，这样，可以实现对二值化图片的纵向去噪处理，得到去除纵向噪音后的二值化图片。

需要注意的是，上述构造的形态学结构化元素的宽度和目标图片的宽度的比值应不大于预设比值，该预设比值可以是30分之1，也可以根据实际情况进行设定，这里不做具体限定。

其次，基于上述得到的二值化图片，确定至少一个行边界。

通常，目标图片中行边界的颜色比较深或比较暗，在对目标图片进行二值化操作后，行边界会变成黑色，对应像素的像素值可以由0表示（白色为1），有鉴于此，在确定行边界时，可以对二值化图片中的像素点按行进行遍历，确定多个候选边界，其中，任一候选边界所在行的有效像素点的数量不小于设定阈值，这里的有效像素点可以理解为像素值为0的像素点，任一候选边界所在行的有效像素点的数量不小于设定阈值可以理解为，任一候选边界所在行的像素点中，像素值为0的像素点的数量不小于设定阈值，该设定阈值可以根据实际情况设定，这里不做具体限定。优选地，设定阈值不小于一行像素中包括的像素点数量的90%。

比如，假设目标图片中一行像素的宽度为1080（即一行像素包括1080个像素点），设定阈值为一行像素点数量的90%，那么，在进行行扫描时，若一行像素中大于或等于90%的像素点的像素值均为0，那么，该行像素可以认为是一条候选边界。

在得到多个候选边界后，考虑到有的候选边界可能不是真正的行边界，因此，还需要从多个候选边界中确定哪些候选边界属于行边界。由于目标图片中的行边界都有一定的高度，因此，可以以此为依据，从多个候选边界中确定行边界。

具体地，针对多个候选边界中任两个位置相邻的候选边界（以下可以由第一候选边界和第二候选边界表示），可以判断第一候选边界和第二候选边界之间的距离是否不小于设定高度阈值，该设定高度阈值可以理解为两个实际相邻的行边界之间的高度阈值，具体可以根据实际情况确定，优选地，设定高度阈值可以是目标图片的高度的5%。

若第一候选边界和第二候选边界之间的距离不小于设定高度阈值，则可以说明第一候选边界和第二候选边界之间的距离满足行边界之间的距离条件，此时可以将第一候选边界和第二候选边界确定为两个行边界；反之，若第一候选边界和第二候选边界之间的距离小于设定高度阈值，则可以说明第一候选边界和第二候选边界之间的距离不满足行边界之间的距离条件，此时可以认为第一候选边界和第二候选边界属于同一个行边界，并将第一候选边界和第二候选边界进行合并。

在对多个候选边界执行上述操作后，最终可以得到至少一个行边界。

最后，基于上述得到的至少一个行边界和S104中解析得到的多个控件的属性信息，确定多个控件的一级布局信息。

具体地，在得到至少一个行边界后，可以基于至少一个行边界，得到多个行区域，其中，任一行区域可以由位置相邻的两个行边界构成。之后，可以基于S104中解析得到的多个控件的属性信息，确定属性信息中包括的多个控件的坐标，结合多个行区域的区域坐标，可以将多个控件划分到多个行区域，从而得到多个控件的一级布局信息。

多个控件的一级布局信息可以包括：多个行区域中任一行区域占用的像素（比如某个行区域位于目标图片中的第几行像素到第几行像素之间），任一行区域中包括哪些控件以及这些控件的属性信息等。

可选地，在确定多个控件的一级布局信息后，还可以进一步确定一级布局信息对应的语义信息。具体地，针对多个行区域中的任一行区域，可以执行以下操作：确定行区域中包括的控件的类别；基于行区域中包括的控件的类别，确定行区域的语义信息。

在基于控件的类别确定行区域的语义信息之前，可以预先建立查找表，该查找表中可以存储控件的类别和控件的类别对应的语义信息之间的对应关系，该对应关系可以由具体的业务方来定义。这样，在基于控件的类别确定行区域的语义信息时，可以基于控件的类别在查找表中查找对应的语义信息，并将查找到的语义信息作为行区域的语义信息。

比如，可以根据业务场景，将控件类别为编辑框和背景提示文本的控件打上“用户名输入”的标签，即建立控件的类别为编辑框和背景提示文本，以及语义信息为“用户名输入”之间的对应关系。这样，在生成布局的语义信息时，针对包括编辑框和背景提示文本的行区域，可以确定该行区域的语义信息为“用户名输入”。

在通过上述方法得到布局的语义信息后，可以将布局的语义信息作为一级布局信息的属性，从而可以给布局增加更多的语义属性。

需要说明的是，在实际应用中，某些行区域可能并不存在语义信息，比如，如果某个行区域中包括的控件均为图标/图片，那么，该行区域就没有语义信息，此时，可以不需要确定对应的语义信息。

为了便于理解上述确定多个控件的一级布局信息的整个过程，可以参见图2。图2是本说明书的一个实施例基于目标图片生成一级布局信息的流程示意图，可以包括以下步骤。

S201：将目标图片转换为灰度图片。

S202：对灰度图片进行二值化操作，得到二值化图片。

S203：构造形态学结构化元素。

形态学结构化元素的宽度和目标图片的宽度的比值不大于预设比值。

S204：基于形态学结构化元素对二值化图片进行纵向去噪处理，得到去除纵向噪音后的二值化图片。

S205：对所二值化图片中的像素点按行进行遍历，确定多个候选边界。

其中，任一候选边界所在行的有效像素点的数量不小于设定阈值。

S206：确定第一候选边界和第二候选边界之间的距离是否不小于设定高度阈值。

其中，第一候选边界和第二候选边界为多个候选边界中任两个位置相邻的候选边界。

若判断结果为第一候选边界和第二候选边界之间的距离不小于设定高度阈值，则执行S207；否则，执行S208。

S207：将第一候选边界和第二候选边界确定为两个行边界。

S208：将第一候选边界和第二候选边界合并为一个行边界。

在执行S207或S208后，可以执行S209。

S209：基于至少一个行边界，得到多个行区域。

其中，任一行区域由位置相邻的两个行边界构成。

S210：基于多个行区域的区域坐标以及多个控件的属性信息中包括的多个控件的坐标，将多个控件划分到多个行区域，得到一级布局信息。

S211：基于一级布局信息和多个行区域中包括的控件的类别，确定一级布局信息对应的语义信息。

上述S201至S211中各步骤的具体实现，可以参见S106中相应步骤的具体实现，这里不再重复说明。

本实施例中，在通过上述记载的方法确定多个控件的一级布局信息后，可以基于该一级布局信息，对多个控件进行基于列的布局分析，得到多个控件的二级布局信息。

在一种实现方式中，在确定多个控件的二级布局信息时，针对一级布局信息对应的多个行区域（即基于目标图片中的至少一个行边界得到的多个行区域）中的任一行区域，可以执行以下操作：

首先，确定行区域中包括的多个目标控件。

本实施例中，目标控件可以理解为可能存在子控件的控件，考虑到在控件占用的面积较大且与其他控件之间的距离近似相同的情况下，控件可能存在子控件，因此，在确定多个目标控件时，多个目标控件至少需要满足以下两个条件：所占区域的面积不小于设定面积；任两个位置相邻的目标控件之间的纵向间距或横向间距相同（或近似相同）。其中，目标控件所占区域的面积可以是目标控件对应的最大外接矩形框在目标图片中所占的面积，设定面积可以根据实际情况确定。

可选地，若行区域中不存在上述多个目标控件，则可以确定该行区域中的控件没有对应的二级布局信息，此时，可以无需执行后续确定二级布局信息的步骤。

其次，按照预设规则遍历行区域中的其他控件，确定与多个目标控件对应的多个子控件。

本实施例中，一个目标控件可以对应一个子控件，且不同的目标控件与对应的子控件之间的位置关系的相似度不小于设定相似度。其中，在确定多个目标控件对应的子控件时，具体实现方式如下：

针对任一目标控件，以该目标控件为中心，按照顺时针方向由近到远遍历行区域中的其他控件；针对任两个目标控件，判断其他控件中是否存在两个第一控件，其中，相对两个目标控件的同一位置而言，这两个第一控件所占区域的交集和并集之比（交并比）不小于设定比值，其中，设定比值可以优选0.7至1，两个第一控件所占区域的交并比可以描述这两个第一控件与两个目标控件之间的位置相似程度，交并比越高（交并比的取值范围为0到1），可以说明两个第一控件的相对两个目标控件的位置关系越相似。

若存在这样的两个第一控件，则将这两个第一控件确定为上述两个目标控件对应的两个子控件；若不存在这样的两个第一控件，则可以确定上述两个目标控件没有子控件。

也就是说，针对每个目标控件，可以以其为中心，由近及远、顺时针遍历周围的控件，判断在任两个目标控件的相同位置是否存在相同控件。其中，在判断任两个目标控件的相同位置是否存在相同控件时，判断依据是，其他控件中某两个控件对应的最大外接矩形边框相对两个目标控件某个指定位置（可以是目标控件的左上角，也可以是目标控件的中心位置等）的坐标之间的交并比是否不小于设定比值，若是，则可以认为这两个控件是两个目标控件的相同位置处存在的相同控件，可以视为两个目标控件的子控件，反之，则可以认为这两个控件不是两个目标控件的相同位置处存在的相同控件，不能视为两个目标控件的子控件。

为了便于理解，可以参见图3。图3是本说明书的一个实施例目标图片的示意图。

图3所示的目标图片中，位于中间的行区域（其他行区域并未示出）中包括4个图标控件，分别为A、B、C和D，在4个图标控件中的下方有4个文本控件，分别为1、2、3和4。

基于图3所示的行区域，在确定该行区域中的多个目标控件时，由于4个图标控件所占区域的面积较大，且这4个图标控件之间的横向距离近似相等，因此，可以将这4个图标控件确定为多个目标控件。

之后，在确定这4个目标控件对应的子控件时，可以分别以这个4个图标控件为中心，由近及远且按照顺时针方式遍历其他4个文本控件。具体地，针对图标控件A而言，在以图标控件A为中心顺时针旋转时，发现在近距离的6点钟方向有一个文本控件1，针对图标控件B而言，在以图标控件B为中心顺时针旋转时，同样发现在近距离的6点钟方向有一个文本控件2，此时，可以判断文本控件1的边框和文本控件2的边框各自相对于图标控件A和图标控件B的同一位置而言，所占区域的交并比是否不小于设定比值。

在判断交并比是否不小于设定比值时，可以将图标控件A和文本控件1与图标控件B和文本控件2重叠，判断文本控件1和文本控件2所占区域的交并比是否不小于设定比值。

具体地，可以将图标控件A的中心和图标控件B的中心作为上述同一位置，将图标控件B水平向左平移，直至图标控件A的中心与图标控件B的中心重叠，在平移过程中，文本控件2也会跟随图标控件B向左平移，且文本控件2与图标控件B之间的相对位置关系不变。在将图标控件A和文本控件1与图标控件B和文本控件2重叠后，判断文本控件1和文本控件2各自的边框所占区域的交并比是否不小于设定比值。

从图3可以看出，文本控件1和文本控件2各自的边框所占区域的交并比为1，不小于设定比值，因此，可以确定文本控件1为图标控件A的子控件，文本控件2为图标控件B的子控件。

基于相同的方法，还可以确定文本控件3为图标控件C的子控件，文本控件4为图标控件D的子控件。

最后，在确定多个目标控件对应的多个子控件后，可以将多个目标控件和多个子控件对应合并，得到多个目标控件的二级布局信息。

具体地，在得到多个目标控件对应的多个子控件后，针对任一个目标控件而言，可以将目标控件对应的子控件与该目标控件合并，进而得到目标控件的二级布局信息。

在第二种实现方式中，在确定多个控件的二级布局信息时，针对一级布局信息对应的多个行区域中的任一行区域，可以执行以下操作：

首先，获取预先训练得到的识别模型。

识别模型可以通过对不同控件和不同控件对应的控件响应区进行学习训练得到，其中，控件响应区可以理解为控件的热区或有效响应区，比如，某个应用图标的控件响应区可以理解为，在点击该控件响应区后，可以打开该应用图标对应的应用。

其次，基于识别模型对行区域中包括的控件进行识别，确定行区域中包括的控件响应区。

最后，基于识别到的控件响应区，得到行区域中至少一个控件的二级布局信息。

需要说明的是，在实际应用中，在确定目标图片中多个控件的二级布局信息时，可以采用上述第一种实现方式，也可以采用上述第二种实现方式，优选地，由于上述第一种实现方式的准确度较高，因此，可以优先采用上述第一种实现方式。

还需要说明的是，目标图片中包括的控件的布局信息通常为两级，以树结构表示目标图片中的控件的布局信息话，树的深度为2，其中，根节点为控件，表征控件的一级布局信息，子节点为子控件，表征对应的根节点控件的二级布局信息。当然，在某些特殊的情况下，也可能存在树的深度大于2，即控件的子控件也有对应的子控件，在这种情况下，子控件的子控件对应的三级布局信息可以通过上述二级布局信息的确定方法确定得到，本实施例仅以布局信息中包括两级布局信息为例进行说明。

S108：基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

在S108中，在得到目标页面中多个控件的属性信息和布局信息后，可以将多个控件的布局信息和属性信息进行融合，从而得到对目标页面的解析结果。

本说明书一个或多个实施例提供的技术方案，在对目标页面进行解析时，由于可以在对目标页面进行控件解析得到目标页面中包括的多个控件的属性信息的基础上，还对该多个控件进行了布局生成，得到该多个控件的布局信息，其中，多个控件的属性信息可以包括多个控件的坐标、类别和语义信息，因此，结合解析到的多个控件的属性信息和生成的布局信息，可以得到针对目标页面的更为有效地解析结果。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

图4是本说明书的一个实施例电子设备的结构示意图。请参考图4，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器（non-volatile memory），例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构）总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构）总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图4中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面解析装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

上述如本说明书图4所示实施例揭示的页面解析装置执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器（Central Processing Unit，CPU）、网络处理器（Network Processor，NP）等；还可以是数字信号处理器（Digital SignalProcessor，DSP）、专用集成电路（Application Specific Integrated Circuit，ASIC）、现场可编程门阵列（Field－Programmable Gate Array，FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本说明书实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本说明书实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

该电子设备还可执行图1的方法，并实现页面解析装置在图1所示实施例中的功能，本说明书实施例在此不再赘述。

当然，除了软件实现方式之外，本说明书实施例的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本说明书实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括多个应用程序的便携式电子设备执行时，能够使该便携式电子设备执行图1所示实施例的方法，并具体用于执行以下操作：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

图5是本说明书的一个实施例页面解析装置50的结构示意图。请参考图5，在一种软件实施方式中，所述页面解析装置50可包括：获取单元51、控件解析单元52、布局生成单元53和确定单元54，其中：

获取单元51，获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

控件解析单元52，对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

布局生成单元53，基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

确定单元54，基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

可选地，所述多个控件的布局信息包括一级布局信息和二级布局信息，所述一级布局信息表征所述多个控件基于行的布局信息，所述二级布局信息表征所述多个控件基于列的布局信息。

可选地，所述布局生成单元53，基于所述目标图片进行布局生成，确定所述多个控件的布局信息，包括：

基于预设的图像形态学算法对所述目标图片进行行分割，得到所述一级布局信息；

基于所述一级布局信息，对所述多个控件进行基于列的布局分析，得到所述二级布局信息；

将所述二级布局信息添加到所述一级布局信息中，得到所述多个控件的布局信息。

可选地，所述布局生成单元53，采用预设的图像形态学算法对所述目标图片进行行分割，得到所述一级布局信息，包括：

对所述目标图片进行预处理，得到去除纵向噪音后的二值化图片；

基于所述二值化图片，确定至少一个行边界；

基于所述至少一个行边界和所述多个控件的属性信息，确定所述一级布局信息。

可选地，所述布局生成单元53，对所述目标图片进行预处理，得到去除纵向噪音后的二值化图片，包括：

将所述目标图片转换为灰度图片；

对所述灰度图片进行二值化操作，得到二值化图片；

构造形态学结构化元素，所述形态学结构化元素的宽度和所述目标图片的宽度的比值不大于预设比值；

基于所述形态学结构化元素对所述二值化图片进行纵向去噪处理，得到去除纵向噪音后的二值化图片。

可选地，所述布局生成单元53，基于所述二值化图片，确定至少一个行边界，包括：

对所述二值化图片中的像素点按行进行遍历，确定多个候选边界，任一候选边界所在行的有效像素点的数量不小于设定阈值；

针对所述多个候选边界中任两个位置相邻的第一候选边界和第二候选边界，执行以下操作：

确定所述第一候选边界和所述第二候选边界之间的距离是否不小于设定高度阈值；

若是，则将所述第一候选边界和所述第二候选边界确定为两个行边界；

若否，则将所述第一候选边界和所述第二候选边界合并为一个行边界。

可选地，所述布局生成单元53，基于所述至少一个行边界和所述多个控件的属性信息，确定所述一级布局信息，包括：

基于所述至少一个行边界，得到多个行区域，任一行区域由位置相邻的两个行边界构成；

基于所述多个行区域的区域坐标以及所述多个控件的属性信息中包括的所述多个控件的坐标，将所述多个控件划分到所述多个行区域，得到所述一级布局信息。

可选地，所述布局生成单元53，在确定所述一级布局信息后，对所述一级布局信息对应的多个行区域中的任一行区域，执行以下操作：

确定所述行区域中包括的控件的类别；

基于所述行区域中包括的控件的类别，确定所述行区域的语义信息。

可选地，所述布局生成单元53，基于所述一级布局信息，对所述多个控件进行基于列的布局分析，得到所述二级布局信息，包括：

对所述一级布局信息对应的多个行区域中的任一行区域，执行以下操作：

确定所述行区域中包括的多个目标控件，所述多个目标控件所占区域的面积不小于设定面积，且所述多个目标控件中任两个位置相邻的目标控件之间的纵向间距或横向间距相同；

按照预设规则遍历所述行区域中的其他控件，确定与所述多个目标控件对应的多个子控件；

将所述多个目标控件和所述多个子控件对应合并，得到所述多个目标控件的二级布局信息。

可选地，所述布局生成单元53，按照预设规则遍历所述行区域中的其他控件，确定与所述多个目标控件对应的多个子控件，包括：

针对任一目标控件，以所述目标控件为中心，按照顺时针方向由近到远遍历所述行区域中的其他控件；

针对任两个目标控件，判断所述其他控件中是否存在两个第一控件，其中，相对所述两个目标控件的同一位置而言，所述两个第一控件所占区域的交集和并集之比不小于设定比值；

若存在，则将所述两个第一控件确定为与所述两个目标控件对应的两个子控件。

可选地，所述布局生成单元53，基于所述一级布局信息，对所述多个控件进行基于列的布局分析，得到所述二级布局信息，包括：

对所述一级布局信息对应的多个行区域中的任一行区域，执行以下操作：

获取预先训练得到的识别模型，所述识别模型通过对不同控件和所述不同控件对应的控件响应区进行学习训练得到；

基于所述识别模型对所述行区域中包括的控件进行识别，确定所述行区域中包括的控件响应区；

基于所述控件响应区，得到所述行区域中至少一个控件的二级布局信息。

可选地，所述控件解析单元52，对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，包括：

基于预设的检测模型对所述目标图片进行控件检测，得到所述目标图片中包括的多个控件的控件信息，所述控件信息包括所述多个控件的类别和坐标；

基于预设的分类模型对所述多个控件中类别为图标/图片的第二控件进行分类，得到所述第二控件的语义信息；

对所述目标图片进行OCR识别，得到所述多个控件中其他类别的第三控件的语义信息。

可选地，所述控件解析单元52，在对所述目标图片进行OCR识别后，还得到所述第三控件的坐标和对所述第三控件的识别结果的置信度；

若对所述第三控件的识别结果的置信度不小于设定置信度阈值，则将基于所述检测模型检测到的所述第三控件的坐标替换为基于所述OCR识别到的所述第三控件的坐标。

本说明书实施例提供的页面解析装置50还可执行图1的方法，并实现页面解析装置50在图1所示实施例的功能，本说明书实施例在此不再赘述。

总之，以上所述仅为本说明书的较佳实施例而已，并非用于限定本文件的保护范围。凡在本说明书一个或多个实施例的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本文件的保护范围之内。

上述实施例阐明的***、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于***实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

Claims (16)

1.一种页面解析方法，包括：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

2.如权利要求1所述的方法，

所述多个控件的布局信息包括一级布局信息和二级布局信息，所述一级布局信息表征所述多个控件基于行的布局信息，所述二级布局信息表征所述多个控件基于列的布局信息。

3.如权利要求2所述的方法，基于所述目标图片进行布局生成，确定所述多个控件的布局信息，包括：

基于预设的图像形态学算法对所述目标图片进行行分割，得到所述一级布局信息；

基于所述一级布局信息，对所述多个控件进行基于列的布局分析，得到所述二级布局信息；

将所述二级布局信息添加到所述一级布局信息中，得到所述多个控件的布局信息。

4.如权利要求3所述的方法，采用预设的图像形态学算法对所述目标图片进行行分割，得到所述一级布局信息，包括：

对所述目标图片进行预处理，得到去除纵向噪音后的二值化图片；

基于所述二值化图片，确定至少一个行边界；

基于所述至少一个行边界和所述多个控件的属性信息，确定所述一级布局信息。

5.如权利要求4所述的方法，对所述目标图片进行预处理，得到去除纵向噪音后的二值化图片，包括：

将所述目标图片转换为灰度图片；

对所述灰度图片进行二值化操作，得到二值化图片；

构造形态学结构化元素，所述形态学结构化元素的宽度和所述目标图片的宽度的比值不大于预设比值；

基于所述形态学结构化元素对所述二值化图片进行纵向去噪处理，得到去除纵向噪音后的二值化图片。

6.如权利要求4所述的方法，基于所述二值化图片，确定至少一个行边界，包括：

对所述二值化图片中的像素点按行进行遍历，确定多个候选边界，任一候选边界所在行的有效像素点的数量不小于设定阈值；

针对所述多个候选边界中任两个位置相邻的第一候选边界和第二候选边界，执行以下操作：

确定所述第一候选边界和所述第二候选边界之间的距离是否不小于设定高度阈值；

若是，则将所述第一候选边界和所述第二候选边界确定为两个行边界；

若否，则将所述第一候选边界和所述第二候选边界合并为一个行边界。

7.如权利要求4所述的方法，基于所述至少一个行边界和所述多个控件的属性信息，确定所述一级布局信息，包括：

基于所述至少一个行边界，得到多个行区域，任一行区域由位置相邻的两个行边界构成；

基于所述多个行区域的区域坐标以及所述多个控件的属性信息中包括的所述多个控件的坐标，将所述多个控件划分到所述多个行区域，得到所述一级布局信息。

8.如权利要求3所述的方法，在确定所述一级布局信息后，所述方法还包括：

对所述一级布局信息对应的多个行区域中的任一行区域，执行以下操作：

确定所述行区域中包括的控件的类别；

基于所述行区域中包括的控件的类别，确定所述行区域的语义信息。

9.如权利要求3所述的方法，基于所述一级布局信息，对所述多个控件进行基于列的布局分析，得到所述二级布局信息，包括：

对所述一级布局信息对应的多个行区域中的任一行区域，执行以下操作：

确定所述行区域中包括的多个目标控件，所述多个目标控件所占区域的面积不小于设定面积，且所述多个目标控件中任两个位置相邻的目标控件之间的纵向间距或横向间距相同；

按照预设规则遍历所述行区域中的其他控件，确定与所述多个目标控件对应的多个子控件；

将所述多个目标控件和所述多个子控件对应合并，得到所述多个目标控件的二级布局信息。

10.如权利要求9所述的方法，按照预设规则遍历所述行区域中的其他控件，确定与所述多个目标控件对应的多个子控件，包括：

针对任一目标控件，以所述目标控件为中心，按照顺时针方向由近到远遍历所述行区域中的其他控件；

针对任两个目标控件，判断所述其他控件中是否存在两个第一控件，其中，相对所述两个目标控件的同一位置而言，所述两个第一控件所占区域的交集和并集之比不小于设定比值；

若存在，则将所述两个第一控件确定为与所述两个目标控件对应的两个子控件。

11.如权利要求3所述的方法，基于所述一级布局信息，对所述多个控件进行基于列的布局分析，得到所述二级布局信息，包括：

对所述一级布局信息对应的多个行区域中的任一行区域，执行以下操作：

获取预先训练得到的识别模型，所述识别模型通过对不同控件和所述不同控件对应的控件响应区进行学习训练得到；

基于所述识别模型对所述行区域中包括的控件进行识别，确定所述行区域中包括的控件响应区；

基于所述控件响应区，得到所述行区域中至少一个控件的二级布局信息。

12.如权利要求1所述的方法，对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，包括：

基于预设的检测模型对所述目标图片进行控件检测，得到所述目标图片中包括的多个控件的控件信息，所述控件信息包括所述多个控件的类别和坐标；

基于预设的分类模型对所述多个控件中类别为图标/图片的第二控件进行分类，得到所述第二控件的语义信息；

对所述目标图片进行OCR识别，得到所述多个控件中其他类别的第三控件的语义信息。

13.如权利要求12所述的方法，所述方法还包括：

在对所述目标图片进行OCR识别后，还得到所述第三控件的坐标和对所述第三控件的识别结果的置信度；

若对所述第三控件的识别结果的置信度不小于设定置信度阈值，则将基于所述检测模型检测到的所述第三控件的坐标替换为基于所述OCR识别到的所述第三控件的坐标。

14.一种页面解析装置，包括：

获取单元，获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

控件解析单元，对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

布局生成单元，基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

确定单元，基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

15.一种电子设备，包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，该可执行指令在被执行时使该处理器执行以下操作：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

16.一种计算机可读存储介质，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被包括多个应用程序的电子设备执行时，使得所述电子设备执行以下方法：

获取目标图片，所述目标图片中包括待解析的目标页面中的内容；

对所述目标图片进行控件解析，确定所述目标图片中包括的多个控件的属性信息，所述属性信息包括坐标、类别和语义信息；

基于所述目标图片进行布局生成，确定所述多个控件的布局信息；

基于所述多个控件的属性信息和布局信息，得到对所述目标页面的解析结果。

Images