一种用户界面测试方法及装置与流程

本发明实施例涉及计算机测试技术领域，尤其涉及一种用户界面测试方法及装置。

背景技术：

随着自动化测试技术的普及，对应用程序界面进行测试逐渐由人工测试转为用户界面(User Interface，简称UI)自动化测试。UI自动化测试，即由设备通过测试工具执行预设测试脚本，模拟用户针对被测应用UI的操作，从而对被测应用的功能及性能进行自动化的测试。

当前进行WEB系统UI测试时，经常因为每个人的审美不一致，给予不同的意见。可能测试的某一个人觉得一种搭配好看，但是开发认为是另一种配色好看，但是结果可能产品经理说都不好看。如此一套系统的UI在不断的变化中，或者换了很多种配色，最终还是无法给予大量用户感觉是具有美观的UI，并且浪费了大量的时间。另外在测试时需要对WEB系统的每一个页面进行测试对比，保证系统UI美感的统一性，但是一般WEB系统都是比较庞大的，页面非常多，很容易遗忘掉部分页面，没法保证系统UI都是经过严格测试过的。

技术实现要素：

针对现有技术存在的问题，本发明实施例提供一种用户界面测试方法及装置。

第一方面，本发明实施例提供一种用户界面测试方法，包括：

获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；

对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；

若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

进一步地，所述对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色，包括：

若判断获知所述WEB系统中近似页面集中的待测试页面的数量大于第二阈值，则计算所述近似页面集中的待测试页面对应的RGB均值，将所述RGB均值对应的颜色作为所述主题配色，所述近似页面集为任意两张待测试页面的RGB值之间的第二差异度均小于第三阈值的集合。

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

根据所述WEB系统对应的主题配色的RGB值与历史系统对应的主题配色的RGB值计算第三差异度，若判断获知所述第三差异度大于第四阈值，则将所述第三差异度返回至用户终端。

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

将测试结果生成HTML文档，并将所述HTML文档返回至所述用户终端，所述测试结果包括所述异常页面和所述第三差异度。

进一步地，所述若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面，包括：

将所述待测试页面的RGB值与所述主题配色的RGB值进行平均值计算，获得所述第一差异度；

若判断获知所述第一差异度大于所述第一阈值，则所述待测试页面为所述异常页面。

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

预先构建系统配色数据库，所述系统配色数据库中包括所述历史系统对应的主题配色。

第二方面，本发明实施例提供一种用户界面测试方法装置，包括：

获取模块，用于获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；

提取模块，用于对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；

第一判断模块，用于若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

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

第二判断模块，用于根据所述WEB系统对应的主题配色的RGB值与历史系统对应的主题配色的RGB值计算第二差异度，若判断获知所述第二差异度大于第四阈值，则将所述第二差异度返回至用户终端。

第三方面，本发明实施例提供一种电子设备，包括：处理器、存储器和总线，其中，

所述处理器和所述存储器通过所述总线完成相互间的通信；

所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行第一方面的方法步骤。

第四方面，本发明实施例提供一种非暂态计算机可读存储介质，包括：

所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行第一方面的方法步骤。

本发明实施例提供的一种用户界面测试方法及装置，通过对获取到的所有的待测试页面进行RGB值提取并确定主题配色，若判断获知待测试页面的RGB值与主题配色的RGB值的第一差异度大于第一阈值，则说明该待测试页面为异常页面，提高了对WEB系统的用户界面测试的效率和质量。

附图说明

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

图1为本发明实施例提供的一种用户界面测试方法流程示意图；

图2为本发明实施例提供的一种用户界面测试方法整体流程示意图；

图3为本发明实施例提供的一种用户界面测试装置结构示意图；

图4为本发明实施例提供的一种电子设备实体结构示意图。

具体实施方式

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

图1为本发明实施例提供的一种用户界面测试方法流程示意图，如图1所示，所述方法，包括：

步骤101：获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；

具体的，用户将要进行测试的一个WEB系统的首页地址输入到测试装置中，测试装置获取用户输入的待测试的WEB系统的首页地址，并根据首页地址进行检索，获得该WEB系统的用户界面中所有的待测试页面，将每一个待测试页面都进行截图，此时待测试页面是以图片形式存在的。

步骤102：对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；

具体的，对每一张截图后的待测试页面进行RGB值提取，因此，可以获得到所有待测试页面分别对应的RGB值，根据所有的待测试页面分别对应的RGB值确定该WEB系统的主题配色，这是因为一般软件为保证统一性，大部分配色是一致的。可以理解的是，当所有的待测试页面中，将超过60％的待测试页面的RGB值相接近，那么可以根据这60％的待测试页面对应的RGB值确定WEB系统的主题配色。

步骤103：若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

具体的，分别计算每一待测试页面的RGB值与主题配色的RGB值之间的第一差异度，如果所有的待测试页面中的某一张待测试页面的RGB值与主题配色的RGB值之间的第一差异度大于第一阈值，则说明该待测试页面配色与主题配色相差较大，由于一般软件为了保证统一性，大部分配色都是一致的，因此，将该待测试页面作为异常页面。应当说明的是，第一阈值为预先设定的，且可以根据实际情况进行调整，本发明实施例对此不做具体限定。

本发明实施例通过对获取到的所有的待测试页面进行RGB值提取并确定主题配色，若判断获知待测试页面的RGB值与主题配色的RGB值的第一差异度大于第一阈值，则说明该待测试页面为异常页面，提高了对WEB系统的用户界面测试的效率和质量。

在上述实施例的基础上，所述对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色，包括：

若判断获知所述WEB系统中近似页面集中的待测试页面的数量大于第二阈值，则计算所述近似页面集中的待测试页面对应的RGB均值，将所述RGB均值对应的颜色作为所述主题配色，所述近似页面集为任意两张待测试页面的RGB值之间的第二差异度均小于第三阈值的集合。

具体的，首先从WEB系统的所有待测试页面中获取近似页面集，其中近似页面集中包括多张待测试页面，且近似页面集中的多张待测试页面的RGB值都比较接近，所谓比较接近就是这多张待测试页面中的任意两张的RGB值之间的第二差异度均小于第三阈值。如果近似页面集中的待测试页面的数量大于第二阈值，则计算近似页面集中的多张待测试页面对应的RGB均值，将该RGB均值对应的颜色作为该WEB系统的主题配色。应当说明的是，第二阈值和第三阈值可以根据实际情况进行设定，本发明实施例对此不做具体限定。

本发明实施例通过根据所有的待测试页面的RGB值确定WEB系统的主题配色，然后再根据主题配色来判断待测试页面中与该主题配色差异较大的，实现了能够将WEB系统中所有的待测试页面都进行测试，不会导致页面漏测的情况，从而提高了UI测试的质量。

在上述实施例的基础上，所述方法，还包括：

根据所述WEB系统对应的主题配色的RGB值与历史系统对应的主题配色的RGB值计算第三差异度，若判断获知所述第三差异度大于第四阈值，则将所述第三差异度返回至用户终端。

具体的，除了判断WEB系统内部页面之间的配色是否统一之外，还可以将WEB系统的主题配色的RGB值与历史系统的主题配色的RGB值进行比较，计算二者的第三差异度，因为历史系统是已经经过各研发人员或领导一致认为配色是比较好的，所以可以将历史系统的主题配色作为标准，将WEB系统的主题配色与历史系统的主题配色进行比较，如果第三差异度大于第四阈值，则说明该WEB系统的主题配色与历史系统的主题配色差别较大，将第三差异度返回至用户终端进行提示。

本发明实施例通过将WEB系统的主题配色与历史系统的主题配色进行比较，若两者的主题配色差异较大，则将第三差异度返回至用户终端，不仅对WEB系统内部单个页面进行了测试，还对整个WEB系统的主题配色进行了测试。

在上述实施例的基础上，所述方法，还包括：

将测试结果生成HTML文档，并将所述HTML文档返回至所述用户终端，所述测试结果包括所述异常页面和所述第三差异度。

具体的，在对WEB系统中的所有的待测试页面进行测试完成，已经将WEB系统的主题配色测试完成后，将异常页面和第三差异度生成HTML文档，并将生成的HTML文档返回至用户终端，以使研发人员根据异常页面直观感受差异，确定配色是否存在问题，并根据该HTML文档中的信息进行调整。还可以将HTML文档存入到数据库中进行存储。

本发明实施例通过对获取到的所有的待测试页面进行RGB值提取并确定主题配色，若判断获知待测试页面的RGB值与主题配色的RGB值的第一差异度大于第一阈值，则说明该待测试页面为异常页面，提高了对WEB系统的用户界面测试的效率和质量。

在上述实施例的基础上，所述若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面，包括：

将所述待测试页面的RGB值与所述主题配色的RGB值进行平均值计算，获得所述第一差异度；

若判断获知所述第一差异度大于所述第一阈值，则所述待测试页面为所述异常页面。

具体的，待测试页面是由多个像素点构成，每一个像素点都对应一个RGB值，因此，一张待测试页面的RGB值为一个矩阵，每一个像素点的RGB值有三个数字表示，即R值、G值和B值，同样的，主体配色的RGB值也是有上述三个值构成，可以将R值、G值和B值对应的权重都为1，分别计算每一个像素点的R值、G值和B值与主题配色的R值、G值和B值之间的差值，相加求平均，得到待测试页面中每一个像素点RGB值与主题配色RGB值的差值，将所有的像素点RGB值与主题配色RGB值的差值进行平均值计算，获得第一差异度。如果计算得到的第一差异度大于第一阈值，则说明该待测试页面的配色与主题配色差别较大，此时将该待测试页面作为异常页面。应当说明的是，第二差异度和第三差异度的计算方法与上述类似，此处不再赘述。

本发明实施例通过根据所有的待测试页面的RGB值确定WEB系统的主题配色，然后再根据主题配色来判断待测试页面中与该主题配色差异较大的，实现了能够将WEB系统中所有的待测试页面都进行测试，不会导致页面漏测的情况，从而提高了UI测试的质量。

在上述各实施例的基础上，所述方法，还包括：

预先构建系统配色数据库，所述系统配色数据库中包括所述历史系统对应的主题配色。

具体的，预先构建一个系统配色数据库，该系统配色数据库中存储有历史系统的配色信息，即历史系统的RGB值，其中，历史系统可以为一个也可以为多个，且该历史系统是预先已经经过研发人员一致认可的。

本发明实施例通过对获取到的所有的待测试页面进行RGB值提取并确定主题配色，若判断获知待测试页面的RGB值与主题配色的RGB值的第一差异度大于第一阈值，则说明该待测试页面为异常页面，提高了对WEB系统的用户界面测试的效率和质量。

图2为本发明实施例提供的一种用户界面测试方法整体流程示意图，如图2所示，所述方法，包括：

步骤201：输入WEB系统地址；研发人员通过用户终端向测试装置输入待测试的WEB系统的首页地址；

步骤202：检索WEB系统的每一个页面并截图；测试装置根据接收到的WEB系统的首页地址进行检索，获得该WEB系统对应的所有的待测试页面，并将每一个待测试页面进行截图处理；

步骤203：获取WEB系统的主题配色，并根据主题配色对待测试页面进行测试；根据所有的待测试页面的RGB值获取WEB系统的主题配色，其中主题配色的具体方法与上述实施例中一致，此处不再赘述。计算每一待测试页面的RGB值与主题配色的RGB值的第一差异度，如果第一差异度大于第一阈值，则该待测试页面的测试结果为异常页面。优选的，可以将WEB系统中除了近似页面集以外的待测试页面的RGB值与主题配色的RGB值的第一差异度。

步骤204：将WEB系统的主题配色与历史系统的主题配色进行比较；从系统配色数据库中获取历史系统，根据WEB系统主题配色的RGB值和历史系统主题配色的RGB值计算第三差异度，如果第三差异度大于第四阈值，说明WEB系统的主题配色异常。

步骤205：将检测结果返回至用户终端；将测试结果为异常页面的待测试页面及其对应的第一差异度和WEB系统与历史系统的第三差异度生成HTML文件，将该HTML文件存入系统配色数据库中并返回至用户终端。

本发明实施例通过对获取到的所有的待测试页面进行RGB值提取并确定主题配色，若判断获知待测试页面的RGB值与主题配色的RGB值的第一差异度大于第一阈值，则说明该待测试页面为异常页面，提高了对WEB系统的用户界面测试的效率和质量。

图3为本发明实施例提供的一种用户界面测试装置结构示意图，如图3所示，所述装置，包括：获取模块301、提取模块302和第一判断模块303，其中：

获取模块301用于获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；提取模块302用于对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；第一判断模块303用于若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

具体的，用户将要进行测试的一个WEB系统的首页地址输入到测试装置中，获取模块301获取用户输入的待测试的WEB系统的首页地址，并根据首页地址进行检索，获得该WEB系统的用户界面中所有的待测试页面，将每一个待测试页面都进行截图，此时待测试页面是以图片形式存在的。提取模块302对每一张截图后的待测试页面进行RGB值提取，因此，可以获得到所有待测试页面分别对应的RGB值，根据所有的待测试页面分别对应的RGB值确定该WEB系统的主题配色，这是因为一般软件为保证统一性，大部分配色是一致的。可以理解的是，当所有的待测试页面中，将超过60％的待测试页面的RGB值相接近，那么可以根据这60％的待测试页面对应的RGB值确定WEB系统的主题配色。第一判断模块303分别计算每一待测试页面的RGB值与主题配色的RGB值之间的第一差异度，如果所有的待测试页面中的某一张待测试页面的RGB值与主题配色的RGB值之间的第一差异度大于第一阈值，则说明该待测试页面配色与主题配色相差较大，由于一般软件为了保证统一性，大部分配色都是一致的，因此，将该待测试页面作为异常页面。应当说明的是，第一阈值为预先设定的，且可以根据实际情况进行调整，本发明实施例对此不做具体限定。

本发明提供的装置的实施例具体可以用于执行上述各方法实施例的处理流程，其功能在此不再赘述，可以参照上述方法实施例的详细描述。

本发明实施例通过对获取到的所有的待测试页面进行RGB值提取并确定主题配色，若判断获知待测试页面的RGB值与主题配色的RGB值的第一差异度大于第一阈值，则说明该待测试页面为异常页面，提高了对WEB系统的用户界面测试的效率和质量。

在上述实施例的基础上，所述装置，还包括：

第二判断模块，用于根据所述WEB系统对应的主题配色的RGB值与历史系统对应的主题配色的RGB值计算第二差异度，若判断获知所述第二差异度大于第四阈值，则将所述第二差异度返回至用户终端。

具体的，除了判断WEB系统内部页面之间的配色是否统一之外，还可以通过第二判断模块将WEB系统的主题配色的RGB值与历史系统的主题配色的RGB值进行比较，计算二者的第三差异度，因为历史系统是已经经过各研发人员或领导一致认为配色是比较好的，所以可以将历史系统的主题配色作为标准，将WEB系统的主题配色与历史系统的主题配色进行比较，如果第三差异度大于第四阈值，则说明该WEB系统的主题配色与历史系统的主题配色差别较大，将第三差异度返回至用户终端进行提示。

本发明实施例通过将WEB系统的主题配色与历史系统的主题配色进行比较，若两者的主题配色差异较大，则将第三差异度返回至用户终端，不仅对WEB系统内部单个页面进行了测试，还对整个WEB系统的主题配色进行了测试。

在上述实施例的基础上，所述提取模块，具体用于：

若判断获知所述WEB系统中近似页面集中的待测试页面的数量大于第二阈值，则计算所述近似页面集中的待测试页面对应的RGB均值，将所述RGB均值对应的颜色作为所述主题配色，所述近似页面集为任意两张待测试页面的RGB值之间的第二差异度均小于第三阈值的集合。

在上述实施例的基础上，所述装置，还包括：

生成模块，用于将测试结果生成HTML文档，并将所述HTML文档返回至所述用户终端，所述测试结果包括所述异常页面和所述第三差异度。

在上述实施例的基础上，所述第一判断模块，具体用于：

将所述待测试页面的RGB值与所述主题配色的RGB值进行平均值计算，获得所述第一差异度；

若判断获知所述第一差异度大于所述第一阈值，则所述待测试页面为所述异常页面。

在上述各实施例的基础上，所述装置，还包括：

构建模块，用于预先构建系统配色数据库，所述系统配色数据库中包括所述历史系统对应的主题配色。

图4为本发明实施例提供的一种电子设备实体结构示意图，如图4所示，所述装置，包括：处理器(processor)401、存储器(memory)402和总线403；其中，

所述处理器401和存储器402通过所述总线403完成相互间的通信；

所述处理器401用于调用所述存储器402中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

本实施例公开一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的方法，例如包括：获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

本实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的方法，例如包括：获取待测试的WEB系统的首页地址，根据所述首页地址进行检索，获得所述WEB系统的用户界面中所有的待测试页面；对所有的所述待测试页面进行RGB值提取，根据所有的待测试页面的RGB值确定主题配色；若判断获知所述待测试页面的RGB值与所述主题配色的RGB值的第一差异度大于第一阈值，则所述待测试页面为异常页面。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所描述的装置等实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。