CN108984399A - 检测界面差异的方法、电子设备和计算机可读介质 - Google Patents

检测界面差异的方法、电子设备和计算机可读介质 Download PDF

Info

Publication number
CN108984399A
CN108984399A CN201810699643.8A CN201810699643A CN108984399A CN 108984399 A CN108984399 A CN 108984399A CN 201810699643 A CN201810699643 A CN 201810699643A CN 108984399 A CN108984399 A CN 108984399A
Authority
CN
China
Prior art keywords
interface
screenshot
interfacial effect
mutually matched
effect
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810699643.8A
Other languages
English (en)
Inventor
徐学东
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Lianshang Network Technology Co Ltd
Original Assignee
Shanghai Lianshang Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Lianshang Network Technology Co Ltd filed Critical Shanghai Lianshang Network Technology Co Ltd
Priority to CN201810699643.8A priority Critical patent/CN108984399A/zh
Publication of CN108984399A publication Critical patent/CN108984399A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00Error detection; Error correction; Monitoring
    • G06F11/36Preventing errors by testing or debugging software
    • G06F11/3668Software testing
    • G06F11/3672Test management
    • G06F11/3688Test management for test execution, e.g. scheduling of test suites
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00Pattern recognition
    • G06F18/20Analysing
    • G06F18/22Matching criteria, e.g. proximity measures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Bioinformatics & Cheminformatics (AREA)
  • Evolutionary Biology (AREA)
  • Evolutionary Computation (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Bioinformatics & Computational Biology (AREA)
  • Artificial Intelligence (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例公开了检测界面差异的方法、电子设备和计算机可读介质。该方法的一具体实施方式包括:确定相互匹配的界面截图和界面效果图,其中,界面截图与界面效果图之间相互匹配是指:界面效果图是界面截图所截取的界面的设计效果图;对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致;响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息,其中,该差异信息包括差异位置信息和差异程度信息。该实施方式可以提供了一种由电子设备实现的检测界面差异的方法,可以避免人工检测,节省人力成本。

Description

检测界面差异的方法、电子设备和计算机可读介质
技术领域
本申请实施例涉及计算机技术领域,尤其涉及检测界面差异的方法、电子设备和计算机可读介质。
背景技术
在网站建立或者应用开发过程中,工作人员可以先设计用户界面(UserInterface,UI)的效果图,得到界面效果图。然后,再实现界面效果图,即根据界面效果图,进行界面开发,得到用户界面。但是,终端显示的用户界面,可能由于各种原因,与设计效果图有出入。
为保证界面效果图高还原度落地,即保证用户界面与界面效果图更高程度的相似,在界面开发过程中需要调整用户界面,这个过程一般称为调整用户界面(也可以称为调UI)。检测界面差异是调UI的前提。在生成差异信息的基础上,才好根据差异信息调整用户界面。
现有技术中,检测界面差异一般由人工实现。
发明内容
本申请实施例提出了检测界面差异的方法、检测界面差异的装置、电子设备和计算机可读介质。
第一方面,本申请的一些实施例提供了一种检测界面差异的方法,该方法包括:确定相互匹配的界面截图和界面效果图,其中,界面截图与界面效果图之间相互匹配是指:界面效果图是界面截图所截取的界面的设计效果图;对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致;响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息,其中,上述差异信息包括差异位置信息和差异程度信息。
第二方面,本申请的一些实施例提供了一种检测界面差异的装置,该装置包括:确定单元,被配置成确定相互匹配的界面截图和界面效果图,其中,界面截图与界面效果图之间相互匹配是指:界面效果图是界面截图所截取的界面的设计效果图;对比单元,被配置成对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致;生成单元,被配置成响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息,其中,上述差异信息包括差异位置信息和差异程度信息。
第三方面,本申请的一些实施例提供了一种电子设备,该电子设备包括:一个或多个处理器;存储装置,其上存储有一个或多个程序,当上述一个或多个程序被上述一个或多个处理器执行时,使得上述一个或多个处理器实现如第一方面中任一实现方式描述的方法。
第四方面,本申请的一些实施例提供了一种计算机可读介质,其上存储有计算机程序,其中,该计算机程序被处理器执行时实现如第一方面中任一实现方式描述的方法。
本申请的一些实施例提供的检测界面差异的方法、电子设备和计算机可读介质,通过由执行主体确定相互匹配的界面截图和界面效果图,然后对比相互匹配的界面截图和界面效果图,确定是否一致,如果不一致则生成差异信息,由此,检测界面差异的方法可以由电子设备实现,避免人工检测,技术效果至少可以包括:节省人力成本。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本申请的其它特征、目的和优点将会变得更明显:
图1是本申请的一些实施例可以应用于其中的示例性***架构图;
图2是根据本申请的检测界面差异的方法的一个实施例的流程图;
图3A是根据本申请的示例性差异对照图;
图3B是根据本申请的显示差异对照图的示意图;
图4是根据本申请的检测界面差异的方法的一个应用场景的示意图;
图5是本申请步骤201的可选的实现方式的流程图;
图6是图5所示流程中涉及到的一些概念示例性的关系示意图;
图7是根据本申请的检测界面差异的方法的又一个实施例的流程图;
图8是适于用来实现本申请实施例的电子设备的计算机***的结构示意图。
具体实施方式
下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释相关发明,而非对该发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与有关发明相关的部分。
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
图1示出了可以应用本申请的检测界面差异的方法或检测界面差异的装置的实施例的示例性***架构100。
如图1所示,***架构100可以包括电子设备101、网络102和终端设备103。网络102可以是用以在电子设备101和终端设备103之间提供通信链路的介质。网络102可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
电子设备101可以与终端设备103交互,以接收或发送信息等。电子设备101可以是终端,也可以是服务器。
终端设备103上可以安装有各种通讯客户端应用,例如即时通信工具、网页浏览器应用、购物类应用、搜索类应用、邮箱客户端、社交平台软件等。
终端设备103可以是硬件,也可以是软件。当终端设备103为硬件时,可以是具有显示屏的各种电子设备,包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。当终端设备103为软件时,可以安装在上述所列举的电子设备中。其可以实现成多个软件或软件模块(例如用来提供分布式服务),也可以实现成单个软件或软件模块。在此不做具体限定。
电子设备101可以是终端,作为电子设备101的终端可以是硬件,也可以是软件。当作为电子设备101的终端为硬件时,可以是具有显示屏的各种电子设备,包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture Experts Group Audio LayerIII,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group AudioLayer IV,动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。当作为电子设备101的终端为软件时,可以安装在上述所列举的电子设备中。其可以实现成多个软件或软件模块(例如用来提供分布式服务),也可以实现成单个软件或软件模块。在此不做具体限定。
电子设备101可以是提供各种服务的服务器,例如对终端设备103上安装的应用提供支持的后台服务器。后台服务器可以获取终端设备上的显示的界面的界面截图,然后分析界面截图与界面效果图的差异。然后,后台服务器可以参考差异,调整用户界面。
需要说明的是,当电子设备101为服务器时,服务器可以是硬件,也可以是软件。当服务器为硬件时,可以实现成多个服务器组成的分布式服务器集群,也可以实现成单个服务器。当服务器为软件时,可以实现成多个软件或软件模块(例如用来提供分布式服务),也可以实现成单个软件或软件模块。在此不做具体限定。
需要说明的是,本申请实施例所提供的检测界面差异的方法一般由电子设备101执行,相应地,检测界面差异的装置一般设置于电子设备101中。
应该理解,图1中的终端设备、网络和电子设备的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
需要说明的是,图1所示***框架也可以不包括终端设备103。可选的,电子设备101和终端设备103也可以是同一电子设备。
请参考图2,其示出了检测界面差异的方法的一个实施例的流程200。本实施例主要以该方法应用于有一定运算能力的电子设备中来举例说明,该电子设备可以是图1示出的电子设备101。该检测界面差异的方法,包括以下步骤:
步骤201,确定相互匹配的界面截图和界面效果图。
在本实施例中,检测界面差异的方法的执行主体(例如图1所示的电子设备)可以确定相互匹配的界面截图和界面效果图。
在本实施例中,界面也可以称为用户界面。在这里,用户界面可以包括但不限于网页界面和应用界面。应用界面可以包括但不限于网页应用、原生应用和混合应用。
在本实施例中,界面截图可以是用户界面的截图。可选的,当界面完全显示在屏幕上并且当屏幕只显示该界面时,对屏幕显示的该界面进行截图,可以得到该界面的界面截图。
在本实施例中,界面截图与界面效果图之间相互匹配,可以是指:上述界面效果图是上述界面截图所截取的界面的设计效果图。换句话说,上述界面截图所截取的界面,是上述界面效果图的实际应用(或者说落地)时的用户界面。
需要说明的是,在本申请中,确定相互匹配的界面截图和界面效果图,不限定确定界面截图和界面效果的先后顺序。可以先获取界面截图,再根据界面截图确定界面效果图;也可以先获取界面效果图,再根据界面效果图获取界面截图;还可以获取界面截图和获取界面效果图平行进行,先后顺序不限定。
在一些实现方式中,上述执行主体可以获取界面截图。然后,上述执行主体可以确定所获取的界面截图与预先建立的界面效果图集合中的界面效果图之间的第一相似度。最后,上述执行主体可以根据所确定的第一相似度,从上述界面效果图集合中,确定与所获取的界面截图匹配的界面效果图。
可选的,上述执行主体,可以从预先建立的界面截图集合中,获取界面截图;还可以实时从终端获取界面的截图。
在这里,可以选取最大的第一相似度对应的界面效果图,作为与界面截图匹配的界面效果图。
在一些实现方式中,上述执行主体可以获取界面效果图。然后,上述执行主体可以确定所获取的界面效果图和预先建立的界面截图集合中的界面截图之间的第二相似度。最后,上述执行主体可以根据所确定的第二相似度,从上述界面截图集合中,选取与所获取的界面效果图匹配的界面截图。
在这里,上述执行主体所获取的界面效果图,可以是上述执行主体预先存储的界面效果图。通常,检测界面差异的时候,可以从预先存储的多个界面效果图中,逐个获取界面效果图,针对各个界面效果图检测界面差异。
在这里,可以选取最大的第二相似度对应的界面截图,作为与界面所获取的界面效果图匹配的界面截图。
在这里,界面效果图和界面截图之间的相似度的计算,即第一相似度的计算和第二相似度的计算,可以参考计算图像之间相似度的图像相似度算法,例如,感知哈希算法、峰值信噪比算法等,在此不再赘述。
需要说明的是,(以界面效果图A为例)以界面效果图A为基础,制作生成的界面A的界面截图A,通常与界面效果图A的相似度较高。如果界面B不是以界面效果图A为基础制作生成的,那么界面B与界面效果图A的相似度通常较低。在这一发现的基础上,通过计算图像相似度,确定相互匹配的界面截图和界面效果图,可以实现电子设备自动匹配界面截图和界面效果图。
在网站建立或者应用开发过程中,工作人员可以先设计用户界面的效果图,得到界面效果图。然后,再实现界面效果图,即根据界面效果图,进行界面开发,得到用户界面。但是,终端显示的用户界面,可能由于各种原因,与设计效果图有出入。
作为示例,用户界面与设计效果的差异,可能体现在多个方面,差异类型包括但不限于:颜色、字体、界面结构、控件尺寸等。
导致用户界面与设计效果图有差异的原因,可以包括但不限于:各种终端的显示器件的不同,导致界面显示效果与界面效果图不同;界面开发人员对界面效果图的实现过程,难免出现错漏,导致界面显示效果与设计效果图不同。
现有技术中,检测界面差异一般由人工实现。人工检测界面差异,存在着调整效率低,调整准确度低的问题。
现有技术中,之所以利用人工检测界面差异,不能实现电子设备自动检测界面差异,主要有以下技术难题:
第一,不能自动匹配界面截图和界面效果图。需要人工匹配。
第二,差异信息不能自动生成,需要人工逐块对照。
步骤202,对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致。
在本实施例中,上述执行主体(例如图1所示的电子设备)可以对比上述步骤201所确定的相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致。
在本实施例中,对比界面截图和界面效果图,可以利用各种方式实现。
在一些实现方式中,上述步骤202可以通过以下方式实现:可以通过逐个对比上述界面截图和上述界面效果图对应位置的像素,确定像素值是否相同,根据像素值不同的像素数量,确定相互匹配的界面截图和界面效果图是否一致。
在一些实现方式中,上述步骤202可以通过以下方式实现:对于相互匹配的界面截图和界面效果图,分别进行二值化处理,生成二值化截图和二值化效果图;对于上述二值化截图中的和上述二值化效果图中的对应位置的像素,确定像素值是否相同;如果上述对应位置的像素值不同,根据像素值不同的像素数量,确定相互匹配的界面截图和界面效果图是否一致。
在这里,图像的二值化,可以是将图像上的像素点的灰度值设置为0或255,即整个图像呈现出明显的只有黑和白的视觉效果。二值化可以包括但不限于全局二值化、局部二值化或局部自适应二值化。
可选地,可以利用局部自适应二值化,分别对界面截图和界面效果图进行处理。
在一些实现方式中,对比界面截图和界面效果图,不仅可以通过直接对比界面截图和界面效果图实现,还可以间接对比的方式实现。作为示例,间接对比的方式可以如下:将界面效果图的特征信息抽取出来,确定界面截图是否具有界面效果图的特征信息,以对比界面截图和界面效果图。例如,特征信息有5项,界面截图具有其中4项特征信息,不具有其中1项特征信息;不具有的特征信息项,可以确定为差异信息。
在本实施例中,确定相互匹配的界面截图和界面效果图是否一致,可以通过各种方式实现。
作为示例,如果上述界面截图和上述界面效果图每个对应位置的像素值均相同,则确定相互匹配的界面截图和界面效果图一致。
作为示例,如果像素值有差异的对应位置所占比例小于预设阈值,则确定相互匹配的界面截图和界面效果图一致。
步骤203,响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息。
在本实施例中,上述执行主体(例如图1所示的电子设备)可以响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息。
在本实施例中,差异信息可以包括差异位置信息和与差异位置对应的差异程度信息。
在本实施例中,上述差异信息用于指示上述界面截图和上述界面效果图之间的差异。
在本实施例中,差异信息可以以各种形式表示。作为示例,差异程度信息可以用界面截图与界面效果图的像素值之差表示。
在一些实施例中,如果通过逐个对比上述界面截图和上述界面效果图对应位置的像素,对比上述界面截图和上述界面效果图,那么,对于对应位置的像素值不同的像素,将该位置的位置信息作为差异位置信息,将两个对应位置的像素值之差作为差异程度信息。组合差异位置和差异程度信息生成差异信息。
在一些实施例中,如果通过二值化处理,对于上述二值化截图中的和上述二值化效果图中的对应位置的像素,确定像素值是否相同来对比相互匹配的界面截图和界面效果图,则可以根据上述对应位置的像素值不同的像素,生成差异信息。
在一些实现方式中,本申请所示方法还可以包括根据上述差异信息,在上述界面截图的基础上标注上述差异以生成差异对照图;呈现上述差异对照图。
在这里,上述差异对照图在上述界面截图上标注上述差异而生成。作为示例,可以参考图3A,其示出了差异对照图。阴影部分标示差异。
在一些实现方式中,本实施例所示方法还可以包括:呈现差异对照图。作为示例,请参考图3B,其示出了在执行主体的屏幕301上呈现差异对照图302。可选的,还可以在执行主体的屏幕上,显示界面效果图303,作为对照,以进一步显示出用户界面和界面效果图的差异。
继续参见图4,图4是根据本实施例的检测界面差异的方法的应用场景的一个示意图。在图4的应用场景中:
首先,可以预先设置第一终端401和第二终端402。
然后,第一终端401可以显示界面。第一终端401在显示界面的过程中,可以对显示的界面进行截图,得到界面截图。第一终端401可以将得到的界面截图发送至第二终端402。
再后,第二终端402可以预先存储界面效果图。第二终端可以从预先存储的界面效果图中,确定相互匹配的界面效果图和界面截图。
再后,第二终端402可以对比所确定的相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致。如果确定不一致则可以称为对比不一致。
最后,响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息,生成差异信息。
本申请的上述实施例提供的方法,通过由执行主体首先确定相互匹配的界面截图和界面效果图,然后对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致;如果不一致,生成差异信息,由此,检测界面差异的方法可以由电子设备实现,可以避免人工检测,技术效果至少可以包括:
第一,节省人力成本。
第二,通过避免人工检测,可以避免人工检测的误差。可以理解,人工检测的误差通常高于机器检测。由此,可以提高检测界面差异的准确性。
第三,快速确定相互匹配的界面截图和界面效果图是否一致,不一致则生成差异信息。
在一些实现方式中,上述步骤201,还可以通过图5所示流程201实现,流程201可以包括:
步骤2011,获取目标应用的预先建立的界面跳转路径。
在这里,目标应用可以是待调试UI的应用。
在这里,上述界面跳转路径可以包括界面标识和用于指示界面跳转方向的指示信息。指示信息与跳转条件相关联。
可以参考图6,其示出了图5对应的方法涉及到的一些概念的关系。图6中,界面跳转路径可以包括界面标识A、界面标识B和界面标识C以及指示信息D和指示信息E。指示信息D与跳转条件F相关联。图6中“跳转条件F”下方的“→”用于表示指示信息D。指示信息E与跳转条件G相关联。图6中“跳转条件G”下方的“→”用于表示指示信息E。
在这里,跳转条件F可以指示在何种条件下,应用可以由界面标识A指示的界面A跳转到界面标识B指示的界面B。例如,跳转条件F可以包括点击预设第一控件。在这里,跳转条件G可以指示在何种条件下,应用可以由界面标识B指示的界面B跳转到界面标识C指示的界面C。例如,跳转条件F可以包括点击预设第二控件。
步骤2012,根据界面跳转路径和跳转条件,控制目标应用进行界面跳转。
在这里,上述目标应用可以运行在上述执行主体上,上述目标应用还可以运行在与上述执行主体不同的其它电子设备(例如图1中的第二终端设备103)上。上述执行主体可以根据跳转路径和跳转条件,控制目标应用进行界面跳转。
作为示例,上述执行主体可以按照跳转条件F(包括点击预设第一控件)的指示,模拟点击界面A中的第一预设控件,从而控制目标应用从界面A跳转到界面B。
步骤2013,根据跳转到的界面对应的界面跳转路径中的界面标识,获取存储路径。
在这里,界面标识与界面效果图的存储路径相关联。
在图6中,界面标识A与存储路径H相关联。界面标识B与存储路径I相关联。界面标识C与存储路径J相关联。
作为示例,上述执行主体控制上述目标应用跳转到界面B,界面B对应上述界面跳转路径中的界面标识B。上述执行主体可以根据界面标识B,获取存储路径I。
步骤2014,根据所获取的存储路径,获取至少一幅界面效果图。
在这里,上述执行主体可以根据步骤2013中获取的存储路径,获取至少一幅界面效果图。
作为示例,上述执行主体可以根据所获取的存储路径I,获取至少一幅界面效果图。
可选的,一界面标识所指示的存储路径对应的界面效果图,可能是一幅,也可能是多幅。对于应用,界面跳转路径是确定的,但是,同一种界面,设计人员可能需要根据应用的终端不同,设计出多个界面效果图。
步骤2015,获取跳转到的界面的截图。
在这里,上述执行主体可以获取跳转到的界面的截图。
作为示例,上述执行主体可以获取跳转到的界面B的截图。
步骤2016,从所获取的界面效果图中,确定与所获取的截图的图像分辨率一致的界面效果图作为界面效果图。
可选的,界面效果图可以按照终端的不同分类存储。如果界面效果图按照不同的终端进行分类存储,那么根据所获取的存储路径,上述执行主体可以获取一幅界面效果图。一般情况下,所获取的界面效果图与所获取的截图,图像分辨率一致。
可选的,如果界面效果图没有按照终端的不同分类存储,那么根据所获取的存储路径,上述执行主体可以获取至少一幅界面效果图。一般情况下,所获取的至少一幅界面效果图中,会有与所获取的截图的图像分辨率一致的界面效果图。可以将所获取各个界面效果图的图像分辨率,与所获取的界面的截图的图像分辨率,进行比对,确定与所获取的截图的匹配的界面效果图。
需要说明的是,图5所示流程,预先建立的界面跳转路径,以此为依据控制目标应用跳转。跳转到的界面可以对应界面标识,以及根据界面标识可以获取到存储路径。在这个过程中,以跳转到的界面标识为桥梁,构建跳转到的界面和界面效果图之间的对应关系,从而确定相互匹配的界面截图和界面效果图。由此,技术效果至少可以包括:
第一,在不进行相似度计算的情况下,可以确定相互匹配的界面截图和界面效果图。
第二,对于目标应用的各个界面效果图,可以以跳转路径为依据,逐个确定与该界面效果图匹配的界面截图。需要说明的是,这一过程由电子设备自动完成。由此,对于目标应用,电子设备可以自动按序地完成检测界面差异这一过程,中间无需人工干预。
进一步参考图7,其示出了检测界面差异的方法的又一个实施例的流程700。该检测界面差异的方法的流程700,包括以下步骤:
步骤701,确定相互匹配的界面截图和界面效果图。
在本实施例中,检测界面差异的方法运行于其上的执行主体(例如图1所示的电子设备101)可以确定相互匹配的界面截图和界面效果图。
在本实施例中步骤701的具体操作与图2所示的实施例中步骤201的操作基本相同,在此不再赘述。
步骤702,将相互匹配的界面截图和界面效果图导入预先建立的图像对比模型,生成对比结果。
在本实施例中,上述执行主体可以将相互匹配的界面截图和界面效果图导入预先建立的图像对比模型,生成对比结果。
在本实施例中,上述图像对比模型用于表征界面截图和界面效果图这两者与对比结果之间的对应关系。其中,对比结果包括对比一致信息或者差异信息,对比一致信息用于指示相互匹配的界面截图和界面效果图一致。
在一些实现方式中,上述图像对比模型可以通过以下方式建立:建立初始模型;利用训练样本集训练初始模型,得到图像对比模型。
在这里,训练样本包括相互匹配的训练用界面效果图和训练用界面截图,训练用界面截图标注有对比结果。
在这里,初始模型可以是未经训练或者未训练完成的机器学习模型。作为示例,初始模型可以包括但不限于梯度提升决策树(GDBT,Gradient Boosting Decision Tree)、神经网络(NN,Neural Network)、SVM(Support Vector Machine,支持向量机)、随机森林(Random Forest)以及其它现在已知或将来开发的机器学习模型。
需要说明的是,随着机器学习技术的发展,机器学习可以应用的场景也越来越广泛。在本申请中,首次将机器学习技术引入到软件开发领域。具体地,本申请首次将机器学习技术应用到调UI的过程中。
步骤703,响应于生成差异信息,根据差异信息,调整目标程序,以提高利用调整后的目标程序所生成的界面的还原度。
在本实施例中,上述执行主体可以响应于生成差异信息,根据差异信息,调整目标程序,以提高调整后的目标程序所生成的界面的还原度。
在本实施例中,上述目标程序用于生成上述界面截图所截取的界面。
作为示例,界面效果图和界面截图之间的差异在于A位置的像素值不同,界面截图的A位置的像素值250比界面效果图的A位置的像素值240大10。可以理解,开发人员在编写目标程序的时候,会参考界面效果图的A位置的像素值240,尽量保证界面截图的A位置的像素值240。但是,在终端显示的时候,可能由于各种原因,显示出的界面的A位置的像素值为250。差异信息包括A位置的坐标和10。
作为示例,上述执行主体可以根据差异信息,调整目标程序。上述执行主体可以定位负责A位置视觉效果的代码。然后,上述执行主体可以调整定位到的代码,例如,定位到的代码中A位置的像素值设为240,上述执行主体可以将240调整为230。调整之后,利用目标程序再生成的界面,A位置的像素值可能为250,即与界面效果图更为相似,提高了界面还原度。
从图7中可以看出,与图2对应的实施例相比,本实施例中的检测界面差异的方法的流程700突出了利用图像对比模型生成差异信息以及根据差异信息调整目标程序的步骤。由此,本实施例描述的方案的技术效果至少可以包括:
第一,利用图像对比模型,确定相互匹配的界面截图和界面效果图是否一致,可以提高确定两者是否一致的速度。
第二,如果不一致生成差异信息,可以提高差异信息的生成的效率和准确度。
第三,根据差异信息调整目标程序,实现电子设备自动调UI。
首先,可以提高用户界面相对于界面效果图的还原度。从而保证界面设计效果图可以高还原度落地,从而可以提高用户界面的质量,保证产品的质量。
其次,可以避免人工调整,从而节省人力成本。
再次,可以提高调整的速度,加快应用的调试速度,从而缩短应用的研发周期。
下面参考图8,其示出了适于用来实现本申请实施例的电子设备的计算机***800的结构示意图。图8示出的电子设备仅仅是一个示例,不应对本申请实施例的功能和使用范围带来任何限制。
如图8所示,计算机***800包括中央处理单元(CPU,Central Processing Unit)801,其可以根据存储在只读存储器(ROM,Read Only Memory)802中的程序或者从存储部分808加载到随机访问存储器(RAM,Random Access Memory)803中的程序而执行各种适当的动作和处理。在RAM 803中,还存储有***800操作所需的各种程序和数据。CPU 801、ROM802以及RAM 803通过总线804彼此相连。输入/输出(I/O,Input/Output)接口805也连接至总线804。
以下部件连接至I/O接口805:包括键盘、鼠标等的输入部分806;包括诸如阴极射线管(CRT,Cathode Ray Tube)、液晶显示器(LCD,Liquid Crystal Display)等以及扬声器等的输出部分807;包括硬盘等的存储部分808;以及包括诸如LAN(局域网,Local AreaNetwork)卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器810上,以便于从其上读出的计算机程序根据需要被安装入存储部分808。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分809从网络上被下载和安装,和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时,执行本申请的方法中限定的上述功能。需要说明的是,本申请上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本申请中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本申请各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的***来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本申请实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中,例如,可以描述为:一种处理器包括确定单元生成单元。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定,例如,确定单元还可以被描述为“确定相互匹配的界面截图和界面效果图的单元”。
作为另一方面,本申请还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的装置中所包含的;也可以是单独存在,而未装配入该装置中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该装置执行时,使得该装置:确定相互匹配的界面截图和界面效果图,其中,界面截图与界面效果图之间相互匹配是指:界面效果图是界面截图所截取的界面的设计效果图;对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致;响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息,其中,上述差异信息包括差异位置信息和差异程度信息。
以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本申请中所涉及的发明范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述发明构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种检测界面差异的方法,包括:
确定相互匹配的界面截图和界面效果图,其中,界面截图与界面效果图之间相互匹配是指:界面效果图是界面截图所截取的界面的设计效果图;
对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致;
响应于确定相互匹配的界面截图和界面效果图不一致,生成差异信息,其中,所述差异信息包括差异位置信息和差异程度信息。
2.根据权利要求1所述的方法,其中,所述确定相互匹配的界面截图和界面效果图,包括:
获取目标应用的预先建立的界面跳转路径,其中,所述界面跳转路径包括界面标识和用于指示界面跳转方向的指示信息,指示信息与跳转条件相关联,界面标识与界面效果图的存储路径相关联;
根据界面跳转路径和跳转条件,控制所述目标应用进行界面跳转;
根据跳转到的界面对应的所述界面跳转路径中的界面标识,获取存储路径;
根据所获取的存储路径,获取至少一幅界面效果图;
获取跳转到的界面的截图;
从所获取的界面效果图中,确定与所获取的截图的图像分辨率一致的界面效果图作为与所获取的截图匹配的界面效果图。
3.根据权利要求1所述的方法,其中,所述确定相互匹配的界面截图和界面效果图,包括:
获取界面截图;
确定所获取的界面截图与预先建立的界面效果图集合中的界面效果图之间的第一相似度;
根据所确定的第一相似度,确定与所获取的界面截图匹配的界面效果图。
4.根据权利要求1所述的方法,其中,所述确定相互匹配的界面截图和界面效果图,包括:
获取界面效果图;
确定所获取的界面效果图与预先建立的界面截图集合中的界面截图之间的第二相似度;
根据所确定的第二相似度,确定与所获取的界面效果图匹配的界面截图。
5.根据权利要求1-4中任一项所述的方法,其中,所述方法还包括:
根据所述差异信息,在所述界面截图的基础上标注所述差异以生成差异对照图;
呈现所述差异对照图。
6.根据权利要求5所述的方法,其中,所述方法还包括:
根据所述差异信息,调整目标程序,以提高利用调整后的目标程序所生成的界面的还原度,其中,所述目标程序用于生成所述界面截图所截取的界面。
7.根据权利要求6所述的方法,其中,所述对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致,包括:
将相互匹配的界面截图和界面效果图导入预先建立的图像对比模型,生成对比结果,其中,所述图像对比模型用于表征界面截图和界面效果图这两者与对比结果之间的对应关系,其中,对比结果包括对比一致信息或者差异信息,对比一致信息用于指示相互匹配的界面截图和界面效果图一致。
8.根据权利要求6所述的方法,其中,所述对比相互匹配的界面截图和界面效果图,确定相互匹配的界面截图和界面效果图是否一致,包括:
对于相互匹配的界面截图和界面效果图,分别进行二值化处理,生成二值化截图和二值化效果图;
对于所述二值化截图中的和所述二值化效果图中的对应位置的像素,确定像素值是否相同;
根据像素值不同的像素数量,确定相互匹配的界面截图和界面效果图是否一致。
9.一种电子设备,包括:
一个或多个处理器;
存储装置,其上存储有一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-8中任一所述的方法。
10.一种计算机可读介质,其上存储有计算机程序,其中,所述程序被处理器执行时实现如权利要求1-8中任一所述的方法。
CN201810699643.8A 2018-06-29 2018-06-29 检测界面差异的方法、电子设备和计算机可读介质 Pending CN108984399A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810699643.8A CN108984399A (zh) 2018-06-29 2018-06-29 检测界面差异的方法、电子设备和计算机可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810699643.8A CN108984399A (zh) 2018-06-29 2018-06-29 检测界面差异的方法、电子设备和计算机可读介质

Publications (1)

Publication Number Publication Date
CN108984399A true CN108984399A (zh) 2018-12-11

Family

ID=64539611

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810699643.8A Pending CN108984399A (zh) 2018-06-29 2018-06-29 检测界面差异的方法、电子设备和计算机可读介质

Country Status (1)

Country Link
CN (1) CN108984399A (zh)

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109976854A (zh) * 2019-03-22 2019-07-05 维沃移动通信有限公司 一种应用程序处理方法及终端设备
CN109992518A (zh) * 2019-04-10 2019-07-09 禄鹏 Ui界面的检测方法、装置、电子设备及存储介质
CN111079059A (zh) * 2019-12-18 2020-04-28 北京百度网讯科技有限公司 页面检查方法、装置、设备及计算机可读存储介质
CN111242187A (zh) * 2020-01-03 2020-06-05 北京字节跳动网络技术有限公司 一种图像相似度处理方法、装置、介质和电子设备
CN111881959A (zh) * 2020-07-17 2020-11-03 北京三快在线科技有限公司 一种标识图像差异的方法及装置
CN112527539A (zh) * 2019-08-28 2021-03-19 腾讯科技(深圳)有限公司 一种界面检测的方法以及相关装置
CN113239928A (zh) * 2021-05-11 2021-08-10 北京百度网讯科技有限公司 图像差异检测及模型训练的方法、设备及程序产品
CN113238938A (zh) * 2021-05-11 2021-08-10 北京百度网讯科技有限公司 开发界面的检测方法、装置、设备、存储介质及程序产品
CN113703622A (zh) * 2021-04-06 2021-11-26 腾讯科技(深圳)有限公司 显示界面处理方法、装置、电子设备和存储介质
CN113722038A (zh) * 2021-09-06 2021-11-30 北京字节跳动网络技术有限公司 一种数据匹配方法、装置、计算机设备以及存储介质
CN113703622B (zh) * 2021-04-06 2024-06-28 腾讯科技(深圳)有限公司 显示界面处理方法、装置、电子设备和存储介质

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140136944A1 (en) * 2012-11-09 2014-05-15 Adobe Systems Incorporated Real time web development testing and reporting system
CN104143008A (zh) * 2014-08-11 2014-11-12 北京奇虎科技有限公司 基于图片匹配检测钓鱼网页的方法及装置
CN105095083A (zh) * 2015-08-24 2015-11-25 上海斐讯数据通信技术有限公司 一种用于安卓***中手机界面截图测试方法及装置
CN105740141A (zh) * 2014-12-12 2016-07-06 ***通信集团终端有限公司 一种自动化检测方法及其装置
CN106295644A (zh) * 2016-08-11 2017-01-04 海信集团有限公司 符号识别方法及装置
CN106502891A (zh) * 2016-10-19 2017-03-15 广州视源电子科技股份有限公司 用户界面的自动检测方法和装置
CN106886491A (zh) * 2017-01-17 2017-06-23 博彦科技股份有限公司 网页兼容性测试方法及装置
CN107948640A (zh) * 2017-12-19 2018-04-20 百度在线网络技术(北京)有限公司 视频播放测试方法、装置、电子设备和存储介质
CN108154031A (zh) * 2018-01-17 2018-06-12 腾讯科技(深圳)有限公司 伪装应用程序的识别方法、装置、存储介质和电子装置

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140136944A1 (en) * 2012-11-09 2014-05-15 Adobe Systems Incorporated Real time web development testing and reporting system
CN104143008A (zh) * 2014-08-11 2014-11-12 北京奇虎科技有限公司 基于图片匹配检测钓鱼网页的方法及装置
CN105740141A (zh) * 2014-12-12 2016-07-06 ***通信集团终端有限公司 一种自动化检测方法及其装置
CN105095083A (zh) * 2015-08-24 2015-11-25 上海斐讯数据通信技术有限公司 一种用于安卓***中手机界面截图测试方法及装置
CN106295644A (zh) * 2016-08-11 2017-01-04 海信集团有限公司 符号识别方法及装置
CN106502891A (zh) * 2016-10-19 2017-03-15 广州视源电子科技股份有限公司 用户界面的自动检测方法和装置
CN106886491A (zh) * 2017-01-17 2017-06-23 博彦科技股份有限公司 网页兼容性测试方法及装置
CN107948640A (zh) * 2017-12-19 2018-04-20 百度在线网络技术(北京)有限公司 视频播放测试方法、装置、电子设备和存储介质
CN108154031A (zh) * 2018-01-17 2018-06-12 腾讯科技(深圳)有限公司 伪装应用程序的识别方法、装置、存储介质和电子装置

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109976854A (zh) * 2019-03-22 2019-07-05 维沃移动通信有限公司 一种应用程序处理方法及终端设备
CN109976854B (zh) * 2019-03-22 2023-02-24 维沃移动通信有限公司 一种应用程序处理方法及终端设备
CN109992518A (zh) * 2019-04-10 2019-07-09 禄鹏 Ui界面的检测方法、装置、电子设备及存储介质
CN112527539B (zh) * 2019-08-28 2023-10-03 腾讯科技(深圳)有限公司 一种界面检测的方法以及相关装置
CN112527539A (zh) * 2019-08-28 2021-03-19 腾讯科技(深圳)有限公司 一种界面检测的方法以及相关装置
CN111079059A (zh) * 2019-12-18 2020-04-28 北京百度网讯科技有限公司 页面检查方法、装置、设备及计算机可读存储介质
CN111242187A (zh) * 2020-01-03 2020-06-05 北京字节跳动网络技术有限公司 一种图像相似度处理方法、装置、介质和电子设备
CN111881959A (zh) * 2020-07-17 2020-11-03 北京三快在线科技有限公司 一种标识图像差异的方法及装置
CN111881959B (zh) * 2020-07-17 2024-03-08 北京三快在线科技有限公司 一种标识图像差异的方法及装置
CN113703622B (zh) * 2021-04-06 2024-06-28 腾讯科技(深圳)有限公司 显示界面处理方法、装置、电子设备和存储介质
CN113703622A (zh) * 2021-04-06 2021-11-26 腾讯科技(深圳)有限公司 显示界面处理方法、装置、电子设备和存储介质
CN113239928A (zh) * 2021-05-11 2021-08-10 北京百度网讯科技有限公司 图像差异检测及模型训练的方法、设备及程序产品
CN113238938A (zh) * 2021-05-11 2021-08-10 北京百度网讯科技有限公司 开发界面的检测方法、装置、设备、存储介质及程序产品
CN113722038A (zh) * 2021-09-06 2021-11-30 北京字节跳动网络技术有限公司 一种数据匹配方法、装置、计算机设备以及存储介质

Similar Documents

Publication Publication Date Title
CN108984399A (zh) 检测界面差异的方法、电子设备和计算机可读介质
CN107766940B (zh) 用于生成模型的方法和装置
CN108090916B (zh) 用于跟踪视频中的目标图形的方法和装置
CN108898185A (zh) 用于生成图像识别模型的方法和装置
CN108830235A (zh) 用于生成信息的方法和装置
CN109325541A (zh) 用于训练模型的方法和装置
CN109508681A (zh) 生成人体关键点检测模型的方法和装置
CN111476871B (zh) 用于生成视频的方法和装置
CN108830329A (zh) 图片处理方法和装置
CN109308681A (zh) 图像处理方法和装置
CN109308490A (zh) 用于生成信息的方法和装置
CN108345387A (zh) 用于输出信息的方法和装置
CN109063653A (zh) 图像处理方法和装置
CN109934242A (zh) 图片识别方法和装置
CN109034069A (zh) 用于生成信息的方法和装置
CN109857388A (zh) 代码生成方法、装置、服务器及计算机可读介质
CN108960110A (zh) 用于生成信息的方法和装置
US11210563B2 (en) Method and apparatus for processing image
CN107958247A (zh) 用于人脸图像识别的方法和装置
CN109471805A (zh) 资源测试方法及装置、存储介质、电子设备
CN109285181A (zh) 用于识别图像的方法和装置
CN109255767A (zh) 图像处理方法和装置
US20230035366A1 (en) Image classification model training method and apparatus, computer device, and storage medium
CN108446659A (zh) 用于检测人脸图像的方法和装置
CN108882025A (zh) 视频帧处理方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20181211

RJ01 Rejection of invention patent application after publication