前端页面的样式测试方法及装置制造方法及图纸

本发明专利技术提供一种前端页面的样式测试方法及装置，其中，所述方法包括：遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间；将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠；将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。与现有技术相比，本发明专利技术的有益效果是：可动态识别前端页面是否存在样式错误，不仅大大降低了测试人员的工作量，而且显著提高了效率和准确度。

【技术实现步骤摘要】
前端页面的样式测试方法及装置
本专利技术涉及一种前端页面的样式测试方法及装置，尤其涉及一种针对前端页面中元素位置重叠的测试方法及装置。
技术介绍
在产品线的测试过程中，前端页面的样式测试工作是很重要的一部分。前端页面的样式可能存在着元素错位、文字折行、图文混叠等一系列问题，这些问题一直以来影响着页面的展示效果，带来很大的质量问题。 一直以来，前端页面的样式测试花费了测试人员大量精力，目前，测试人员只能打开若干浏览器，用肉眼查看页面效果是否符合预期，这不仅效率很低，而且不准确，稍有不慎就会遗漏掉可能的bug。另外，当进行回归测试时，测试人员仍然需要通过若干浏览器打开所有页面，重复相同的点击操作，用肉眼确认页面效果，费时费力。
技术实现思路
本专利技术的目的之一在于提供一种前端页面的样式测试方法及装置。 为实现上述专利技术目的之一，本专利技术一实施方式提供了一种前端页面的样式测试方法，其包括: 遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠； 将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。 作为本专利技术一实施方式的进一步改进，所述“遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间”步骤具体包括: 首先，计算父节点下的子叶节点和所述子叶节点的兄弟节点的实际坐标区间； 其次，计算所述父节点的实际坐标区间。 作为本专利技术一实施方式的进一步改进，所述实际坐标区间为:(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。 作为本专利技术一实施方式的进一步改进，所述“将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠”步骤具体包括: 判断当前节点与下一节点是否为父子关系，若是，则结束当前节点的比对；若否，则继续比对； 判断当前节点与下一节点是否为包含关系，若是，则结束当前节点的比对，若否，则根据当前节点的实际坐标区间与下一节点的实际坐标区间或当前坐标区间相比对，判断坐标区间是否存在交叠。 为实现上述专利技术目的之一，本专利技术一实施方式提供了一种前端页面的样式测试方法，其包括: 遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 当一节点的实际坐标区间与该节点的当前坐标区间不相同时，将该节点作为具有样式缺陷的节点。 作为本专利技术一实施方式的进一步改进，所述“遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间”步骤具体包括: 首先，计算父节点下的子叶节点和所述子叶节点的兄弟节点的实际坐标区间； 其次，计算所述父节点的实际坐标区间。 作为本专利技术一实施方式的进一步改进，所述实际坐标区间为:(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。 为实现上述专利技术目的之一，本专利技术一实施方式提供了一种前端页面的样式测试装置，其包括: 查询计算模块，用于遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 比对模块，用于将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠； 输出模块，用于将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。 作为本专利技术一实施方式的进一步改进，所述实际坐标区间为:(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。 作为本专利技术一实施方式的进一步改进，所述比对模块用于: 判断当前节点与兄弟节点是否为父子关系，若是，则结束当前节点的比对；若否，则继续比对； 判断当前节点与兄弟节点是否为包含关系，若是，则结束当前节点的比对，若否，则根据当前节点的实际坐标区间与其兄弟节点的实际坐标区间或当前坐标区间相比对，判断坐标区间是否存在交叠。 为实现上述专利技术目的之一，本专利技术一实施方式提供了一种前端页面的样式测试装置，其包括: 查询计算模块，用于遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 比对模块，用于将每个节点的实际坐标区间与该节点的当前坐标区间相比对； 输出模块，当节点的实际坐标区间和当前坐标区间不相同时，将该节点作为具有样式缺陷的节点。 作为本专利技术一实施方式的进一步改进，所述实际坐标区间为:(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。 与现有技术相比，本专利技术的有益效果是:可动态识别前端页面是否存在样式错误，不仅大大降低了测试人员的工作量，而且显著提高了效率和准确度。 【附图说明】 图1A?IC是本专利技术一实施方式中前端页面样式缺陷的实例图。 图2是本专利技术一实施方式的前端页面的样式测试方法的流程图； 图3是本专利技术一实施方式中判断坐标区间是否交叠的流程图； 图4是本专利技术另一实施方式的前端页面的样式检测方式的流程图； 图5A?5H是本专利技术一实施方式中前端页面的元素交叠示意图； 图6是本专利技术一实施方式的前端页面的样式测试装置的模块图。 【具体实施方式】 以下将结合附图所示的各实施方式对本专利技术进行详细描述。但这些实施方式并不限制本专利技术，本领域的普通技术人员根据这些实施方式所轻易做出的结构、方法、或功能上的变换均包含在本专利技术的保护范围内。 如图1A所示，在该前端页面的上方一栏，所有元素属于同一个div元素，其元素对应的子节点“详情页-请点击这里”的链接和右侧的图标属于兄弟节点，他们本该各自占有一定的空间长宽。然而，由于“详情页-请点击这里”占据的空间与右侧的五角星图标占据的空间存在交叠区域，从而导致了前端页面中出现五角星挡住文字“这里”的情况。 如图1B所示，图中的高亮区域显示了“详情页-请点击这里”链接实际占有的空间长宽，如图1C所示，图中的高亮区域显示了五角星图标、发送短信图标所占有的空间长宽。不难看出，“详情页-请点击这里”链接的右侧区域与五角星图标所在的左侧区域在水平方向和垂直方向都存在交叠，从而导致五角星图标挡住了“详情页-请点击这里”链接的正常显示，出现了图文混叠的错误。 如图2所示，本专利技术一实施方式提供了一种前端页面的样式测试方法，其包括: 遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 前端页面可以理解为一个dom树，页面中的每一个元素都是dom树的一个节点。前端页面的内容和样式则是通过在页面的不同位置上摆放或填充不同的元素实现的，不同的摆放方式形成了不同的dom树，也就构成了不同内容和样式的前端页面。在本专利技术一实施方式中，遍历并计算节点的实际坐标区间是从底层向上层进行的: 先计算父节点下的子叶节点和所述子叶节点的兄弟节点的实际坐标区间；再计算所述父节点的实际坐标区间。例如，先遍历本文档来自技高网...

【技术保护点】
一种前端页面的样式测试方法，其特征在于，所述方法包括：遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间；将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠；将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。

【技术特征摘要】
1.一种前端页面的样式测试方法，其特征在于，所述方法包括: 遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠； 将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。2.根据权利要求1所述的前端页面的样式测试方法，其特征在于，所述“遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间”步骤具体包括: 首先，计算父节点下的子叶节点和所述子叶节点的兄弟节点的实际坐标区间； 其次，计算所述父节点的实际坐标区间。3.根据权利要求1所述的前端页面的样式测试方法，其特征在于，所述实际坐标区间为:(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。4.根据权利要求1所述的前端页面的样式测试方法，其特征在于，所述“将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠”步骤具体包括: 判断当前节点与下一节点是否为父子关系，若是，则结束当前节点的比对；若否，则继续比对； 判断当前节点与下一节点是否为包含关系，若是，则结束当前节点的比对，若否，则根据当前节点的实际坐标区间与下一节点的实际坐标区间或当前坐标区间相比对，判断坐标区间是否存在交叠。5.一种前端页面的样式测试方法，其特征在于，所述方法包括: 遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间； 当一节点的实际坐标区间与该节点的当前坐标区间不相同时，将该节点作为具有样式缺陷的节点。6.根据权利要求5所述的前端页面的样式测试方法，其特征在于，所述“遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间”步骤具体包括: 首先，计算父节点下...

【专利技术属性】
技术研发人员：沈莉霞，
申请(专利权)人：百度在线网络技术北京有限公司，
类型：发明
国别省市：北京;11