本发明专利技术公开了一种网页开发效果的检测方法，包括：接收预输入的目标网址；按照预设的路径字典对目标网址进行访问匹配，得到各目标网页；按照预存的设计稿尺寸信息分别对各目标网页进行截图操作，得到各页面截图；获取由各设计稿图片构成的设计稿图片集合；分别将各页面截图与设计稿图片集合中各设计稿图片进行对比，得到各截图设计稿组；针对每个截图设计稿组，计算页面截图中各组件分别对应的准确度得分；计算各准确度得分的平均值，得到页面截图对应的目标网页的页面准确度。本发明专利技术实现了对目标页面与设计稿之间分区域的精确对比，较大地节省了检测耗时，节省人力成本。本发明专利技术还公开了一种装置、设备及存储介质，具有相应技术效果。效果。效果。
【技术实现步骤摘要】
网页开发效果的检测方法、装置、设备及可读存储介质
[0001]本专利技术涉及网页开发
，特别是涉及一种网页开发效果的检测方法、装置、设备及计算机可读存储介质。
技术介绍
[0002]在网页开发时，网页实现和设计稿之间往往存在或多或少的差距。需要通过将网页实现和设计稿之间进行对比，进而得到网页开发效果。
[0003]现有的网页开发效果检测方式大都是依靠设计师与开发者做一对一校对细节，耗费时间长，而且很耗精力，当检测人员意见不统一时，容易引起检测人员间的不适。
[0004]综上所述，如何有效地解决现有的网页开发效果检测方式耗费时间长，耗费精力，易出现意见不统一状况等问题，是目前本领域技术人员急需解决的问题。
技术实现思路
[0005]本专利技术的目的是提供一种网页开发效果的检测方法，该方法较大地节省了检测耗时，节省人力成本，提升了用户体验；本专利技术的另一目的是提供一种网页开发效果的检测装置、设备及计算机可读存储介质。
[0006]为解决上述技术问题，本专利技术提供如下技术方案：
[0007]一种网页开发效果的检测方法，包括：
[0008]接收预输入的目标网址；
[0009]按照预设的路径字典对所述目标网址进行访问匹配，得到各目标网页；
[0010]按照预存的设计稿尺寸信息分别对各所述目标网页进行截图操作，得到各页面截图；
[0011]获取由各设计稿图片构成的设计稿图片集合；
[0012]分别将各所述页面截图与所述设计稿图片集合中各所述设计稿图片进行对比，得到各截图设计稿组；其中，每个截图设计稿组由一个页面截图和与所述页面截图对应的设计稿图片构成；
[0013]针对每个截图设计稿组，计算所述页面截图中各组件分别对应的准确度得分；
[0014]计算各所述准确度得分的平均值，得到所述页面截图对应的目标网页的页面准确度；其中，各所述页面截图和各所述设计稿图片分别包括框选得到的各个组件。
[0015]在本专利技术的一种具体实施方式中，按照预设的路径字典对所述目标网址进行访问匹配，包括：
[0016]利用网络爬虫技术按照预设的路径字典对所述目标网址进行访问匹配。
[0017]在本专利技术的一种具体实施方式中，获取由各设计稿图片构成的设计稿图片集合，包括：
[0018]获取预存的PSD文件；
[0019]将所述PSD文件转换为各所述设计稿图片，得到所述设计稿图片集合。
[0020]在本专利技术的一种具体实施方式中，分别将各所述页面截图与所述设计稿图片集合中各所述设计稿图片进行对比，包括：
[0021]利用感知哈希算法从所述设计稿图片集合中分别搜索各所述页面截图对应的设计稿图片。
[0022]在本专利技术的一种具体实施方式中，计算所述页面截图中各组件分别对应的准确度得分，包括：
[0023]利用感知哈希算法计算所述页面截图中各组件分别对应的预设位数的第一指纹数据；
[0024]利用所述感知哈希算法计算所述设计稿图片中各组件分别对应的所述预设位数的第二指纹数据；
[0025]针对每一对组件，计算所述第一指纹数据与所述第二指纹数据的相同位数；
[0026]计算所述相同位数占所述预设位数的占比，得到所述组件对应的准确度得分。
[0027]在本专利技术的一种具体实施方式中，计算所述页面截图中各组件分别对应的准确度得分，包括：
[0028]利用感知哈希算法计算所述页面截图中各组件分别对应的预设位数的第一指纹数据；
[0029]利用所述感知哈希算法计算所述设计稿图片中各组件分别对应的所述预设位数的第二指纹数据；
[0030]针对每一对组件，计算所述第一指纹数据与所述第二指纹数据的相同位数；
[0031]计算所述相同位数占所述预设位数的占比，得到所述组件对应的准确度得分。
[0032]在本专利技术的一种具体实施方式中，在得到各所述目标网页分别对应的页面准确度之后，还包括：
[0033]根据各所述页面准确度生成网页开发效果检测报告。
[0034]一种网页开发效果的检测装置，包括：
[0035]网址接收模块，用于接收预输入的目标网址；
[0036]网页获得模块，用于按照预设的路径字典对所述目标网址进行访问匹配，得到各目标网页；
[0037]页面截图获得模块，用于按照预存的设计稿尺寸信息分别对各所述目标网页进行截图操作，得到各页面截图；
[0038]设计稿图片获得模块，用于获取由各设计稿图片构成的设计稿图片集合；
[0039]截图设计稿组获得模块，用于分别将各所述页面截图与所述设计稿图片集合中各所述设计稿图片进行对比，得到各截图设计稿组；其中，每个截图设计稿组由一个页面截图和与所述页面截图对应的设计稿图片构成；
[0040]页面准确度计算模块，用于针对每个截图设计稿组，计算所述页面截图中各组件分别对应的准确度得分；计算各所述准确度得分的平均值，得到所述页面截图对应的目标网页的页面准确度；其中，各所述页面截图和各所述设计稿图片分别包括框选得到的各个组件。
[0041]一种网页开发效果的检测设备，包括：
[0042]存储器，用于存储计算机程序；
[0043]处理器，用于执行所述计算机程序时实现如前所述网页开发效果的检测方法的步骤。
[0044]一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如前所述网页开发效果的检测方法的步骤。
[0045]本专利技术所提供的网页开发效果的检测方法，接收预输入的目标网址；按照预设的路径字典对目标网址进行访问匹配，得到各目标网页；按照预存的设计稿尺寸信息分别对各目标网页进行截图操作，得到各页面截图；获取由各设计稿图片构成的设计稿图片集合；分别将各页面截图与设计稿图片集合中各设计稿图片进行对比，得到各截图设计稿组；其中，每个截图设计稿组由一个页面截图和与页面截图对应的设计稿图片构成；针对每个截图设计稿组，计算页面截图中各组件分别对应的准确度得分；计算各准确度得分的平均值，得到页面截图对应的目标网页的页面准确度；其中，各页面截图和各设计稿图片分别包括框选得到的各个组件。
[0046]由上述技术方案可知，通过根据输入的网址自动进行目标网页获取，并按照预先设置的设计稿尺寸信息对获取到的目标网页进行截图，得到各页面截图。并自动将各页面截图与各设计稿图片进行一一对比，得到由页面截图和与页面截图对应的设计稿图片构成各截图设计稿组，不需要预先设置目标网页与设计稿图片之间的对应关系。对各页面截图和各设计稿图片分别进行框选得到各个组件，针对每个截图设计稿组，计算页面截图中各组件分别对应的准确度得分，从而实现对目标页面与设计稿之间分区域的精确对比，可以精确定位目标页面中不符合设计稿要求的区域，方便对目标页面进行精确调整。通过计算各组件分别对应的准确度得分的平均值，得到页面截图对应的目标网页的页面准确度，实现了对网页本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种网页开发效果的检测方法，其特征在于，包括：接收预输入的目标网址；按照预设的路径字典对所述目标网址进行访问匹配，得到各目标网页；按照预存的设计稿尺寸信息分别对各所述目标网页进行截图操作，得到各页面截图；获取由各设计稿图片构成的设计稿图片集合；分别将各所述页面截图与所述设计稿图片集合中各所述设计稿图片进行对比，得到各截图设计稿组；其中，每个截图设计稿组由一个页面截图和与所述页面截图对应的设计稿图片构成；针对每个截图设计稿组，计算所述页面截图中各组件分别对应的准确度得分；计算各所述准确度得分的平均值，得到所述页面截图对应的目标网页的页面准确度；其中，各所述页面截图和各所述设计稿图片分别包括框选得到的各个组件。2.根据权利要求1所述的网页开发效果的检测方法，其特征在于，按照预设的路径字典对所述目标网址进行访问匹配，包括：利用网络爬虫技术按照预设的路径字典对所述目标网址进行访问匹配。3.根据权利要求1或2所述的网页开发效果的检测方法，其特征在于，获取由各设计稿图片构成的设计稿图片集合，包括：获取预存的PSD文件；将所述PSD文件转换为各所述设计稿图片，得到所述设计稿图片集合。4.根据权利要求1所述的网页开发效果的检测方法，其特征在于，分别将各所述页面截图与所述设计稿图片集合中各所述设计稿图片进行对比，包括：利用感知哈希算法从所述设计稿图片集合中分别搜索各所述页面截图对应的设计稿图片。5.根据权利要求1所述的网页开发效果的检测方法，其特征在于，计算所述页面截图中各组件分别对应的准确度得分，包括：利用感知哈希算法计算所述页面截图中各组件分别对应的预设位数的第一指纹数据；利用所述感知哈希算法计算所述设计稿图片中各组件分别对应的所述预设位数的第二指纹数据；针对每一对组件，计算所述第一指纹数据与所述第...
【专利技术属性】
技术研发人员：卢佳波，范渊，刘博，
申请(专利权)人：杭州安恒信息技术股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。