CN106294513B - 网页显示一致性检测方法和装置 - Google Patents
网页显示一致性检测方法和装置 Download PDFInfo
- Publication number
- CN106294513B CN106294513B CN201510319444.6A CN201510319444A CN106294513B CN 106294513 B CN106294513 B CN 106294513B CN 201510319444 A CN201510319444 A CN 201510319444A CN 106294513 B CN106294513 B CN 106294513B
- Authority
- CN
- China
- Prior art keywords
- page
- display parameters
- result
- webpage
- screenshot
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000001514 detection method Methods 0.000 claims description 13
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 238000012360 testing method Methods 0.000 description 5
- 235000013399 edible fruits Nutrition 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 241000208340 Araliaceae Species 0.000 description 3
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 3
- 235000003140 Panax quinquefolius Nutrition 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 235000008434 ginseng Nutrition 0.000 description 3
- 244000097202 Rathbunia alamosensis Species 0.000 description 2
- 235000009776 Rathbunia alamosensis Nutrition 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明的网页显示一致性检测方法和装置，在获取网页内容后，在第一显示参数下显示所述网页，生成第一页面结果；在第二显示参数下显示所述网页，生成第二页面结果；然后将所述第二页面结果与所述第一页面结果比较，发现满足预设条件，确定所述网页显示是一致的能够检测出同一个浏览器在不同显示参数下渲染同一网页一致。本发明能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
Description
技术领域
本发明涉及互联网技术领域，具体而言，涉及网页显示一致性检测方法和装置。
背景技术
目前Web2.0技术已经非常成熟，所以Web应用程序开发已经成为了当前软件开发的主力军。现在很多应用都进行了互联网web化。为了保证用户显示一致性，在进行web化后，进行web页面的界面测试是必须要做的工作。在进行界面测试时Web的界面布局测试、多浏览器测试等都成为的最难解决的问题。其中，需要进行多浏览器测试的主要原因是，目前市场上进行web显示的浏览器会使用各种浏览器内核，例如：当前常见的内核：Trident、Gecko、Presto、Webkit、Blink，而不同内核的浏览器在进行同一个网页页面渲染时可能会导致显示不一致，另外，由于css语言本身或者在使用css时也可能会导致同一个浏览器渲染同一web页面出现显示不一致，所以需要对web页面进行同一网页使用不同内核的浏览器进行渲染显示的一致性测试。而现有技术中没有对这个问题的解决方案。
发明内容
有鉴于此，本发明实施例的目的在于提供一种网页显示一致性检测方法、装置和系统，能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
本发明的一种网页显示一致性检测方法，包括：
获取待检测网页的网页内容；
在第一显示参数下显示所述网页，生成第一页面结果；
在第二显示参数下显示所述网页，生成第二页面结果；
将所述第二页面结果与所述第一页面结果中相同网页内容区域比较，发现两者相似度大于预设阈值，则确定所述网页显示一致。
其中，在第一显示参数下显示所述网页，生成第一页面结果，包括：
在第一显示参数下显示所述网页，对所述页面内容区域进行截图和/或拼图以生成第一页面结果；
其中，在第二显示参数下显示所述网页，生成第二页面结果包括：
在第二显示参数下显示所述网页，对所述页面内容区域截图和/或拼图以生成第二页面结果。
其中，还包括：当所述第一显示参数大于所述第二显示参数时，根据所述第一显示参数与第二显示参数比例关系，对所述第二显示参数下显示的网页执行大于1次截图，对所有截图进行拼图生成所述第二页面结果。
其中，还包括：当所述第一显示参数小于所述第二显示参数时，根据所述第一显示参数与所述第二显示参数比例关系，对所述第一显示参数下显示的网页执行大于1次截图，对所有截图进行拼图生成所述第一页面结果。
其中，还包括：记录每次截图页面区域位置，根据页面区域位置进行拼图。
其中，在对截图进行拼接前，还包括：对所述截图进行对齐、裁剪处理。
另一方面本发明还提供一种网页显示一致性检测装置，包括：
内容获取单元，用于获取待检测网页的网页内容；
第一结果生成单元，用于在第一显示参数下显示所述网页，生成第一页面结果；
第二结果生成单元，用于在第二显示参数下显示所述网页，生成第二页面结果；
一致性确定单元，用于将所述第二页面结果与所述第一页面结果中相同网页内容区域比较，发现两者相似度大于预设阈值，确定网页显示一致。
其中，所述第一结果生成单元，包括：第一截图模块，用于在所述第一显示参数下显示所述网页，对所述页面内容区域截图；其中，所述第二结果生成单元包括：第二截图模块，用于在所述第二显示参数下显示所述网页，对所述页面内容区域截图。
其中，所述第一结果生成单元，还包括：第一拼接模块，用于将在第一显示参数下的所有截图进行拼接以生成第一页面结果。
其中，所述第二结果生成单元，还包括：第二拼接模块，用于将在第二显示参数下的所有截图进行拼接以生成第二页面结果。
其中，所述一致性确定单元，还包括：比较模块，用于将将所述第二页面结果与所述第一页面结果比较得出是否满足预设条件的比较结果。
本发明的网页显示一致性检测方法和装置，在获取网页内容后，在第一显示参数下显示所述网页，生成第一页面结果；在第二显示参数下显示所述网页，生成第二页面结果；然后将所述第二页面结果与所述第一页面结果比较，发现满足预设条件，确定所述网页显示是一致的能够检测出同一个浏览器在不同显示参数下渲染同一网页一致。能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1示出了本发明实施例所提供的网页显示一致性检测方法的流程图；
图2示出了本发明的实施例的一个网页展示示例图；
图3示出了本发明另一个实施例所提供的网页显示一致性检测方法的流程图；
图4a－图4d示出了多次截图的示例；
图5a－图5d示出了多次截图的另一示例；
图6示出了本发明实施例提供的网页显示一致性检测装置的框架图；
图7示出了本发明另一实施例提供的网页显示一致性检测装置的第一生成模块的方框图；
图8示出了本发明另一实施例提供的网页显示一致性检测装置的第二生成模块的方框图。
具体实施方式
下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明的网页显示一致性检测方法，在获取网页内容后，在第一显示参数下显示所述网页，生成第一页面结果；在第二显示参数下显示所述网页，生成第二页面结果；然后将所述第二页面结果与所述第一页面结果中相同网页内容区域比较，发现两者相似度大于预设阈值，则确定所述网页显示一致。本发明能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
下面通过实施例进行描述。
图1示出了本发明实施例所提供的网页显示一致性检测方法的流程图。
如图1所示，本实施例一种网页显示一致性检测方法，包括：
S100：获取待检测网页的网页内容。
浏览器向网络服务器发送网络请求。网络服务器响应浏览器的请求，返回请求网页的网络数据。例如：浏览器向网络发起访问www.sina.com.cn的请求。新浪网络服务器会响应浏览器请求，返回www.sina.com.cn网页对应的网页内容数据。在优选实施方式中还包括存储本步骤获取的待检测网页的网页内容。
S110：在第一显示参数下显示所述网页，生成第一页面结果。
通常情况下，浏览器都有一个默认显示参数。通常的默认是浏览器在全屏下显示网页。默认显示参数跟显示设备的物理大小相关。本实施例不限定第一显示参数的值，第一显示参数的上限值为显示设备的最大物理大小。
优先实施方式中第一显示参数是全屏大小。
浏览器在第一显示参数显示所述网页。这里是根据S100中获取的网页数据来显示所述网页。在优选实施方式中，本步骤生成的第一页面结果为在第一显示参数下的页面区域构成的页面结果，不包含浏览器的工具栏等边框的内容区域。
S120：在第二显示参数下显示所述网页，生成第二页面结果。
本实施例的第二显示参数与第一显示参数不同。第二显示参数的上限值为显示设备的最大物理大小。本步骤的网页数据来源于S100获得的数据，不再进行网页数据的获取动作。
在优选实施方式中，第二显示参数是第一显示参数的整数倍。例如：2、4、8倍。
同样，在另一优选实施方式中，第一显示参数是第二显示参数的整数倍。例如：2、4、8倍。
S130：将所述第二页面结果与所述第一页面结果中相同网页内容区域比较，发现两者相似度大于预设阈值，则确定所述网页显示一致，否则确定所述网页显示是不一致的。
由于第二显示参数与第一显示参数不同，所以生成的第一页面结果和第二页面结果也不同。所以在本实施例的S130中，在进行比较时仅仅比较相同网页内容区域的内容。即当相同区域的内容相似度达到预设阈值则确定所述网页显示是一致的，否则确定所述网页显示是不一致的。在进行内容相似度比较时需要对网页的色彩，文字内容，页面布局等内容都进行比较。
图2示出了本发明的实施例的一个网页展示示例图。
如图2所示，当第一显示参数为在全屏下显示www.sina.com.cn，网页内容区域的大小为1004＊594，第一页面结果为图2整副图的内容区域。当第二显示参数为第一显示参数的1/4时，此时第二页面结果仅仅为图2中标号为1的内容区域，即(0，297)－(502，594)这一内容区域。
此时在进行第一页面结果与第二页面结果比较时，仅仅比较区域1的内容，如果第一页面结果的区域1的内容与第二页面结果的相似度达到预设阈值时，则确定所述网页显示是一致的，否则，确定所述网页显示是不一致的。
本领域技术人员可以知道，本实施例设置的第一显示参数和第二显示参数是网页的具体大小，本发明并不局限于是设置的网页具体大小，可以是显示比例。例如：可以将浏览器的第一次显示的第一显示参数为全屏，而第二显示参数为1/4的全屏大小。
本实施例提供的网页显示一致性检测方法，在获取到待检测网页的网页内容后，在第一显示参数下显示所述网页，生成第一页面结果；在第二显示参数下显示所述网页，生成第二页面结果；然后将所述第二页面结果与所述第一页面结果比较，满足预设条件，则确定所述网页显示是一致的。能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
本实施例能够实现由于css语言本身或者在使用css时会导致同一个浏览器不同显示参数下显示同一web页面也会出现显示不一致的问题。实现同一个浏览器在不同显示参数下渲染同一网页是否一致的测试。
图3示出了本发明另一个实施例所提供的网页显示一致性检测方法的流程图。
如图3所示，本实施例的网页显示一致性检测方法，包括：
S300，获取待检测网页的网页内容。
本步骤可以参考前一实施例的S100的实现方式。
S301，设置第一显示参数，在第一显示参数下显示所述网页。
通常情况下，浏览器都有一个默认显示参数。通常的默认是浏览器在全屏下显示网页。默认显示参数跟显示设备的物理大小相关。本实施例不限定第一显示参数的值，第一显示参数的上限值为显示设备的最大物理大小。
优先实施方式中第一显示参数是全屏。这里是根据S300中获取的网页数据来显示所述网页。
S302，对页面内容区域截图以生成第一页面结果。
本步骤生成的第一页面结果为在第一显示参数下的页面区域构成的页面结果，不包含浏览器的工具栏等边框的内容区域。也就是在第一显示参数下的页面区域进行截图，并保存截图，所述截图为第一页面结果。如图2所示，全图即对在全屏情况下的页面区域截图。
S303，设置小于第一显示参数的第二显示参数，在第二显示参数下显示所述网页。
第二显示参数为小于第一显示参数的值。本步骤可以通过浏览器自动设置第二实现大小。假设为全屏的1/4大小，此时浏览器在第二显示参数下每次显示的页面区域为第一显示参数的1/4大小。
本实施例中，对于同一url的网页进行测试时，只请求一次网页内容，即第二次只是改变显示比例，而不是重新向服务器发起请求。因为对于动态页面，每次请求返回的结果可能会不一样，如果请求两次，则网页内容很有可能不同，不能进行比较。
S304，根据第一显示参数与第二显示参数比例关系，对所述第二显示参数下显示的网页执行大于1次截图。。
由于第二显示参数为小于第一显示参数的值。所以本步骤在进行1次截图后的页面区域大小会小于第一显示参数的页面区域。所以本步骤可以重复进行多次截图，每次截不同的网页区域。例如：假设第一显示参数为全屏下的网页区域截图。第二显示参数为第一显示参数的1/4大小。则本步骤需要进行4次截图。如图4a，图4b，图4c，图4d所示。由于浏览器在每次显示时都可以自动记录本次显示的网页区域，所以本步骤可以自动的进行四次截图。例如，第一显示参数为1004＊594的网页。在第二显示参数下，即第一显示参数的1/4大小下，需要进行4次网页区域截图。第1次截图网页区域为(0，297)－(502，594)，第2次截图网页区域为(502，297)－(1004，594)，第3次截图网页区域为(0，0)－(502，297)，第4次截图网页区域为(502，0)－(297，1004)。
S305，对所有截图进行拼图生成第二页面结果。
将在第二显示比例下的所有截图进行拼接以生成第二页面结果。即将上面的4次截图进行拼接以生成第二页面结果。例如：将图4a，图4b，图4c，图4d进行拼接，生成第二页面结果。
这里的拼图使用是现有的拼图技术。
优选实施方式中，在S304浏览器记录每次截图页面区域位置。S305，根据页面区域位置进行拼图。
也就是说可以先截大图即包含的网页内容区域多的图，然后多次截取小图即网页内容区域少的图。也可以先进行小图的多次截取，再截取大图。先后顺序不做限制。显示窗口的大小可以预先设置。根据预先设置的参数进行截图即可。
S306，将所述第二页面结果与所述第一页面结果比较。
第二页面结果为在第二显示参数下经过多次截图后，拼接而成的网页截图。
所以在优选实施方式中，在S304进行页面区域截图时，经过多次截图的网页区域需要全面覆盖第一显示参数下的页面区域。如图5a－图5c所示，不同的截图之间会有会有交叉内容，图中的粗线外面区域内容即为交叉内容，也就是边界的页面区域可能会同时被几次截图。在拼接前，优先实施方式是将图片进行对齐、以及剪裁处理，即对图5a－图5c所示的4副图进行对齐处理，对粗线以外的重复区域进行裁剪。
S307，判断比较结果，相似度大于预设阈值，则确定所述网页显示是一致(S308)，否则确定所述网页显示不一致(S309)。这里预设阈值为85％－95％范围，优选为90％，但不局限于此。
本实施例提供的网页显示一致性检测方法，在获取到待检测网页的网页内容后，在第一显示参数下显示所述网页，然后通过截图方式生成第一页面结果；在第二显示参数下显示所述网页，然后通过截图方式生成第二页面结果；然后将所述第二页面结果与所述第一页面结果比较，满足预设条件，则确定所述网页显示是一致的。能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
本领域技术人员可以知道，前面实施例是将第二显示参数设置成小于第一显示参数。所以第二页面结果的生成需要进行多次截图然后进行拼接。同理可以将第二显示参数设置成大于第一显示参数，第一页面结果的生成需要进行多次截图然后进行拼接。然后将拼接而成的第一页面结果与只进行过1次截图的第二页面结果进行比较。也就是当将第二显示参数设置成大于第一显示参数时，S301，S302的过程和S304，S305的过程调换。
在优选实施方式中，根据第二显示参数与第一显示参数的关系，可以在生成第一页面结果时进行多次页面截图，然后经过拼接生成第一页面结果。在第二页面结果生成时也进行多次截图，然后进过拼接生成第二页面结果。
图6示出了本发明实施例提供的网页显示一致性检测装置的框架图。
如图6所示，本实施例的网页显示一致性检测装置包括：
内容获取单元600，用于获取待检测网页的网页内容。
浏览器的内容获取单元600向网络服务器发送网络请求。网络服务器响应内容获取单元600的请求，返回请求网页的网络数据。例如：浏览器向网络发起访问www.sina.com.cn的请求。新浪网络服务器会响应浏览器请求，返回www.sina.com.cn网页对应的网页内容数据。在优选实施方式中还包括存储单元(图中未示出)存储内容获取单元600获取的待检测网页的网页内容。
第一结果生成单元610，用于在第一显示参数下显示所述网页，生成第一页面结果。优选实施方式中，第一结果生成单元610，包括：第一显示模块611、第一生成模块612。第一显示模块611，用于设置第一显示参数，在第一显示参数下显示所述网页。第一生成模块612，用于根据显示模块611显示的网页区域生成第一页面结果。
通常情况下，浏览器都有一个默认显示参数。通常的默认是浏览器在全屏下显示网页。默认显示参数跟显示设备的物理大小相关。本实施例不限定第一显示参数的值，第一显示参数的上限值为显示设备的最大物理大小。
优先实施方式中第一显示参数是全屏。
浏览器在第一显示参数显示所述网页。这里是根据内容获取单元600获取的网页数据来显示所述网页。在优选实施方式中，第一生成模块610生成的第一页面结果为在第一显示参数下的页面区域构成的页面结果，不包含浏览器的工具栏等边框的内容区域。
第二结果生成单元620，用于在第二显示参数下显示所述网页，生成第二页面结果。优选实施方式中，第二结果生成单元620，包括：第二显示模块621、第二生成模块622。第二显示模块621，用于在第二显示参数下显示所述网页。第二生成模块622，用于根据第二显示模块621显示的网页区域生成第二页面结果。
本实施例的第二显示参数与第一显示参数不同。第二显示参数的上限值为显示设备的最大物理大小。显示模块621的网页数据来源于内容获取单元600获得的数据，不重复进行网页数据的获取，为了防止动态网页或者其它原因导致网页布局的变化。
在优选实施方式中，第二显示参数是第一显示参数的整数倍。例如：2、4、8倍。
在优选实施方式中，第一显示参数是第二显示参数的整数倍。例如：2、4、8倍。
一致性确定单元630，用于将所述第二页面结果与所述第一页面结果比较，发现满足预设条件，确定所述网页显示是一致的。
在优选实施方式中，一致性确定单元630，还包括比较模块631和确定模块632。
比较模块631，用于将所述第二页面结果与所述第一页面结果比较。
判断模块632，用于根据比较模块的比较结果，发现满足预设条件，确定所述网页显示是一致的。
由于第二显示参数与第一显示参数不同，所以第一结果生成单元610生成的第一页面结果和第二结果生成单元620生成的第二页面结果也不同。所以在本实施例一致性确定单元630的比较模块631在进行比较时仅仅比较相同区域的内容。在优先实施方式中，判断模块632，在比较模块631比较出相同区域的内容相似度达到预设阈值，则确定所述网页显示是一致的，否则，确定所述网页显示是不一致的。在进行内容相似度比较时需要对网页的色彩，文字内容，页面布局等内容都进行比较。
如图2所示，当第一显示参数为在全屏下显示www.sina.com.cn，网页内容区域的大小为1004＊594，第一页面结果为图2整副图的内容区域。当第二显示参数为第一显示参数的1/4时，此时第二页面结果仅仅为图2中标号为1的内容区域，即(0，297)－(502，594)这一内容区域。
此时一致性确定单元630的比较模块631在进行第一页面结果与第二页面结果比较时，仅仅比较区域1的内容，如果第一页面结果的区域1的内容与第二页面结果的相似度达到预设阈值时，则判断模块632确定所述网页显示是一致的，否则，确定所述网页显示是不一致的。在进行内容相似度比较时需要对网页的色彩，文字内容，页面布局等内容都进行比较。
本实施例提供的网页显示一致性检测装置，内容获取单元在获取到待检测网页的网页内容后，由第一结果生成单元在第一显示参数下显示所述网页，生成第一页面结果；然后，由第二结果生成单元在第二显示参数下显示所述网页，生成第二页面结果；最后，一致性确定单元将所述第二页面结果与所述第一页面结果比较，满足预设条件，则确定所述网页显示是一致的。能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
图7示出了本发明另一实施例提供的网页显示一致性检测装置的第一生成模块的方框图。
图8示出了本发明另一实施例提供的网页显示一致性检测装置的第二生成模块的方框图。
如图7、图8所示，本实施例与图6所示的实施例不同之处在于其中，第一结果生成单元610的第一生成模块612还包括第一截图模块6121和/或第一拼接模块6122。第二结果生成单元620的第二生成模块622还包括第二截图模块6221和/或第二拼接模块6222。
第一截图模块6121，用于对第一显示模块611显示的网页区域进行截图。
第一拼接模块6122，用于当第一截图模块6121对页面区域进行多次截图后，对第一截图模块6121所有截图进行拼接生成第一页面结果。当第一截图模块6121对页面区域进行1次截图时，第一拼接模块6122不工作，此时，第一截图模块6121所截的1副图为第一页面结果。
第二截图模块6221，用于对第二显示模块621显示的网页区域进行截图。
第二拼接模块6222，用于当第二截图模块6221对页面区域进行多次截图后，对第二截图模块6221所有截图进行拼接生成第二页面结果。当第二截图模块6221对页面区域进行1次截图时，第二拼接模块6222不工作，此时，第二截图模块6221所截的1副图为第二页面结果。
在优选实施方式中还包括对齐单元(图中未示出)和/或剪裁单元(图中未示出)。对齐单元用于在第一拼接模块6122或第二拼接模块6222在进行图片拼接前，将待拼接图片进行对齐处理。
剪裁单元，用于在第一拼接模块6122或第二拼接模块6222在进行图片拼接前，对齐单元将待拼接图片进行对齐处理后，将重复的页面区域进行剪裁处理。
下面以示例来说明图7所述装置的工作原理和工作过程。
首先，内容获取单元600获取待检测网页的网页内容。内容获取单元600工作原理可以参考前一实施例的S100的实现方式。之后，第一结果生成单元610的第一显示模块611设置第一显示参数，且在第一显示参数下显示所述网页。通常情况下，浏览器都有一个默认显示参数。通常的默认是浏览器在全屏下显示网页。默认显示参数跟显示设备的物理大小相关。本实施例不限定第一显示参数的值，第一显示参数的上限值为显示设备的最大物理大小。本示例中第一显示参数是全屏。
待第一显示模块显示全屏显示页面后，第一截图模块6121对页面内容区域截图，根据第一截图模块6121的截图生成第一页面结果。此时生成的第一页面结果为在全屏下的页面内容区域构成的页面结果，不包含页面内容区域以外的但是显示在屏幕上的工具栏、历史栏等边框的区域。也就是在全屏下的页面内容区域进行截图，并保存截图，所述截图为第一页面结果。如图2所示，图2全图即对在全屏情况下的页面区域截图，该图即为第一页面结果。
然后，由第二结果生成单元620的第二显示模块621，设置小于第一显示参数的第二显示参数，在第二显示参数下显示所述网页。第二显示参数为小于第一显示参数的值。第二显示模块621可以通过浏览器自动设置第二实现大小。假设为全屏的1/4大小，此时浏览器在第二显示参数下每次显示的页面区域为第一显示参数的1/4大小。本次第二显示模块621所显示的网页的数据来源依然是内容获取单元600所获取的待检测网页的网页内容。
第二显示模块621完成在第二显示参数下显示待检测网页后，由第二截图模块6221对所述页面内容区域对所述页面内容区域进行大于1次截图。假设本示例中第二显示模块621显示的页面区域大小为1/4全屏。那么本示例第二截图模块6221对页面进行4次截图。
由于第二显示参数为小于第一显示参数的值。所以第二截图模块6221在进行1次截图后的页面区域大小会小于第一显示参数的页面区域。所以第二截图模块6221可以重复进行多次截图，每次截不同的网页区域。例如：假设第一显示参数为全屏下的网页区域截图。第二显示参数为第一显示参数的1/4大小。则第二截图模块6221需要进行4次截图。如图4a，图4b，图4c，图4d所示。由于浏览器在每次显示时都可以自动记录本次显示的网页区域，所以第二截图模块6221可以自动的进行四次截图。例如，第一显示参数为1004＊594的网页。在第二显示参数下，即第一显示参数的1/4大小下，需要进行4次网页区域截图。第二截图模块6221第1次截图网页区域为(0，297)－(502，594)，第2次截图网页区域为(502，297)－(1004，594)，第3次截图网页区域为(0，0)－(502，297)，第4次截图网页区域为(502，0)－(297，1004)。
然后，由第二拼接模块6222对4副图进行拼接，拼接成1副待比较的图片即第二页面结果。例如：将图4a，图4b，图4c，图4d进行拼接。这里的拼图使用是现有的拼图技术。
第二页面结果为在第二显示参数下经过多次截图后，拼接而成的网页截图。所以在优选实施方式中，第二截图模块6221进行页面区域截图时，经过多次截图的网页区域需要全面覆盖第一显示参数下的页面区域，然后经过对齐模块对图片进行对齐、以及剪裁模块对图片进行剪裁处理，即由剪裁模块对粗线以外的内容区域进行裁剪之后再进行拼接。如图5a－图5c所示，不同的截图之间会有会有交叉内容，即粗线以外的页面区域，也就是边界的页面区域可能会同时被几次截图。在第二拼接模块6222进行拼接前，经过对齐模块对图片进行对齐、以及剪裁模块对图片进行剪裁处理，即由剪裁模块对粗线以外的内容区域进行裁剪之后再由第二拼接模块6222进行拼接生成第二页面结果。
然后，由一致性确定单元630的比较模块631将所述第二页面结果与所述第一页面结果比较。最后，判断模块632，在比较模块631比较出相同区域的内容相似度达到预设阈值95％，则确定所述网页显示是一致的，否则，确定所述网页显示是不一致的。
本实施例提供的网页显示一致性检测装置，内容获取单元在获取到待检测网页的网页内容后，在完成全屏显示后，由第一截图模块对网页进行截图，生成第一页面结果；然后，在第二显示参数下显示所述网页，由第二截图模块对页面进行多次截图后，由拼接模块进行拼接生成第二页面结果；最后，一致性确定单元将所述第二页面结果与所述第一页面结果比较，满足预设条件，则确定所述网页显示是一致的。能够检测出同一个浏览器在不同显示参数下渲染同一网页是否一致。
附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
本发明实施例还提供了进行网页显示一致性检测方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read－Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。
Claims (11)
1.一种网页显示一致性检测方法，其特征在于，所述方法包括：
获取待检测网页的网页内容；
在第一显示参数下显示所述网页，生成第一页面结果；
在同一浏览器的第二显示参数下显示所述网页，生成第二页面结果；
将所述第二页面结果与所述第一页面结果中相同网页内容区域比较，发现两者相似度大于预设阈值，则确定所述网页显示一致。
2.如权利要求1所述的方法，其特征在于，所述在第一显示参数下显示所述网页，生成第一页面结果，包括：
在第一显示参数下显示所述网页，对所述页面内容区域进行截图和/或拼图以生成第一页面结果；
其中，所述在第二显示参数下显示所述网页，生成第二页面结果包括：
在第二显示参数下显示所述网页，对所述页面内容区域截图和/或拼图以生成第二页面结果。
3.如权利要求2所述的方法，其特征在于，所述方法还包括：
当所述第一显示参数大于所述第二显示参数时，根据所述第一显示参数与第二显示参数比例关系，对所述第二显示参数下显示的网页执行大于1次截图，对所有截图进行拼图生成所述第二页面结果。
4.如权利要求2所述的方法，其特征在于，所述方法还包括：
当所述第一显示参数小于所述第二显示参数时，根据所述第一显示参数与所述第二显示参数比例关系，对所述第一显示参数下显示的网页执行大于1次截图，对所有截图进行拼图生成所述第一页面结果。
5.如权利要求2－4任意一项所述的方法，其特征在于，所述方法还包括：
记录每次截图页面区域位置，根据页面区域位置进行拼图。
6.如权利要求5所述的方法，其特征在于，在对截图进行拼接前，还包括：对所述截图进行对齐、裁剪处理。
7.一种网页显示一致性检测装置，其特征在于，所述装置包括：
内容获取单元，用于获取待检测网页的网页内容；
第一结果生成单元，用于在第一显示参数下显示所述网页，生成第一页面结果；
第二结果生成单元，用于在同一浏览器的第二显示参数下显示所述网页，生成第二页面结果；
一致性确定单元，用于将所述第二页面结果与所述第一页面结果中相同网页内容区域比较，发现两者相似度大于预设阈值，确定网页显示一致。
8.如权利要求7所述的装置，其特征在于，所述第一结果生成单元，包括：第一截图模块，用于在所述第一显示参数下显示所述网页，对所述页面内容区域截图；
其中，所述第二结果生成单元包括：第二截图模块，用于在所述第二显示参数下显示所述网页，对所述页面内容区域截图。
9.如权利要求8所述的装置，其特征在于，所述第一结果生成单元，还包括：第一拼接模块，用于将在第一显示参数下的所有截图进行拼接以生成第一页面结果。
10.如权利要求8所述的装置，其特征在于，所述第二结果生成单元，还包括：第二拼接模块，用于将在第二显示参数下的所有截图进行拼接以生成第二页面结果。
11.如权利要求7－10任意一项所述的装置，其特征在于，所述一致性确定单元，还包括：比较模块，用于将所述第二页面结果与所述第一页面结果比较得出是否满足预设条件的比较结果。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510319444.6A CN106294513B (zh) | 2015-06-11 | 2015-06-11 | 网页显示一致性检测方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510319444.6A CN106294513B (zh) | 2015-06-11 | 2015-06-11 | 网页显示一致性检测方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106294513A CN106294513A (zh) | 2017-01-04 |
| CN106294513B true CN106294513B (zh) | 2019-08-30 |
Family
ID=57659579
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510319444.6A Active CN106294513B (zh) | 2015-06-11 | 2015-06-11 | 网页显示一致性检测方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106294513B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108334451B (zh) * | 2018-01-30 | 2022-02-01 | 无线生活（杭州）信息科技有限公司 | 页面兼容性测试方法及装置 |
| CN109614175B (zh) * | 2018-10-17 | 2024-05-24 | 深圳市大梦龙途文化传播有限公司 | 用户界面异常处理方法、装置、计算机设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101694668A (zh) * | 2009-09-29 | 2010-04-14 | 百度在线网络技术（北京）有限公司 | 网页结构相似性确定方法及装置 |
| CN103336814A (zh) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | 网页页面截图处理方法及装置 |
| CN103853656A (zh) * | 2012-11-30 | 2014-06-11 | 阿里巴巴集团控股有限公司 | 网页测试方法和装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP5479049B2 (ja) * | 2009-02-17 | 2014-04-23 | キヤノン株式会社 | 文書処理装置 |
-
2015
- 2015-06-11 CN CN201510319444.6A patent/CN106294513B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101694668A (zh) * | 2009-09-29 | 2010-04-14 | 百度在线网络技术（北京）有限公司 | 网页结构相似性确定方法及装置 |
| CN103853656A (zh) * | 2012-11-30 | 2014-06-11 | 阿里巴巴集团控股有限公司 | 网页测试方法和装置 |
| CN103336814A (zh) * | 2013-06-28 | 2013-10-02 | 优视科技有限公司 | 网页页面截图处理方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106294513A (zh) | 2017-01-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106484383A (zh) | 页面渲染方法、装置及设备 | |
| US8489985B2 (en) | Automatically adjusting a webpage | |
| US10013263B2 (en) | Systems and methods method for providing an interactive help file for host software user interfaces | |
| US20130080910A1 (en) | Dynamic visualization of page element access rates in a web application | |
| US20130152010A1 (en) | Multiple tab stack user interface | |
| US20100049686A1 (en) | Methods and apparatus for visual recommendation based on user behavior | |
| US20150205454A1 (en) | Systems and methods for displaying preview data | |
| CN110825651A (zh) | 网页兼容性测试方法、装置、系统及存储介质 | |
| US20170270209A1 (en) | User interface element for surfacing related results | |
| Fernandes et al. | Evaluating the accessibility of web applications | |
| CN107038194B (zh) | 一种页面跳转方法和装置 | |
| US20210103515A1 (en) | Method of detecting user interface layout issues for web applications | |
| TW201415347A (zh) | 縮放螢幕畫面的方法、電子裝置及電腦程式產品 | |
| CN104809751B (zh) | 生成事件组演化图的方法和装置 | |
| RU2015141517A (ru) | Способ и поисковая система предоставления поисковых результатов на множество клиентских устройств | |
| WO2022127286A1 (zh) | 书架页面的书籍推荐方法、计算设备及存储介质 | |
| US20150365498A1 (en) | User Experience Monitoring for Application Remoting | |
| CN106294513B (zh) | 网页显示一致性检测方法和装置 | |
| CN106610925A (zh) | 网页表格的显示方法及装置 | |
| CN109753198A (zh) | 界面访问方法、显示方法、设备、介质 | |
| CN107480218A (zh) | 网页显示方法及装置、电子设备、存储介质 | |
| CN105701124A (zh) | 一种提供提示信息的方法及装置 | |
| US10715586B2 (en) | Application demonstration system | |
| CN104899287B (zh) | 网页的显示方法和装置 | |
| CN106446291A (zh) | 基于人工智能的图片内容页提供方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240219 Address after: # 01-21, Lai Zan Da Building 1, 51 Belarusian Road, Singapore Patentee after: Alibaba Singapore Holdings Ltd. Country or region after: Singapore Address before: Cayman Islands Grand Cayman capital building, a four storey No. 847 mailbox Patentee before: ALIBABA GROUP HOLDING Ltd. Country or region before: Cayman Islands |