如何验证Web元素的交换操作？解决位置校验失败问题

用户通过JavaScript实现Web元素位置交换，代码功能正常，但无法验证交换是否完成：

// 元素交换代码
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('style', 'position: absolute; left: " + location2.getX() + "px; top: " + location2.getY() + "px;')", element1);
js.executeScript("arguments[0].setAttribute('style', 'position: absolute; left: " + location1.getX() + "px; top: " + location1.getY() + "px;')", element2);

尝试通过Point类获取位置验证：

Point location1 = element1.getLocation();
Point location2 = element2.getLocation();
// 执行交换代码
Point newLocation1 = element1.getLocation();
Point newLocation2 = element2.getLocation();

但验证条件始终失败：

if((location1.equals(newLocation2) && (location2.equals(newLocation2)){
    System.out.println("Swapping done");
}

现象为location1与newLocation2匹配，但location2与newLocation1不匹配。

1. 条件判断存在笔误：原代码第二个判断条件错误写成location2.equals(newLocation2)，正确逻辑应为location2.equals(newLocation1)，这是导致条件直接失败的低级错误。
2. getLocation()的局限性：WebDriver的element.getLocation()方法返回的是元素在DOM文档流中的原始位置，而非通过JS修改style后视觉上的最终位置。当用JS强制设置position: absolute改变元素位置时，getLocation()可能不会同步更新为修改后的坐标。

方案一：修正条件判断（适用于getLocation()能正常返回修改后位置的场景） #

先修复条件判断的笔误，确保逻辑正确：

if(location1.equals(newLocation2) && location2.equals(newLocation1)){
    System.out.println("Swapping done");
}

方案二：通过JavaScript获取元素实际视觉位置（推荐） #

直接用JS获取元素计算后的样式坐标，准确反映元素当前的视觉位置，避免getLocation()的局限性：

步骤1：封装获取元素实际位置的方法 #

private Point getElementActualLocation(WebElement element, JavascriptExecutor js) {
    // 获取计算后的left和top数值（去除px单位）
    Long left = (Long) js.executeScript("return parseInt(window.getComputedStyle(arguments[0]).left);", element);
    Long top = (Long) js.executeScript("return parseInt(window.getComputedStyle(arguments[0]).top);", element);
    return new Point(left.intValue(), top.intValue());
}

步骤2：使用该方法验证交换 #

JavascriptExecutor js = (JavascriptExecutor) driver;

// 获取交换前的实际视觉位置
Point originalLoc1 = getElementActualLocation(element1, js);
Point originalLoc2 = getElementActualLocation(element2, js);

// 执行元素交换代码
js.executeScript("arguments[0].setAttribute('style', 'position: absolute; left: " + originalLoc2.getX() + "px; top: " + originalLoc2.getY() + "px;')", element1);
js.executeScript("arguments[0].setAttribute('style', 'position: absolute; left: " + originalLoc1.getX() + "px; top: " + originalLoc1.getY() + "px;')", element2);

// 获取交换后的实际视觉位置
Point newLoc1 = getElementActualLocation(element1, js);
Point newLoc2 = getElementActualLocation(element2, js);

// 验证交换是否完成
if(originalLoc1.equals(newLoc2) && originalLoc2.equals(newLoc1)){
    System.out.println("Swapping done");
}

补充说明 #

• window.getComputedStyle()会返回元素最终应用的所有样式，包括通过JS动态修改的部分，因此能准确获取元素当前的视觉坐标。
• 如果元素位置是通过transform等其他CSS属性修改的，需调整坐标获取逻辑（比如解析transform的偏移值），当前场景下使用left和top即可满足需求。

内容的提问来源于stack exchange，提问作者Karen M