CN110851050B - 页面元素点击测试的方法及装置 - Google Patents

Abstract

本申请公开了一种页面元素点击测试的方法及装置。该申请的方法包括接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，所述颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。本申请解决现有的页面元素点击测试方式中无法根据输入的点击坐标选中用户想要选中的页面元素的问题。

Description

页面元素点击测试的方法及装置

技术领域

本申请涉及页面测试技术领域，具体而言，涉及一种页面元素点击测试的方法及装置。

背景技术

当前Web浏览器中主流的网页，其内容均是由一系列填充了文字、图片、矢量等内容的二维矩形页面元素组合而成的。对于用户执行一次点击之后应该选中哪个页面元素的点击测试(即输入点击坐标，输出所选中的页面元素的过程)，目前点击测试的方法是：输入点击坐标，然后根据点击坐标与矩形页面元素在二维坐标系上的坐标位置计算得到的。但是对于存在透明内容的图片元素，点击其透明区域时也会选中该图片，而无法选中位于透明区域下方的其它页面元素，导致无法根据输入的点击坐标选中用户想要选中的页面元素。

发明内容

本申请的主要目的在于提供一种页面元素点击测试的方法及装置，以解决现有的页面元素点击测试方式中无法根据输入的点击坐标选中用户想要选中的页面元素的问题。

为了实现上述目的，根据本申请的第一方面，提供了一种页面元素点击测试的方法。

根据本申请的页面元素点击测试的方法包括：

接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；

根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，所述颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；

根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。

进一步的，所述方法还包括：

根据页面元素的位置关系以及形状创建所述颜色查询映射表。

进一步的，所述根据页面元素的位置关系以及形状创建所述颜色查询映射表包括：

获取位置互相覆盖的页面元素；

在预设空白图像上分别绘制与每个页面元素的不透明区域形状大小相同的纯色图形，不同的页面元素的不透明区域对应的颜色值是不同的；

将与每个页面元素的不透明区域形状大小相同的所有的纯色图形按照对应的页面元素之间的位置关系进行组合，得到颜色映射图；

将颜色映射图中每个位置的点击坐标与该位置对应的最上层的纯色图形的颜色值进行对应保存，得到颜色查询映射表。

进一步的，所述页面元素为支持画布Canvas与绘图协议WebGL的浏览器页面中的页面元素。

进一步的，所述方法还包括：

获取页面元素对应的浏览器的版本号；

根据所述版本号判断所述浏览器是否为支持Canvas与WebGL的浏览器。

为了实现上述目的，根据本申请的第二方面，提供了一种页面元素点击测试的装置。

根据本申请的页面元素点击测试的装置包括：

接收单元，用于接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；

查询单元，用于根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，所述颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；

确定单元，用于根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。

进一步的，所述装置还包括：

创建单元，用于根据页面元素的位置关系以及形状创建所述颜色查询映射表。

进一步的，所述创建单元包括：

获取模块，用于获取位置互相覆盖的页面元素；

绘制模块，用于在预设空白图像上分别绘制与每个页面元素的不透明区域形状大小相同的纯色图形，不同的页面元素的不透明区域对应的颜色值是不同的；

组合模块，用于将与每个页面元素的不透明区域形状大小相同的所有的纯色图形按照对应的页面元素之间的位置关系进行组合，得到颜色映射图；

确定模块，用于将颜色映射图中每个位置的点击坐标与该位置对应的最上层的纯色图形的颜色值进行对应保存，得到颜色查询映射表。

进一步的，所述页面元素为支持画布Canvas与绘图协议WebGL的浏览器页面中的页面元素。

进一步的，所述装置还包括：

版本号获取单元，获取页面元素对应的浏览器的版本号；

判断单元，用于根据所述版本号判断所述浏览器是否为支持Canvas与WebGL的浏览器。

为了实现上述目的，根据本申请的第三方面，提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述第一方面中任一项所述的页面元素点击测试的方法。

在本申请实施例中，页面元素点击测试的方法及装置中，首先接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；然后根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，该颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；最后根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。可以看出，本实施例中，是根据颜色与坐标之间的对应关系来进行页面元素的点击测试，并且颜色查询映射表是页面元素的不透明区域对应的颜色值与点击坐标之间的关系，没有页面元素透明区域对应的颜色值，因此在点击页面元素的透明区域时，不会输出该页面元素，而是会将该区域对应的页面元素下面的其他元素输出，使用户能够根据点击坐标选中想选中的页面元素。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的一种页面元素点击测试的方法流程图；

图2是根据本申请实施例提供的另一种页面元素点击测试的方法流程图；

图3是根据本申请实施例提供的一种页面元素以及对应的颜色映射图的示意图；

图4是根据本申请实施例提供的一种基于坐标计算的点选方式的原理的示意图；

图5是根据本申请实施例提供的一种页面元素点击测试的装置的组成框图；

图6是根据本申请实施例提供的另一种页面元素点击测试的装置的组成框图。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

根据本申请实施例，提供了一种页面元素点击测试的方法，如图1所示，该方法包括如下的步骤：

S101.接收外部输入的点击坐标。

点击坐标为点击页面元素时点击位置对应的点击坐标；在进行点击测试时可以直接输入点击坐标或者可以通过点击位置获取对应的点击坐标。页面元素是填充了文字、图片、矢量等内容的二维矩形元素，页面元素组成页面内容。

S102.根据点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值。

其中，颜色查询映射表中包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系，一个点击坐标对应唯一的颜色值。需要说明的是，对于不存在透明区域的页面元素，不透明区域为整个页面元素(页面元素对应的二维矩形区域)。存在透明区域的页面元素是指页面元素的实质的图片内容是不规则的形状，没有将对应的二维矩形填充满，对应的二维矩形存在可以看到该页面元素下层的页面元素的区域。不同的页面元素的不透明区域对应的颜色值不是页面元素本身显示的颜色值，而是重新绘制的颜色映射图中对应的颜色值。颜色映射图是根据页面元素的不透明区域分别对应的纯色图形按照对应的页面元素之间的位置关系进行组合得到的。纯色图形的形状大小与不透明区域的形状大小是相同的，纯色图像的颜色即为页面元素的不透明区域对应的颜色值。

颜色映射图是重新绘制得到的图像，为了将点击坐标与颜色映射图中的颜色值进行对应，需要使颜色映射图中的纯色图形的坐标值与原页面元素中不透明元素的坐标值是一致的，点击坐标对应的最上层的纯色图形的颜色值为与点击坐标对应的颜色值。

S103.根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。

根据点击坐标对应的颜色值可以确定该颜色值对应的不透明区域，将不透明区域所属的页面元素确定为与点击坐标对应的页面元素。确定之后将页面元素输出。

从以上的描述中，可以看出，本申请实施例的页面元素点击测试的方法中，首先接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；然后根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，该颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；最后根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。可以看出，本实施例中，是根据颜色与坐标之间的对应关系来进页面元素的点击测试，并且颜色查询映射表是页面元素的不透明区域对应的颜色值与点击坐标之间的关系，没有页面元素透明区域对应的颜色值，因此在点击页面元素的透明区域时，不会输出该页面元素，而是会将该区域对应的页面元素下面的其他元素输出，使用户能够根据点击坐标选中想选中的页面元素。

作为上述实施例的进一步的补充和细化，根据本申请实施例，提供了另一种页面元素点击测试的方法，如图2所示，该方法包括如下的步骤：

S201.根据页面元素的位置关系以及形状创建颜色查询映射表。

需要说明的是，本实施例主要针对的是多个页面元素相互覆盖的情况。具体创建颜色查询映射表的过程包括：

首先，获取位置互相覆盖的页面元素；

其次，在预设空白图像上分别绘制与每个页面元素的不透明区域形状大小相同的纯色图形，不同的页面元素的不透明区域对应的颜色值是不同的；

第三，将与每个页面元素的不透明区域形状大小相同的所有的纯色图形按照对应的页面元素之间的位置关系进行组合，得到颜色映射图；

最后，将颜色映射图中每个位置的点击坐标与该位置对应的最上层的纯色图形的颜色值进行对应保存，得到颜色查询映射表。

图3为三个页面元素以及对应的颜色映射图的示意图，其中左侧图为三个页面元素在页面中显示图，三个矩形框分别表示三个页面元素，三个页面元素从上层到下层依次为页面元素1、页面元素2、页面元素3，右侧图为根据三个页面元素得到的对应的颜色映射图，可以看到颜色映射图中只保留了页面元素的不透明区域。

为了提高颜色映射图的绘制效率，可以提前将页面元素按照语义化的类型进行分类，分为存在透明区域的类型和不存在透明区域的了类型，对于不存在透明区域的类型就可以直接绘制不透明矩形，跳过像素转换不透明区域为特定颜色的过程。

S202.接收外部输入的点击坐标。

本步骤的实现方式与图1中步骤S101的实现方式相同，此处不再赘述。

S203.根据点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值。

本步骤的实现方式与图1中步骤S102的实现方式相同，此处不再赘述。

S204.根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。

本步骤的实现方式与图1中步骤S103的实现方式相同，此处不再赘述。

图1以及图2中的页面元素点击测试的方法只适用于支持画布Canvas与绘图协议WebGL的浏览器页面中的页面元素。因此，在实施该方法之前还需要增加两个步骤：1、获取页面元素对应的浏览器的版本号；根据版本号判断浏览器是否为支持Canvas与WebGL的浏览器。

另外，在实际的应用中，开发完成的页面可能需要应用在不同版本的浏览器中，对于不支持Canvas与WebGL的浏览器，需要使用现有的技术中点击测试的方式进行页面元素的点击测试。为了能够适用于两种不同的点击测试方式，可以将两种点击测试的方式融合在一起，具体的实现方式可以为：首先根据浏览器的版本号，判断浏览器是否为支持Canvas与WebGL的浏览器，如支持，就执行上述图1或图2中的页面元素点击测试的方法；如果不支持，则回退并执行现有的点击测试的方式(基于坐标计算的点选方式)，简要说明现有的点击测试的方式的原理，如图4所示：根据每个元素在二维坐标系中相对于X Y轴的Top、Left偏移量，以及自身的宽高Width、Hight，来判断点击坐标P是否落在页面元素对应的二维矩形中，若落在其中，则输入点击坐标P，对应输出该页面元素。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述图1至图2所述方法的页面元素点击测试的装置，如图5所示，该装置包括：

接收单元51，用于接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；

查询单元52，用于根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，所述颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；

确定单元53，用于根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。

从以上的描述中，可以看出，本申请实施例的页面元素点击测试的装置中，首先接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；然后根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，该颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；最后根据点击坐标对应的颜色值确定与点击坐标对应的页面元素。可以看出，本实施例中，是根据颜色与坐标之间的对应关系来进页面元素的点击测试，并且颜色查询映射表是页面元素的不透明区域对应的颜色值与点击坐标之间的关系，没有页面元素透明区域对应的颜色值，因此在点击页面元素的透明区域时，不会输出该页面元素，而是会将该区域对应的页面元素下面的其他元素输出，使用户能够根据点击坐标选中想选中的页面元素。

进一步的，如图6所示，所述装置还包括：

创建单元54，用于根据页面元素的位置关系以及形状创建所述颜色查询映射表。

进一步的，如图6所示，所述创建单元54包括：

获取模块541，用于获取位置互相覆盖的页面元素；

绘制模块542，用于在预设空白图像上分别绘制与每个页面元素的不透明区域形状大小相同的纯色图形，不同的页面元素的不透明区域对应的颜色值是不同的；

组合模块543，用于将与每个页面元素的不透明区域形状大小相同的所有的纯色图形按照对应的页面元素之间的位置关系进行组合，得到颜色映射图；

确定模块544，用于将颜色映射图中每个位置的点击坐标与该位置对应的最上层的纯色图形的颜色值进行对应保存，得到颜色查询映射表。

进一步的，所述页面元素为支持画布Canvas与绘图协议WebGL的浏览器页面中的页面元素。

进一步的，如图6所示，装置还包括：

版本号获取单元55，获取页面元素对应的浏览器的版本号；

判断单元56，用于根据所述版本号判断所述浏览器是否为支持Canvas与WebGL的浏览器。

具体的，本申请实施例的装置中各单元、模块实现其功能的具体过程可参见方法实施例中的相关描述，此处不再赘述。

根据本申请实施例，还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行图1至图2中任一所述的页面元素点击测试的方法。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (6)

1.一种页面元素点击测试的方法，其特征在于，所述方法包括：

接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；

所述页面元素包括透明区域和不透明区域，存在透明区域的页面元素是指页面元素的实质的图片内容是不规则的形状，没有将对应的二维矩形填充满，对应的二维矩形存在可以看到该页面元素下层的页面元素的区域；

根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，所述颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；

根据点击坐标对应的颜色值确定与点击坐标对应的页面元素；

根据页面元素的位置关系以及形状创建所述颜色查询映射表；

所述根据页面元素的位置关系以及形状创建所述颜色查询映射表包括：

获取位置互相覆盖的页面元素；

在预设空白图像上分别绘制与每个页面元素的不透明区域形状大小相同的纯色图形，不同的页面元素的不透明区域对应的颜色值是不同的；

将与每个页面元素的不透明区域形状大小相同的所有的纯色图形按照对应的页面元素之间的位置关系进行组合，得到颜色映射图；

将颜色映射图中每个位置的点击坐标与该位置对应的最上层的纯色图形的颜色值进行对应保存，得到颜色查询映射表。

2.根据权利要求1的页面元素点击测试的方法，其特征在于，所述页面元素为支持画布Canvas与绘图协议WebGL的浏览器页面中的页面元素。

3.根据权利要求2所述的页面元素点击测试的方法，其特征在于，所述方法还包括：

获取页面元素对应的浏览器的版本号；

根据所述版本号判断所述浏览器是否为支持Canvas与WebGL的浏览器。

4.一种页面元素点击测试的装置，其特征在于，所述装置包括：

接收单元，用于接收外部输入的点击坐标，所述点击坐标为点击页面元素时点击位置对应的点击坐标；

所述页面元素包括透明区域和不透明区域，存在透明区域的页面元素是指页面元素的实质的图片内容是不规则的形状，没有将对应的二维矩形填充满，对应的二维矩形存在可以看到该页面元素下层的页面元素的区域；

查询单元，用于根据所述点击坐标在颜色查询映射表中查询与点击坐标相对应的颜色值，所述颜色查询映射表包含页面元素的不透明区域对应的颜色值与点击坐标之间的对应关系，不同的页面元素的不透明区域对应的颜色值是不同的，点击坐标与颜色值之间为多对一的对应关系；

确定单元，用于根据点击坐标对应的颜色值确定与点击坐标对应的页面元素；

创建单元，用于根据页面元素的位置关系以及形状创建所述颜色查询映射表；所述创建单元包括：

获取模块，用于获取位置互相覆盖的页面元素；

绘制模块，用于在预设空白图像上分别绘制与每个页面元素的不透明区域形状大小相同的纯色图形，不同的页面元素的不透明区域对应的颜色值是不同的；

组合模块，用于将与每个页面元素的不透明区域形状大小相同的所有的纯色图形按照对应的页面元素之间的位置关系进行组合，得到颜色映射图；

确定模块，用于将颜色映射图中每个位置的点击坐标与该位置对应的最上层的纯色图形的颜色值进行对应保存，得到颜色查询映射表。

5.根据权利要求4的页面元素点击测试的装置，其特征在于，所述页面元素为支持画布Canvas与绘图协议WebGL的浏览器页面中的页面元素。

6.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行权利要求1至权利要求3中任一项所述的页面元素点击测试的方法。

Images