[发明专利]前端页面的样式测试方法及装置

说明书

技术领域

本发明涉及一种前端页面的样式测试方法及装置，尤其涉及一种针对前端页面中元素位置重叠的测试方法及装置。

背景技术

在产品线的测试过程中，前端页面的样式测试工作是很重要的一部分。前端页面的样式可能存在着元素错位、文字折行、图文混叠等一系列问题，这些问题一直以来影响着页面的展示效果，带来很大的质量问题。

一直以来，前端页面的样式测试花费了测试人员大量精力，目前，测试人员只能打开若干浏览器，用肉眼查看页面效果是否符合预期，这不仅效率很低，而且不准确，稍有不慎就会遗漏掉可能的bug。另外，当进行回归测试时，测试人员仍然需要通过若干浏览器打开所有页面，重复相同的点击操作，用肉眼确认页面效果，费时费力。

发明内容

本发明的目的之一在于提供一种前端页面的样式测试方法及装置。

为实现上述发明目的之一，本发明一实施方式提供了一种前端页面的样式测试方法，其包括：

遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间；

将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠；

将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。

作为本发明一实施方式的进一步改进，所述“遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间”步骤具体包括：

首先，计算父节点下的子叶节点和所述子叶节点的兄弟节点的实际坐标区间；

其次，计算所述父节点的实际坐标区间。

作为本发明一实施方式的进一步改进，所述实际坐标区间为：(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。

作为本发明一实施方式的进一步改进，所述“将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠”步骤具体包括：

判断当前节点与下一节点是否为父子关系，若是，则结束当前节点的比对；若否，则继续比对；

判断当前节点与下一节点是否为包含关系，若是，则结束当前节点的比对，若否，则根据当前节点的实际坐标区间与下一节点的实际坐标区间或当前坐标区间相比对，判断坐标区间是否存在交叠。

为实现上述发明目的之一，本发明一实施方式提供了一种前端页面的样式测试方法，其包括：

遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间；

当一节点的实际坐标区间与该节点的当前坐标区间不相同时，将该节点作为具有样式缺陷的节点。

作为本发明一实施方式的进一步改进，所述“遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间”步骤具体包括：

首先，计算父节点下的子叶节点和所述子叶节点的兄弟节点的实际坐标区间；

其次，计算所述父节点的实际坐标区间。

作为本发明一实施方式的进一步改进，所述实际坐标区间为：(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。

为实现上述发明目的之一，本发明一实施方式提供了一种前端页面的样式测试装置，其包括：

查询计算模块，用于遍历前端页面对应的dom树上的节点，根据每个节点占用的空间长宽和起始坐标，计算每个节点的实际坐标区间；

比对模块，用于将每个节点的实际坐标区间与其相邻的兄弟节点的实际坐标区间或当前坐标区间相比对，判断其坐标区间是否有交叠；

输出模块，用于将坐标区间有交叠的两节点的至少其中之一作为具有样式缺陷的节点。

作为本发明一实施方式的进一步改进，所述实际坐标区间为：(节点最上边沿的坐标-节点最下边沿的坐标；节点最左边沿的坐标-节点最右边沿的坐标)。

作为本发明一实施方式的进一步改进，所述比对模块用于：

判断当前节点与兄弟节点是否为父子关系，若是，则结束当前节点的比对；若否，则继续比对；

判断当前节点与兄弟节点是否为包含关系，若是，则结束当前节点的比对，若否，则根据当前节点的实际坐标区间与其兄弟节点的实际坐标区间或当前坐标区间相比对，判断坐标区间是否存在交叠。

为实现上述发明目的之一，本发明一实施方式提供了一种前端页面的样式测试装置，其包括：