如何找到与另一个Web元素相关的Web元素的位置？

Question

我有一个场景，我必须断言其元素的位置存在。为了更清楚，我有一个Web元素X和另一个Web元素Y.现在我必须断言，点击一个按钮后我可以看到X坐在Y上方。怎么做？

Answer 1

您应该在文档中获取两个元素的位置，并从Y的值中减去X的位置值。如果该值为正，则您知道X的位置比Y更远。

获得职位

使用

boxPositionOfX = getElementById(“myX”).getBoundingClientRect();
boxPositionOfY = getElementById(“myY”).getBoundingClientRect();

这将返回一个对象，其中包含相对于视口的所有四个位置值：top，right，bottom和left。您不需要将视口位置转换为文档位置，因为您必须添加的文档偏移对于两个元素都是相同的，并且将在减法中被剪切。

比较职位

现在减去他们的位置：

positionDifference = boxPositionOfY.top - boxPositionOfX.top;

如果positionDifference大于0，则X的上边框位于Y的上边框上方。

如果您想确保元素不重叠，请使用：

If ( (boxPositionOfY.top - boxPositionOfX.bottom) >= 0) {
    alert("X is above Y. They do not overlap.");
}