CN112445693A - 一种页面更新检测方法、装置、设备及存储介质 - Google Patents

一种页面更新检测方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN112445693A
CN112445693A CN201910802227.0A CN201910802227A CN112445693A CN 112445693 A CN112445693 A CN 112445693A CN 201910802227 A CN201910802227 A CN 201910802227A CN 112445693 A CN112445693 A CN 112445693A
Authority
CN
China
Prior art keywords
page
compared
area
information
target
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.)
Granted
Application number
CN201910802227.0A
Other languages
English (en)
Other versions
CN112445693B (zh
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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201910802227.0A priority Critical patent/CN112445693B/zh
Publication of CN112445693A publication Critical patent/CN112445693A/zh
Application granted granted Critical
Publication of CN112445693B publication Critical patent/CN112445693B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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/3692Test management for test results analysis
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请涉及一种页面更新检测方法、装置、设备及存储介质,所述方法包括:确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型;获取与所述目标更新页面对应的页面结构图;将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到第一更新区域信息;获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图;对所述第一页面截图和所述第二页面截图进行像素比对,得到第二更新区域信息;基于所述第一更新区域信息和所述第二更新区域信息,确定页面更新检测结果。本申请能够检测出页面更新后视觉上不可见的更新信息,并能够对更新页面上的具体更新区域进行标注展示。

Description

一种页面更新检测方法、装置、设备及存储介质
技术领域
本申请涉及计算机技术领域,尤其涉及一种页面更新检测方法、装置、设备及存储介质。
背景技术
在软件开发过程中,经常需要对软件版本进行更新,其中就会涉及到对用户界面进行更新,并且会有相关的测试人员对更新之后的用户界面进行UI测试(User Interfacetesting,用户界面测试),UI测试的目的是确保用户界面会通过测试对象的功能来为用户提供相应的访问或浏览功能,确保用户界面符合公司或行业的标准,通过UI测试来核实用户与软件的交互。
在UI测试过程中,为了使得测试人员将注意力着重放在用户界面改动点上,一般在测试之前首先将更新前的用户界面和更新后的用户界面进行比对,找出两者的差异点;现有技术中一般是通过自动化截图做像素比对,从而判断用户界面是否出现改动;但是这种方法只能够检测出用户界面视觉上可见的差异点,对于视觉上不可见的差异点无法检测。
发明内容
本申请所要解决的技术问题在于,提供一种页面更新检测方法、装置、设备及存储介质,能够检测出页面的更新信息,其中包括视觉上不可见的页面更新信息,并且能够对更新页面上的具体更新区域进行标注展示。
为了解决上述技术问题,一方面,本申请提供了一种页面更新检测方法,所述方法包括:
确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型;
基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图;其中,所述页面结构图中包括至少一个待比对区域;
将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息;其中,所述第一结构信息为从所述目标文档对象模型中获取的与所述待比对区域对应的结构信息,所述第二结构信息为从所述原文档对象模型中获取的与所述待比对区域对应的结构信息;
获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图;
对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息;
基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果。
另一方面,本申请提供了一种页面更新检测装置,所述装置包括:
文档对象模型确定模块,用于确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型;
页面结构图获取模块,用于基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图;其中,所述页面结构图中包括至少一个待比对区域;
结构信息比对模块,用于将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息;其中,所述第一结构信息为从所述目标文档对象模型中获取的与所述待比对区域对应的结构信息,所述第二结构信息为从所述原文档对象模型中获取的与所述待比对区域对应的结构信息;
页面截图获取模块,用于获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图;
像素比对模块,用于对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息;
更新检测结果确定模块,用于基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果。
另一方面,本申请提供了一种设备,所述设备包括处理器和存储器,所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述的页面更新检测方法。
另一方面,本申请提供了一种计算机存储介质,所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行如上述的页面更新检测方法。
本申请能够将页面结构图中各待比对区域在目标更新页面和原页面的结构信息进行比对,将结构信息比对结果作为判断目标更新页面的页面结构、页面样式等是否有改动的依据,能够将视觉上不可见的页面改动检测出来,其中对结构信息发生改动的目标更新页面进行测试、修改,从而避免页面结构的逻辑错误;通过对目标页面的第一页面截图以及原页面的第二页面截图进行像素点阵比对,能够检测出视觉上可见的页面改动以及改动的具体区域;从而基于各待比对区域的信息比对结果,确定更新区域信息,并对有信息更新的区域进行标注显示,以提醒相关开发或测试人员注意。
附图说明
图1是本申请实施例提供的应用场景示意图;
图2是本申请实施例提供的一种页面检测更新方法流程图;
图3是本申请实施例提供的一种页面结构图确定方法流程图;
图4是本申请实施例提供的一种页面结构信息比对方法流程图;
图5是本申请实施例提供的一种结构信息比对结果确定方法流程图;
图6是本申请实施例提供的一种第一更新区域信息确定方法流程图;
图7是本申请实施例提供的一种像素比对方法流程图;
图8是本申请实施例提供的一种第二更新区域信息确定方法流程图;
图9是本申请实施例提供的一种更新检测结果确定方法流程图;
图10是本申请实施例提供的更新前后页面显示示意图;
图11是本申请实施例提供的页面结构示意图;
图12是本申请实施例提供的页面差异示意图;
图13是本申请实施例提供的结构信息比对结果标注示意图;
图14是本申请实施例提供的像素点阵比对结果标注示意图;
图15是本申请实施例提供的页面更新检测标注结果示意图;
图16是本申请实施例提供的一种页面更新检测装置示意图;
图17是本申请实施例提供的页面结构图获取模块示意图;
图18是本申请实施例提供的结构信息比对模块示意图;
图19是本申请实施例提供的第一比对模块示意图;
图20是本申请实施例提供的第一确定模块示意图;
图21是本申请实施例提供的像素比对模块示意图;
图22是本申请实施例提供的更新检测结果确定模块示意图;
图23是本申请实施例提供的一种设备结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请作进一步地详细描述。显然,所描述的实施例仅仅是本申请的一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
首先对本实施例中的相关术语做以下说明:
DOM:Document Object Model,文档对象模型,在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
Dom diff:原理是是利用浏览器访问页面,遍历页面的整个dom树,获取元素计算样式和元素内文本内容,从而构造出一个JSON(JavaScript Object Notation,JS对象简谱)结构,根据JSON进行对比计算,得出页面具体差异的一种对比方法。
请参见图1,其示出了本申请实施例提供的应用场景示意图,该应用场景包括:至少一个终端110和服务器120,所述终端110和所述服务器120可通过网络进行数据通信。具体地,终端110可从服务器120中获取相关的页面信息,以便于终端110根据获取的页面信息进行页面更新的检测。
所述终端110可以基于浏览器/服务器模式(Browser/Server,B/S)或客户端/服务器模式(Client/Server,C/S)与服务器120进行通信。所述终端110可以包括:智能手机、平板电脑、笔记本电脑、数字助理、智能可穿戴设备、车载终端、服务器等类型的实体设备,也可以包括运行于实体设备中的软体,例如应用程序等。本申请实施例中的终端110上运行的操作系统可以包括但不限于安卓系统、IOS系统、linux、windows等。
所述服务器120与终端110可以通过有线或者无线建立通信连接,所述服务器120可以包括一个独立运行的服务器,或者分布式服务器,或者由多个服务器组成的服务器集群,其中服务器可以是云端服务器。
现有技术中页面更新检测方法只能检测出可视化差异点,而无法判断视觉上不可见元素,或者是指定条件下触发展示的样式(例如用户操作、系统配置)等是否产生变动;无法判断页面的dom结构或者样式改动(但是没有引起页面样式变化)的变动,有可能出现其他逻辑错误,例如js(JavaScript,脚本语言)无法找到对应dom结构(dom结构变化,但是样式没变化),从而导致bug产生;只能简单得出两个页面图片是否不同,无法精确到更新的具体区域。
为了解决现有技术中存在的问题,本申请实施例提供了一种页面检测更新方法,其执行主体可以为图1中的终端,具体请参见图2,所述方法包括:
S210.确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型。
本申请实施例中的文档对象模型可以是指与页面所对应的dom树结构,每个页面均有与其唯一对应的dom树结构,其中包括表示和修改页面所需的对象、各对象的行为属性以及对象之间的关系,是页面上数据和结构的一种树形表示。
通过浏览器访问原页面以及更新之后的目标更新页面,可以分别得到原页面和目标更新页面的dom结构,这里所述的浏览器可以是phantom或其他Puppeteer浏览器,本实施例不作具体限定。
S220.基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图;其中,所述页面结构图中包括至少一个待比对区域。
预设的页面结构深度是本申请实施例中用于进行原页面与目标更新页面对比的页面结构对比深度,可根据比对需求预先进行配置。例如,当配置页面结构深度为2时,则只在<body>元素下,基于第一层子元素和第二层孙元素进行比对。
具体地,请参见图3,其示出了一种页面结构图确定方法流程图,所述方法包括:
S310.对所述目标文档对象模型进行元素分析,得出所述目标更新页面中各元素之间的总体层级关系。
S320.从所述总体层级关系中确定与所述预设的页面结构深度对应的第一层级关系。
由上述确定的页面结构深度为2,可以得到body元素下,第一层子元素和第二层孙元素之间的层级关系。
S330.根据所述第一层级关系确定与所述目标更新页面对应的页面结构图。
一级子元素中包含二级孙元素,在页面结构图中,body元素下每个一级子元素对应一个一级区域,基于该子元素中所包括的至少一个二级孙元素,又可将该区域划分为至少一个二级区域,即一个一级区域中可包括至少一个二级区域,从而可以得到与目标更新页面对应的页面结构图。
本申请实施例中,对于包含二级孙元素的一级子元素,将各二级孙元素对应的二级区域确定为待比对区域;对于不包含二级孙元素的一级子元素,直接将该一级子元素对应的一级区域确定为待比对区域。
S230.将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息;其中,所述第一结构信息为从所述目标文档对象模型中获取的与所述待比对区域对应的结构信息,所述第二结构信息为从所述原文档对象模型中获取的与所述待比对区域对应的结构信息。
请参见图4,其示出了一种页面结构信息比对方法,所述方法包括:
S410.确定所述页面结构图中的当前待比对区域。
页面结构图中可包含多个待比对区域,对于这多个待比对区域可预先设置遍历的顺序,这样在遍历过当前待比对区域之后,可以直接确定下一个待比对的区域。
S420.获取与当前待比对区域对应的第一结构信息以及第二结构信息。
首先,需要说明的是,本申请实施例中的目标更新页面和原页面的页面结构图可以是相同的,也可以是不同的,但均可以目标更新页面的页面结构图为基准进行比对。
对于当前待比对区域,第一结构信息是从目标更新页面的dom结构中中获取的与当前待比对区域对应的信息,即第一结构信息是目标更新页面的dom结构中对当前待比对区域中各元素、各元素属性及各元素之间关系的描述信息;第二结构信息是从原页面的dom结构中获取的与当前待比对区域对应的信息,即第二结构信息是原页面的dom结构中对当前待比对区域中各元素、各元素属性及各元素之间关系的描述信息。
S430.将所述第一结构信息和所述第二结构信息进行比对,得到结构信息比对结果。
这里的结构信息比对结果具体可以指待比对区域所对应的第一结构信息和第二结构信息是否相同的判断结果,可参见图5,其示出了一种结构信息比对结果确定方法,所述方法包括:
S510.判断所述第一结构信息和所述第二结构信息是否一致。
S520.当判断的结果为不一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域不同。
S530.当判断的结果为一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域相同。
S540.将判断的结果作为所述当前待比对区域对应的结构信息比对结果。
S440.判断是否遍历完所述页面结构图中的各待比对区域。
S450.当判断的结果是没有遍历完所述页面结构图中的各待比对区域时,确定当前待比对区域的下一待比对区域为当前待比对区域,并返回步骤S410。
S450.当判断的结果是已经遍历完所述页面结构图中的各待比对区域时,基于与各待比对区域对应的所述结构信息比对结果,确定所述目标更新页面相对于所述原页面的第一更新区域信息。
这里的第一更新区域信息中包括的是经过比对之后,结构信息发生更新的待比对区域,具体地,请参见图6,其示出了一种第一更新区域信息确定方法,所述方法包括:
S610.基于各待比对区域对应的结构信息比对结果,确定所述各待比对区域中判断结果为不一致的待比对区域。
从结构信息比对结果中,找出目标更新页面与原页面的结构信息比对判断结果为不一致的待比对区域。
S620.将一致性比对的结果为不一致的待比对区域作为所述第一更新区域信息。
将步骤S610中找出的待比对区域确定为有更新的区域,并将这些有更新的待比对区域作为第一更新区域信息。
S240.获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图。
采用预设的截图工具或者脚本,对于在浏览器端呈现的目标更新页面以及原页面分别进行截图,得到第一页面截图和第二页面截图。
S250.对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息。
具体的像素比对过程可参见图7,其示出了一种像素比对方法,所述方法包括:
S710.确定当前待比对区域在所述目标更新页面中所对应的第一图像区域,以及确定当前待比对区域在所述原页面中所对应的第二图像区域。
对于页面截图信息,可基于页面的文档结构图,划分为相应的多个图像区域。
S720.将所述第一图像区域中的像素点阵与所述第二图像区域中的像素点阵进行比对。
对于每个图像区域,均可对应一个像素点矩阵,将第一图像区域的像素点矩阵中的每个像素点与第二图像区域的像素点矩阵中的相应的像素点进行比对,具体的比对方法可以是:对两个像素点的RGB值进行比对,若RGB值相同,则判定这两个像素点一致,当RGB值不同,则判定这两个像素点不一致。
S730.判断所述第一图像区域中的像素点阵与所述第二图像区域中的像素点阵是否一致。
S740.当判断的结果为不一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域不同。
S750.当判断的结果为一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域相同。
当第一图像区域的像素点矩阵与第二图像区域的像素点矩阵只要有一组像素点不同,则判定这两个图像区域不同。
S760.将判断的结果作为所述当前待比对区域对应的像素点阵比对结果。
S770.判断是否遍历完所述页面结构图中的各待比对区域。
S780.当判断的结果是没有遍历完所述页面结构图中的各待比对区域时,确定当前待比对区域的下一待比对区域为当前待比对区域,并返回步骤S710。
S790.当判断的结果是已经遍历完所述页面结构图中的各待比对区域时,基于与各待比对区域对应的所述像素点阵比对结果,确定所述目标更新页面相对于所述原页面的第二更新区域信息。
具体地,请参见图8,其示出了一种第二更新区域信息确定方法,所述方法包括:
S810.基于各待比对区域对应的像素点阵比对结果,确定所述各待比对区域中判断结果为不一致的待比对区域。
从像素点阵比对结果中,找出第一图像区域与第二图像区域的像素点阵比对判断结果为不一致的待比对区域。
S820.将一致性比对的结果为不一致的待比对区域作为所述第二更新区域信息。
将步骤S810中找出的待比对区域确定为有更新的区域,并将这些有更新的待比对区域作为第二更新区域信息。
S260.基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果。
对于经过结构信息比对获得的第一更新区域信息,以及经过像素点阵比对获得的第二更新区域信息,需要进行合并以获得所述目标更新页面相对于原页面的更新检测结果。请参见图9,其示出了一种更新检测结果确定方法,所述方法包括:
S910.计算所述第一更新区域信息对应的待比对区域与所述第二更新区域信息对应的待比对区域的并集,得到待标注区域集合。
对第一更新区域信息中的待比对区域与第二更新区域信息中待比对区域求并集,以获得完整的已更新的待比对区域。
S920.基于所述待标注区域集合中的各待标注区域,在所述目标更新页面的相应区域进行标注及展示。
对于有更新的待比对区域,可在页面结构图中进行标注,也可以在终端呈现的目标更新页面的显示页面上进行标注,也可以在目标更新页面的dom结构中进行标注等;具体可以是通过边框或者高亮的形式进行标注,本实施例不作具体限定。
下面以一具体示例来说明本申请的具体实施过程,请参见图10,图10(a)示出了更新之后页面的显示页面V2.0,图10(b)示出了原页面的显示页面V1.0,具体实施过程可包括:
1.配置需要比对的页面结构深度为2,则对<body>元素下的第一层子元素和第二层孙元素进行比对。
2.通过浏览器对更新后的页面V2.0的dom结构进行分析,根据页面结构深度2,得到与更新后页面对应的页面结构图,如图11所示。
3.对于页面结构图中所划分的各区域进行dom结构比对,需要说明的是任何能够实现dom结构判断的算法均可用于本申请实施例中,本实施例中以dom diff算法为例进行说明。如果页面V2.0的a节点与页面V1.0的a节点不对应,则说明a节点发生结构性变化,并且标注a节点所在的对比区域产生变化,标记该区域为modification_1,具体请参见图12,在导航栏的更多选项中,更新之后的页面多了一个首页量,该更新点是不可从页面中直接看出的,相应的dom结构描述由原来的:
Figure BDA0002182650810000111
更新为:
Figure BDA0002182650810000121
对原页面和更新页面的各待比对区域进行结构比对,得出发生结构性变化的区域并进行了标注,dom diff比对结果标注结果请参见图13,包括:二级dom diff有差异,在导航栏中多了首页选项,该更新在视觉上与原页面无差异;二级dom diff有差异,文章的篇数发生了变化,由原来的642篇变为550篇;一级dom diff有差异:更新之后页面中多了问候语。
4.使用工具或者脚本,分别对页面V1.0和页面V2.0在浏览器端呈现的样式进行截图,基于划定的待比对区域,进行区域内的像素点阵比对;对于像素点阵比对不一致的区域,则说明该区域所对应的节点上产生了视觉上的改动,标记该区域为modification_2。
对原页面和更新页面的各待比对区域进行像素点阵比对,得出发生变化的区域并进行了标注,像素点阵比对标注结果请参见图14,包括:二级像素点阵比对有差异,文章篇数变化,由原来的642篇变为550篇;一级像素点阵比对有差异:更新之后页面中多了问候语。
5.以dom结构和样式变化modification_1,以及视觉对比变化modification_2,进行区域对比,判断发生变化的区块是否重合,并将modification_1,modification_2对应区域在V2.0版本上的dom元素标注出来,并生成测试报告,最终得到的页面更新检测标注结果请参见图15。
6.相关开发人员和测试人员可根据图片中的标注,来确定页面那些地方有产生视觉上无法体现的dom结构修改,以及视觉上明显能看出的修改。
本申请基于页面的dom结构以及预设的页面结构深度,生成对应的页面结构图,并将根据区域进行dom比对的情况,作为判断当前页面结构是否有变化,CSS样式是否有改动的依据,这其中包括视觉上不可见,但通过比对dom结构可以确定的改动;加上UI自动化截屏,再将截图进行指定区域内像素点的比对,从而确定出哪个区域内的元素有做修改,区别于现有技术中通过像素点比对,只能得出更新前后的页面是否有变化而无法精确到具体哪个区域发生了元素变动的技术方案。
通过本申请实施例提供的页面更新检测方法,对于dom结构改变,但是视觉上并无不同的改动,也能被检测并标记出来,能有效避免一些逻辑错误,例如需要依据dom结构的逻辑;视觉上某些不可见元素,或者是指定条件下触发展示的样式(例如用户操作、系统配置)的变动,也能被检测和标记出来;能精确到当前版本页面上具体哪个区域,甚至哪个元素产生了变动,将页面改动更加直观和清晰地展示出来。
请参见图16,本实施例还提供了一种页面更新检测装置,该装置可通过硬件和/或软件的方式实现,并一般可以集成于客户端中,与提供资源的服务器配合使用,所述装置包括:
文档对象模型确定模块1610,用于确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型;
页面结构图获取模块1620,用于基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图;其中,所述页面结构图中包括至少一个待比对区域;
结构信息比对模块1630,用于将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息;其中,所述第一结构信息为从所述目标文档对象模型中获取的与所述待比对区域对应的结构信息,所述第二结构信息为从所述原文档对象模型中获取的与所述待比对区域对应的结构信息;
页面截图获取模块1640,用于获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图;
像素比对模块1650,用于对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息;
更新检测结果确定模块1660,用于基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果。
请参见图17,所述页面结构图获取模块1620包括:
元素分析模块1710,用于对所述目标文档对象模型进行元素分析,得出所述目标更新页面中各元素之间的总体层级关系;
层级关系确定模块1720,用于从所述总体层级关系中确定与所述预设的页面结构深度对应的第一层级关系;
页面结构图确定模块1730,用于根据所述第一层级关系确定与所述目标更新页面对应的页面结构图。
请参见图18,所述结构信息比对模块1630包括:
待比对区域确定模块1810,用于确定所述页面结构图中的当前待比对区域;
结构信息获取模块1820,用于获取与当前待比对区域对应的第一结构信息以及第二结构信息;
第一比对模块1830,用于将所述第一结构信息和所述第二结构信息进行比对,得到结构信息比对结果;
第一重复模块1840,用于确定当前待比对区域的下一待比对区域为当前待比对区域,重复执行当前待比对区域确定、结构信息获取以及结构信息比对的步骤,直至遍历完所述页面结构图中的各待比对区域;
第一确定模块1850,用于基于与各待比对区域对应的所述结构信息比对结果,确定所述目标更新页面相对于所述原页面的第一更新区域信息。
请参见图19,所述第一比对模块1830包括:
第一判断模块1910,用于判断所述第一结构信息和所述第二结构信息是否一致;
第一判定模块1920,用于当判断的结果为不一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域不同;
第二判定模块1930,用于当判断的结果为一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域相同;
结构信息比对结果确定模块1940,用于将判断的结果作为所述当前待比对区域对应的结构信息比对结果。
请参见图20,所述第一确定模块1850包括:
第二确定模块2010,用于基于各待比对区域对应的结构信息比对结果,确定所述各待比对区域中判断结果为不一致的待比对区域;
第一更新区域信息确定模块2020,用于将一致性比对的结果为不一致的待比对区域作为所述第一更新区域信息。
请参见图21,所述像素比对模块1650包括:
图像区域确定模块2110,用于确定当前待比对区域在所述目标更新页面中所对应的第一图像区域,以及确定当前待比对区域在所述原页面中所对应的第二图像区域;
第二判断模块2120,用于将所述第一图像区域中的像素点阵与所述第二图像区域中的像素点阵进行比对,判断所述第一图像区域中的像素点阵与所述第二图像区域中的像素点阵是否一致;
第三判定模块2130,用于当判断的结果为不一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域不同;
第四判定模块2140,用于当判断的结果为一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域相同;
像素点阵比对结果确定模块2150,用于将判断的结果作为所述当前待比对区域对应的像素点阵比对结果;
第二重复模块2160,用于确定当前待比对区域的下一待比对区域为当前待比对区域,重复执行图像区域确定以及像素点阵比对的步骤,直至遍历完所述页面结构图中的各待比对区域;
第二更新区域信息确定模块2170,用于基于与各待比对区域对应的所述像素点阵比对结果,确定所述目标更新页面相对于所述原页面的第二更新区域信息。
请参见图22,所述更新检测结果确定模块1660包括:
区域合并模块2210,用于计算所述第一更新区域信息对应的待比对区域与所述第二更新区域信息对应的待比对区域的并集,得到待标注区域集合;
区域标注模块2220,用于基于所述待标注区域集合中的各待标注区域,在所述目标更新页面的相应区域进行标注及展示。
上述实施例中提供的装置可执行本申请任意实施例所提供方法,具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节,可参见本申请任意实施例所提供的方法。
本实施例还提供了一种计算机可读存储介质,所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行如本实施例上述任一方法。
本实施例还提供了一种设备,其结构图请参见图23,该设备2300可因配置或性能不同而产生比较大的差异,可以包括一个或一个以上中央处理器(central processingunits,CPU)2322(例如,一个或一个以上处理器)和存储器2332,一个或一个以上存储应用程序2342或数据2344的存储介质2330(例如一个或一个以上海量存储设备)。其中,存储器2332和存储介质2330可以是短暂存储或持久存储。存储在存储介质2330的程序可以包括一个或一个以上模块(图示未示出),每个模块可以包括对设备中的一系列指令操作。更进一步地,中央处理器2322可以设置为与存储介质2330通信,在设备2300上执行存储介质2330中的一系列指令操作。设备2300还可以包括一个或一个以上电源2326,一个或一个以上有线或无线网络接口2350,一个或一个以上输入输出接口2358,和/或,一个或一个以上操作系统2341,例如Windows ServerTM,Mac OS XTM,UnixTM,LinuxTM,FreeBSDTM等等。本实施例上述的任一方法均可基于图23所示的设备进行实施。
本说明书提供了如实施例或流程图所述的方法操作步骤,但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤和顺序仅仅为众多步骤执行顺序中的一种方式,不代表唯一的执行顺序。在实际中的系统或中断产品执行时,可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。
本实施例中所示出的结构,仅仅是与本申请方案相关的部分结构,并不构成对本申请方案所应用于其上的设备的限定,具体的设备可以包括比示出的更多或更少的部件,或者组合某些部件,或者具有不同的部件的布置。应当理解到,本实施例中所揭露的方法、装置等,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述模块的划分仅仅为一种逻辑功能的划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元模块的间接耦合或通信连接。
基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,RandomAccess Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
本领域技术人员还可以进一步意识到,结合本说明书所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、计算机软件或者二者的结合实现,为了清楚地说明硬件和软件的可互换性,在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但这种实现不应认为超出本申请的范围。
以上所述,以上实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (10)

1.一种页面更新检测方法,其特征在于,包括:
确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型;
基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图;其中,所述页面结构图中包括至少一个待比对区域;
将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息;其中,所述第一结构信息为从所述目标文档对象模型中获取的与所述待比对区域对应的结构信息,所述第二结构信息为从所述原文档对象模型中获取的与所述待比对区域对应的结构信息;
获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图;
对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息;
基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果。
2.根据权利要求1所述的一种页面更新检测方法,其特征在于,所述基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图包括:
对所述目标文档对象模型进行元素分析,得出所述目标更新页面中各元素之间的总体层级关系;
从所述总体层级关系中确定与所述预设的页面结构深度对应的第一层级关系;
根据所述第一层级关系确定与所述目标更新页面对应的页面结构图。
3.根据权利要求1所述的一种页面更新检测方法,其特征在于,所述将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息包括:
确定所述页面结构图中的当前待比对区域;
获取与当前待比对区域对应的第一结构信息以及第二结构信息;
将所述第一结构信息和所述第二结构信息进行比对,得到结构信息比对结果;
确定当前待比对区域的下一待比对区域为当前待比对区域,重复执行当前待比对区域确定、结构信息获取以及结构信息比对的步骤,直至遍历完所述页面结构图中的各待比对区域;
基于与各待比对区域对应的所述结构信息比对结果,确定所述目标更新页面相对于所述原页面的第一更新区域信息。
4.根据权利要求3所述的一种页面更新检测方法,其特征在于,所述将所述第一结构信息和所述第二结构信息进行比对,得到结构信息比对结果包括:
判断所述第一结构信息和所述第二结构信息是否一致;
当判断的结果为不一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域不同;
当判断的结果为一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域相同;
将判断的结果作为所述当前待比对区域对应的结构信息比对结果。
5.根据权利要求4所述的一种页面更新检测方法,其特征在于,所述基于与各待比对区域对应的所述结构信息比对结果,确定所述目标更新页面相对于所述原页面的第一更新区域信息包括:
基于各待比对区域对应的结构信息比对结果,确定所述各待比对区域中判断结果为不一致的待比对区域;
将一致性比对的结果为不一致的待比对区域作为所述第一更新区域信息。
6.根据权利要求5所述的一种页面更新检测方法,其特征在于,所述对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息包括:
确定当前待比对区域在所述目标更新页面中所对应的第一图像区域,以及确定当前待比对区域在所述原页面中所对应的第二图像区域;
将所述第一图像区域中的像素点阵与所述第二图像区域中的像素点阵进行比对,判断所述第一图像区域中的像素点阵与所述第二图像区域中的像素点阵是否一致;
当判断的结果为不一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域不同;
当判断的结果为一致时,判定当前待比对区域在所述目标更新页面中的对应区域与当前待比对区域在所述原页面中的对应区域相同;
将判断的结果作为所述当前待比对区域对应的像素点阵比对结果;
确定当前待比对区域的下一待比对区域为当前待比对区域,重复执行图像区域确定以及像素点阵比对的步骤,直至遍历完所述页面结构图中的各待比对区域;
基于与各待比对区域对应的所述像素点阵比对结果,确定所述目标更新页面相对于所述原页面的第二更新区域信息。
7.根据权利要求6所述的一种页面更新检测方法,其特征在于,所述基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果包括:
计算所述第一更新区域信息对应的待比对区域与所述第二更新区域信息对应的待比对区域的并集,得到待标注区域集合;
基于所述待标注区域集合中的各待标注区域,在所述目标更新页面的相应区域进行标注及展示。
8.一种页面更新检测装置,其特征在于,包括:
文档对象模型确定模块,用于确定目标更新页面对应的目标文档对象模型,以及所述目标更新页面的原页面对应的原文档对象模型;
页面结构图获取模块,用于基于预设的页面结构深度以及所述目标文档对象模型,获取与所述目标更新页面对应的页面结构图;其中,所述页面结构图中包括至少一个待比对区域;
结构信息比对模块,用于将各待比对区域所对应的第一结构信息以及第二结构信息进行比对,得到所述目标更新页面相对于所述原页面的第一更新区域信息;其中,所述第一结构信息为从所述目标文档对象模型中获取的与所述待比对区域对应的结构信息,所述第二结构信息为从所述原文档对象模型中获取的与所述待比对区域对应的结构信息;
页面截图获取模块,用于获取所述目标更新页面的第一页面截图,以及获取所述原页面的第二页面截图;
像素比对模块,用于对所述第一页面截图和所述第二页面截图进行像素比对,得到所述目标更新页面相对于所述原页面的第二更新区域信息;
更新检测结果确定模块,用于基于所述第一更新区域信息和所述第二更新区域信息,确定所述目标更新页面相对于所述原页面的更新检测结果。
9.一种设备,其特征在于,所述设备包括处理器和存储器,所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至7任一项所述的页面更新检测方法。
10.一种计算机存储介质,其特征在于,所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集,所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行如权利要求1至7任一项所述的页面更新检测方法。
CN201910802227.0A 2019-08-28 2019-08-28 一种页面更新检测方法、装置、设备及存储介质 Active CN112445693B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910802227.0A CN112445693B (zh) 2019-08-28 2019-08-28 一种页面更新检测方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910802227.0A CN112445693B (zh) 2019-08-28 2019-08-28 一种页面更新检测方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN112445693A true CN112445693A (zh) 2021-03-05
CN112445693B CN112445693B (zh) 2024-05-10

Family

ID=74742388

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910802227.0A Active CN112445693B (zh) 2019-08-28 2019-08-28 一种页面更新检测方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN112445693B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113254984A (zh) * 2021-07-15 2021-08-13 天聚地合(苏州)数据股份有限公司 网页监控方法、装置、存储介质及设备
CN113627320A (zh) * 2021-08-09 2021-11-09 东云睿连(武汉)计算技术有限公司 一种基于计算机视觉的工程图纸比对装置和方法
CN114706796A (zh) * 2022-06-07 2022-07-05 广州易方信息科技股份有限公司 基于DOM树结构的UI自动化diff断言方法及装置
CN114741632A (zh) * 2022-03-31 2022-07-12 网易有道信息技术(北京)有限公司 用于对网页中关键字进行展示的方法及其相关产品

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103853656A (zh) * 2012-11-30 2014-06-11 阿里巴巴集团控股有限公司 网页测试方法和装置
US20150347276A1 (en) * 2014-05-27 2015-12-03 International Business Machines Corporation Screenshot validation testing
CN107315682A (zh) * 2017-06-22 2017-11-03 北京凤凰理理它信息技术有限公司 测试浏览器兼容方法、装置、存储介质及电子设备
CN107562600A (zh) * 2017-08-23 2018-01-09 广州阿里巴巴文学信息技术有限公司 页面检测方法、装置、计算设备以及存储介质
CN108491331A (zh) * 2018-04-13 2018-09-04 平安普惠企业管理有限公司 软件测试方法、装置、设备和计算机存储介质
US20190042397A1 (en) * 2017-08-04 2019-02-07 Sap Se Accessibility testing software automation tool

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103853656A (zh) * 2012-11-30 2014-06-11 阿里巴巴集团控股有限公司 网页测试方法和装置
US20150347276A1 (en) * 2014-05-27 2015-12-03 International Business Machines Corporation Screenshot validation testing
CN107315682A (zh) * 2017-06-22 2017-11-03 北京凤凰理理它信息技术有限公司 测试浏览器兼容方法、装置、存储介质及电子设备
US20190042397A1 (en) * 2017-08-04 2019-02-07 Sap Se Accessibility testing software automation tool
CN107562600A (zh) * 2017-08-23 2018-01-09 广州阿里巴巴文学信息技术有限公司 页面检测方法、装置、计算设备以及存储介质
CN108491331A (zh) * 2018-04-13 2018-09-04 平安普惠企业管理有限公司 软件测试方法、装置、设备和计算机存储介质

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113254984A (zh) * 2021-07-15 2021-08-13 天聚地合(苏州)数据股份有限公司 网页监控方法、装置、存储介质及设备
CN113627320A (zh) * 2021-08-09 2021-11-09 东云睿连(武汉)计算技术有限公司 一种基于计算机视觉的工程图纸比对装置和方法
CN113627320B (zh) * 2021-08-09 2023-09-26 东云睿连(武汉)计算技术有限公司 一种基于计算机视觉的工程图纸比对装置和方法
CN114741632A (zh) * 2022-03-31 2022-07-12 网易有道信息技术(北京)有限公司 用于对网页中关键字进行展示的方法及其相关产品
CN114706796A (zh) * 2022-06-07 2022-07-05 广州易方信息科技股份有限公司 基于DOM树结构的UI自动化diff断言方法及装置

Also Published As

Publication number Publication date
CN112445693B (zh) 2024-05-10

Similar Documents

Publication Publication Date Title
CN112445693B (zh) 一种页面更新检测方法、装置、设备及存储介质
CN107992427B (zh) 创建业务测试场景的方法、装置、设备及其存储介质
CN107480039B (zh) 一种分布式存储系统的小文件读写性能测试方法及装置
CN107025174B (zh) 用于设备的用户界面异常测试的方法、装置和可读储介质
CN104252410A (zh) 一种对页面中的控件进行测试的方法和设备
CN109471805B (zh) 资源测试方法及装置、存储介质、电子设备
US10613707B2 (en) Auditing icons via image recognition to provide individualized assets to software project teams
CN109783388A (zh) Ui自动化测试方法、装置及电子设备
CN110825651A (zh) 网页兼容性测试方法、装置、系统及存储介质
CN110750458A (zh) 大数据平台测试方法、装置、可读存储介质及电子设备
US20220206923A1 (en) Operation logs visualization device, operation logs visualization method and operation logs visualization program
JP2013084259A (ja) ウェブ・ブラウザー画面の段階的な視覚的比較
CN113868126A (zh) 应用调试方法、装置、设备的存储介质
GB2541250A (en) Method of, and apparatus for, creating reference images for an automated test of software with a graphical user interface.
CN107193747B (zh) 代码测试方法、装置和计算机设备
CN110765015A (zh) 一种对被测应用进行测试的方法和电子设备
CN112306495A (zh) 图片校验方法、装置、计算机设备及计算机可读存储介质
CN113018870A (zh) 一种数据处理方法、装置及计算机可读存储介质
CN112615873A (zh) 物联网设备安全检测方法、设备、存储介质及装置
CN110633220A (zh) 调试信息显示方法、装置、存储介质及电子设备
CN111597102A (zh) 一种页面性能的测试方法、终端及存储介质
JP6505849B2 (ja) 要素識別子の生成
CN113496454A (zh) 图像的处理方法、装置、计算机可读介质及电子设备
US20230060213A1 (en) System and method for generating automation test scripts dynamically for human machine interface testing
CN113254338B (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
GR01 Patent grant
GR01 Patent grant