具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

可选的，本公开各实施例提供的一种界面测试方法可以应用于电子设备中，该电子设备可以带有显示屏或投影装置以输出图像。可选的，上述电子设备可以为终端设备或服务端设备，上述终端设备可以为：个人计算机(Personal Computer，PC)、手机、平板电脑、可穿戴电子设备等。

在实际应用中，对于某种类型的电子设备，本公开可以仅对其中的一个电子设备进行界面测试。例如：对于手机，本公开可以仅对某品牌的某个型号的一个手机进行界面测试。当然，本公开也可以分别对多种不同型号的电子设备进行界面测试。

图1是根据一示例性实施例示出的一种界面测试方法的流程图，如图1所示，一种界面测试方法用于电子设备中，包括以下步骤。

在步骤S11中，获得待测试界面的截图。

其中，上述待测试界面可以为应用程序的界面，也可以为网页等。可以理解的是，截图是由计算机截取的能显示在屏幕或其他显示设备上的可视图像。通常截图可以由操作系统或专用截图软件截取，也可以由外部设备如数字相机拍摄。本公开可以对待测试界面进行截图操作从而获得待测试界面的截图，本公开也可以直接获得由其他设备进行截图操作后得到的截图。

在一可选实施例中，本公开可以使用chrome内核打开待测试界面，并等待一段时间(如5秒)，以保证待测试界面完全加载，然后再进行截图。

本公开可以通过对电子设备的显示屏的全部显示内容进行截图，即：获得全屏截图。可以理解的是，电子设备的显示屏在显示待测试界面时，还可能同时显示其他内容，如：电池电量、时间等常驻内容。

当全屏截图中存在除待测试界面之外的其他内容时，本公开可以将全屏截图中的除待测试界面之外其他内容删除。

可选的，由于电子设备中显示的常驻内容往往是固定的尺寸和位置，因此本公开可以预先获得常驻内容的尺寸和位置，然后将全屏截图中的该位置以及尺寸的常驻内容删除。

在步骤S12中，获得截图与待测试界面的期望图的像素值差异。

其中，待测试界面的期望图是在界面设计人员完成界面设计后，根据设计的界面得到的图像。

为了能够正确的获得截图与待测试界面的期望图的像素值差异，本公开可以在截图的尺寸与期望图的尺寸不一致时，将截图的尺寸调整为期望图的尺寸，以使截图的尺寸和期望图的尺寸一致，然后再执行步骤S12及后续步骤的处理。

对每一个待测试界面，本公开均可以使用该待测试界面的期望图确定像素值差异。

可选的，步骤S12可以具体包括：

将截图中的各像素的像素值分别与待测试界面的期望图中相同位置的像素的像素值做差，获得截图和期望图中相同位置的像素的像素差；

根据像素差确定截图与期望图的像素值差异。

上述像素的像素值可以为像素的灰度值，也可以为像素的颜色的亮度值(如RGB值)。可选的，本公开可以将截图和期望图转化为灰度图，然后将为灰度图的截图中的各像素的灰度值分别与为灰度图的期望图中相同位置的像素的灰度值做差，获得截图和期望图中相同位置的像素的灰度差。通过上述灰度图的转化，本公开可以使得获得像素差的过程所需要的计算量更小，利于像素差的快速确定。

根据像素差确定截图与期望图的像素值差异的方式可以有多种，如下方四个方式中的一个：

方式一、计算各位置相同的像素的像素差的方差，将该方差确定为截图与期望图的像素值差异。

方式二、计算各位置相同的像素的像素差的标准差，将该标准差确定为截图与期望图的像素值差异。

方式三、计算各位置相同的像素的像素差的绝对值之和，将该绝对值之和确定为截图与期望图的像素值差异。

方式四、计算各位置相同的像素的像素差的绝对值，确定绝对值大于预设阈值的像素的数量，将该数量确定为截图与期望图的像素值差异。

在步骤S13中，根据截图与期望图的像素值差异，确定待测试界面的界面测试结果。

其中，步骤S13可以具体包括：

在像素值差异满足预设差异要求的情况下，确定待测试界面显示正常，在像素值差异不满足预设差异要求的情况下，确定待测试界面显示异常。

预设差异要求可以与像素值差异的确定方式对应，例如：当通过上述方式一确定像素值差异时，预设差异要求可以为像素值差异低于第一数值；当通过上述方式二确定像素值差异时，预设差异要求可以为像素值差异低于第二数值；当通过上述方式三确定像素值差异时，预设差异要求可以为像素值差异低于第三数值；当通过上述方式四确定像素值差异时，预设差异要求可以为像素值差异低于第四数值。当然，上述预设差异要求仅为示例性，在实际应用中，预设差异要求可以有更多种，如当通过上述方式四确定像素值差异时，预设差异要求可以为像素值差异与截图包含的像素数量的比值低于第五数值。

无论上述哪种预设差异要求，在像素值差异满足预设差异要求的情况下，可以说明截图与期望图的像素值差异较小，因此可以确定待测试界面显示正常；否则，可以确定待测试界面显示异常。

本公开实施例提供的界面测试方法，可以通过截图与期望图的像素值差异来确定界面是否显示正常，无需编写代码。同时，本公开实施例提供的界面测试方法可以适用于所有页面结构，因此无需分别为不同的页面结构重新编写代码，本公开可以使得UI测试的效率较高。

图2是根据另一示例性实施例示出的一种界面测试方法的流程图，如图2所示，一种界面测试方法，包括以下步骤。

在步骤S21中，获得待测试界面的截图。

步骤S21与图1所示步骤S11类似，不再赘述。

在步骤S22中，获得截图与待测试界面的期望图的像素值差异。

步骤S22与图1所示步骤S12类似，不再赘述。

在步骤S23中，根据截图与期望图的像素值差异，确定待测试界面的界面测试结果。

步骤S23与图1所示步骤S13类似，不再赘述。

在步骤S24中，在像素值差异不满足预设差异要求的情况下，将截图和期望图中的一个图片的透明度设置为预设值。

可选的，预设值大于0且小于1。

可选的，图片的透明度的取值范围可以为[0，1]，当图片的透明度为0时，代表图片完全不透明，当图片的透明度为1时，代表图片完全透明，透明度的取值越大，则图片的透明程度越大。

可选的，上述预设值可以为0.5。

在步骤S25中，将透明度为预设值的图片覆盖在截图和期望图中的另一个图片的上方，获得重叠图片。

其中，本公开可以在截图的尺寸和期望图的尺寸不一致时，将截图的尺寸调整为期望图的尺寸，以使截图的尺寸和期望图的尺寸一致，然后再执行步骤S25及后续步骤的处理。

在实际应用中，步骤S25可以在将透明度为预设值的图片覆盖在截图和期望图中的另一个图片的上方后，可以将两个图片合并为一个图片，即重叠图片为一个图片。当然，也可以通过设置两个图层等方式来保留和同时显示两个图片(而不是将其合并为一个图片)，此时重叠图片为两个图片。

在步骤S26中，显示重叠图片。

由于将其中一个图片的透明度设置为预设值，因此这个图片具有了一定的透明度，在将其覆盖在另一个图片上后，即可通过重叠图片观察到两个图片的区别。

下面通过示意图对步骤S24至步骤S26进行说明：

待测试界面为显示有蜡烛和文字“烛光闪闪”的界面，图3为待测试界面的截图，图4为待测试界面的期望图，将图4所示期望图的透明度设置为0.5，并将透明度为0.5的期望图覆盖在图3所示截图上方，获得图5所示的重叠图片。通过图5所示的重叠图片，即可观察到截图和期望图的区别，从而确定待测试界面与期望图不一致的地方，进而对不一致的地方进行修改。当然，通过图5所示的重叠图片，还可以确定调整方式，如：将图3所示的截图对应的待测试界面中的蜡烛向右平行移动至图4所示的期望图中的蜡烛处。

在实际应用中，本公开还可以将截图的透明度设置为预设值，将透明度为预设值的截图覆盖在期望图的上方，获得重叠图片。

在实际应用中，本公开还可以同时将截图的透明度和期望图的透明度设置为预设值，然后将其中一个图片覆盖在另一个图片的上方，获得重叠图片。

图6是根据另一示例性实施例示出的一种界面测试方法的流程图，如图6所示，一种界面测试方法，包括以下步骤。

在步骤S31中，获得待测试界面的截图。

步骤S31与图1所示步骤S11类似，不再赘述。

在步骤S32中，将截图中的各像素的像素值分别与待测试界面的期望图中相同位置的像素的像素值做差，获得截图和期望图中相同位置的像素的像素差。

在步骤S33中，根据像素差确定截图与期望图的像素值差异。

步骤S32和步骤S33为图1所示方法中步骤S12的一种具体实施过程。步骤S32和步骤S33的处理过程已在图1所示实施例说明，不再赘述。

在步骤S34中，根据截图与期望图的像素值差异，确定待测试界面的界面测试结果。

步骤S34与图1所示步骤S13类似，不再赘述。

在步骤S35中，在像素值差异不满足预设差异要求的情况下，根据截图和期望图中相同位置的像素的像素差生成差异图像。

可选的，本公开可以对截图和期望图进行Diff操作，并获得Diff图片，该diff图片即为差异图像。本公开一可选实施例中可以使用第三方包pixelMatch的pixelMatch方法来进行Diff操作。pixelMatch方法可以把截图和期望图分别转成二进制的数组，然后比较二进制数组中每一个值是否一致，一致则证明截图和期望图一样；不一样则计算差值(即diff值)。

在本公开另一可选实施例中，Diff操作可以通过OpenCV的cvAbsDiff函数来实现，cvAbsDiff函数是OpenCV中计算两个数组差的绝对值的函数。具体的，本公开可以利用下方函数来获得像素差：

void cvAbsDiff(const CvArr*src1,const CvArr*src2,CvArr*dst)。

上述函数中，src1为第一原数组，src2为第二原数组，dst为输出数组(即第一原数组与第二原数组的数组差的绝对值)。

在本公开中，上述第一原数组可以为截图中各像素的像素值构成的数组；上述第二原数组可以为期望图中各像素的像素值构成的数组；上述输出数组即为截图与期望图中各像素的像素差的绝对值构成的数组。

在获得截图与期望图中各像素的像素差的绝对值构成的数组后，本公开就可以根据该数组生成差异图像。

下面通过示意图对步骤S35进行说明：

待测试界面为显示有蜡烛和文字“烛光闪闪”的界面，图3为待测试界面的截图，图4为待测试界面的期望图。设图3和图4均为灰度图。获得图3所示的截图中各像素的像素值构成的第一原数组；获得图4所示的期望图中各像素的像素值构成的第二原数组；将第一原数组与第二原数组做差，获得截图与期望图中各像素的像素差的绝对值构成的数组，根据该数组可以生成差异图像。

通过对比图3和图4可知，当相同位置的两个像素的像素值一样时，该两个像素的像素值做差后得到的差值为0，因此在一可选实施例中，可以根据该差值绘制差异图像中的该位置的像素的像素值为0(即纯黑色)。这样，由于图3和图4中的蜡烛的位置不同，因此蜡烛位置处的像素的像素值做差后将不为0，如当图3和图4中的蜡烛位置处的黑色线条的像素值为0时(即纯黑色)，若图3和图4中的白色区域的像素值为255(即纯白色)，则图3中蜡烛的黑色线条的各像素的像素值与图4中相应位置的像素的像素值的差的绝对值为255，可以根据该差值绘制的差异图像中的该位置的像素的像素值为255(即纯白色)。这样，图3和图4中像素值不存在差异的地方为纯黑色，存在差异的地方则不为纯黑色，差异越大，则越趋向于白色。

可以理解的是，在另一个可选实施例中，本公开也可以对像素差进行反相处理，即：让255分别减去每一个位置的像素的像素差的绝对值，获得的结果作为用于生成差异图像的数组。例如：当某位置的像素的像素差的绝对值为0时(不存在差异)，让255减去0，获得255，则可以将生成的差异图像中该位置的像素的像素值为255(即纯白色)。当第一图像和第二图像中某位置的像素的像素值不存在差异时，通过反相处理获得的差异图像中该位置的像素的颜色将为纯白色。而当第一图像和第二图像中某位置的像素的像素值存在差异时，通过反相处理获得的差异图像中该位置的像素的颜色将不为纯白色，差异越大，则越趋向于黑色。对于图3和图4所示的两个图片，本公开通过反相处理，可以获得如图7所示的差异图像。

图8是根据另一示例性实施例示出的一种界面测试方法的流程图，如图8所示，一种界面测试方法，包括以下步骤。

在步骤S41中，获得待测试界面的截图。

步骤S41与图1所示步骤S11类似，不再赘述。

在步骤S42中，获得截图与待测试界面的期望图的像素值差异。

步骤S42与图1所示步骤S12类似，不再赘述。

在步骤S43中，根据截图与期望图的像素值差异，确定待测试界面的界面测试结果。

步骤S43与图1所示步骤S13类似，不再赘述。

在步骤S44中，在像素值差异不满足预设差异要求的情况下，检测截图与期望图的差异区域。

可选的，本公开可以通过OpenCV的detect方法检测出截图与期望图的差异区域。其中，OpenCV的detect方法是一种可以对图像进行检测的方法。在一可选实施例中，本公开还可以对差异区域进行标记。具体的标记方法可以有多种，如通过线条围绕差异区域边缘，或，通过阴影线填充差异区域等。对于图3所示的截图和图4所示的期望图，本公开可以获得如图9所示的包含差异区域的图像。图9中，本公开可以通过虚线围绕差异区域边缘，从而标识出差异区域。

在步骤S45中，当存在两个形状相同的差异区域时，根据差异区域确定需要调整的目标显示内容。

在步骤S46中，将待测试界面中的目标显示内容的位置调整为期望图中的目标显示内容的位置。

本公开可以检测差异区域的形状，存在两个形状相同的差异区域时，说明具有该差异区域的形状的一个显示内容在截图和期望图中的位置是不同的。由于期望图是正确的图形，因此可知待测试界面的差异区域内的显示内容的位置出现了偏差，本公开可以将待测试界面的差异区域内的显示内容确定为需要调整的目标显示内容。本公开可以参照期望图中该显示内容所在位置对目标显示内容进行移动。

可选的，本公开可以确定上述两个差异区域之间的距离(如图9所示的距离D1)，然后将待测试界面中的目标显示内容的位置调整为期望图中的目标显示内容的位置。

可选的，两个形状相同的差异区域包括：第一差异区域和第二差异区域，步骤S45可以具体包括：

在第一差异区域为待测试界面中第一显示内容所在区域且第二差异区域为期望图中第一显示内容所在区域的情况下，将第一显示内容确定为需要调整的目标显示内容。

可选的，步骤S46可以具体包括：

将目标显示内容朝第二差异区域所在方向移动第一距离，第一距离为第一差异区域和第二差异区域之间的距离。

下面结合附图举例说明：如图9所示，第一差异区域001和第二差异区域002的形状相同，且第一差异区域001为图3所示的截图中蜡烛所在区域，第二差异区域002为图4所示的期望图中蜡烛所在区域。第一差异区域001与第二差异区域002之间的距离为D1，则本公开可以确定对图3所示的截图对应的待测试界面进行调整的调整方式为：将图3所示的截图对应的待测试界面中的蜡烛朝第二差异区域002所在方向移动D1。这样，图3所示的截图对应的待测试界面就可以和图4所示的期望图对应的待测试界面的期望图不存在差异，从而保证图3所示的待测试界面显示正常。

当然，在实际应用中，本公开也可以通过调整目标显示内容的坐标的方式将待测试界面中的目标显示内容的位置调整为期望图中的目标显示内容的位置。例如：期望图中的目标显示内容(如图4所示的蜡烛)的坐标为(X₁，Y₁)，则将待测试界面中的目标显示内容(如图3所示的蜡烛)的位置调整为(X₁，Y₁)即可。

在实际应用中，本公开可以依次对多个待测试界面进行测试，例如：依次打开各待测试界面然后截图，并分别与相应的期望图进行对比以确定各截图分别与相应的期望图的像素值差异，进而确定各待测试界面是否显示正常。

在一可选的实施例中，本公开可以首先对整体页面进行测试，然后再触发整体页面的变化并对变化后的整体页面进行测试。上述整体页面可以为应用程序的主界面或网站的首页等。应用程序的主界面是应用程序打开后首先显示的界面，一般具有用于触发其他界面显示的虚拟按键或菜单等。网站的首页是网站的入口网页，可以用于引导用户观看网站中各网页的内容。

图10是根据另一示例性实施例示出的一种界面测试方法的流程图，该方法中，各待测试界面的期望图按照预设的测试顺序依次排列，如图10所示，一种界面测试方法，包括以下步骤。

在步骤S50中，按照预设的测试顺序，依次打开各待测试界面；

步骤S50打开各测试的界面所依据的顺序与各待测试界面的期望图的排列顺序一致，这样，本公开就可以根据待测试界面的打开顺序，选择顺序一致的期望图并进行对比。

S51、从各待测试界面的期望图中，选择排序与当前打开的待测试界面的测试顺序一致的期望图，将选择的期望图确定为当前打开的待测试界面的期望图。

在步骤S52中，获得待测试界面的截图。

步骤S52与图1所示步骤S11类似，不再赘述。可以理解的是，步骤S50每打开一个待测试界面，步骤S52均可以对其进行截图。可选的，步骤S52可以等待界面完全加载后再进行截图。

在步骤S53中，获得截图与待测试界面的期望图的像素值差异。

在步骤S54中，根据截图与期望图的像素值差异，确定待测试界面的界面测试结果。

步骤S53与图1所示步骤S12类似，不再赘述。

步骤S54与图1所示步骤S13类似，不再赘述。

通过图10所示实施例，本公开可以自动实现对多个待测试界面的测试，无需人为干预，十分快捷。

图11是根据一示例性实施例示出的一种界面测试装置框图。参照图11，该装置包括截图获得单元121，差异获得单元122和结果确定单元123。

该截图获得单元121，被配置为执行获得待测试界面的截图；

该差异获得单元122，被配置为执行获得截图与待测试界面的期望图的像素值差异；

该结果确定单元123，被配置为执行根据截图与期望图的像素值差异，确定待测试界面的界面测试结果。

可选的，结果确定单元123，可以被具体配置为执行：在像素值差异满足预设差异要求的情况下，确定待测试界面显示正常，在像素值差异不满足预设差异要求的情况下，确定待测试界面显示异常。

可选的，图11所示装置，还可以包括：

图片设置单元，被配置为执行在像素值差异不满足预设差异要求的情况下，将截图和期望图中的一个图片的透明度设置为预设值；

图片覆盖单元，被配置为执行将透明度为预设值的图片覆盖在截图和期望图中的另一个图片的上方，获得重叠图片；

图片显示单元，被配置为执行显示重叠图片。

可选的，图11所示装置，还可以包括：

图像生成单元，被配置为执行在像素值差异不满足预设差异要求的情况下，根据截图和期望图中相同位置的像素的像素差生成差异图像。

可选的，差异获得单元122，可以具体包括：

像素差获得子单元，被配置为执行将截图中的各像素的像素值分别与待测试界面的期望图中相同位置的像素的像素值做差，获得截图和期望图中相同位置的像素的像素差；

差异获得子单元，被配置为执行根据像素差确定截图与期望图的像素值差异。

可选的，图11所示装置，还可以包括：

区域监测单元，被配置为执行在像素值差异不满足预设差异要求的情况下，检测截图与期望图的差异区域；

内容确定单元，被配置为执行当存在两个形状相同的差异区域时，根据差异区域确定需要调整的目标显示内容；

内容调整单元，被配置为执行将待测试界面中的目标显示内容的位置调整为期望图中的目标显示内容的位置。

可选的，各待测试界面的期望图按照预设的测试顺序依次排列，图11所示装置，还可以包括：

界面打开单元，被配置为执行按照预设的测试顺序，依次打开各待测试界面；

图片打开单元，被配置为执行从各待测试界面的期望图中，选择排序与当前打开的待测试界面的测试顺序一致的期望图，将选择的期望图确定为当前打开的待测试界面的期望图。

本公开实施例提供的界面测试装置，可以通过截图与期望图的像素值差异来确定界面是否显示正常，无需编写代码。同时，本公开实施例提供的界面测试方法可以适用于所有页面结构，因此无需分别为不同的页面结构重新编写代码，本公开可以使得UI测试的效率较高。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图12是根据一示例性实施例示出的电子设备800的框图。参照图12，该电子设备，可以包括：

处理器801；

用于存储处理器801可执行指令的存储器802；

其中，处理器801被配置为执行指令，以实现本公开实施例提供的任一种界面测试方法。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器802，当计算机可读存储介质中的指令可由电子设备800的处理器801执行时，使得电子设备能够执行本公开实施例提供的任一种界面测试方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供一种计算机程序产品，包括计算机程序/指令，计算机程序/指令被处理器执行时实现本公开实施例提供的任一种界面测试方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。