Selenium执行鼠标悬停选择元素后UI界面异常，如何解决？

问题说明 #

你使用Java编写Selenium自动化脚本实现菜单悬停选中功能时，点击目标元素后出现菜单弹窗未正常收起、占用全屏的显示异常。
原有实现代码如下：

public void HoveronMenu() {        
    Actions action = new Actions(ldriver);
    WebElement mainMenu = ldriver.findElement(Hover);
    action.moveToElement(mainMenu).moveToElement(ldriver.findElement(selectmenu)).click().build().perform(); 
}

相关界面参考：

• 正常显示界面：
• 执行脚本后的异常界面：

解决方案 #

该问题的核心原因是Actions链式操作执行完成后，鼠标仍停留在菜单关联区域，父级菜单的hover状态没有被正常移除，导致下拉弹窗没有自动收起，可通过以下方法解决：

方法1：点击完成后主动将鼠标移至页面空白区域 #

在原有点击逻辑执行完成后，追加一步鼠标移动到页面非菜单区域的操作，即可触发菜单的鼠标移出事件，自动收起弹窗：

public void HoveronMenu() {        
    Actions action = new Actions(ldriver);
    WebElement mainMenu = ldriver.findElement(Hover);
    // 原有悬停点击逻辑
    action.moveToElement(mainMenu).moveToElement(ldriver.findElement(selectmenu)).click().build().perform();
    // 新增：将鼠标移到body空白区域，触发菜单收起
    action.moveToElement(ldriver.findElement(By.tagName("body")), 0, 0).build().perform();
}

如果页面body区域存在交互元素，你可以替换为页面内其他确定的空白区域元素，稳定性更高。

方法2：使用JS强制触发菜单的鼠标移出事件 #

如果移动鼠标的方案不生效，可以直接通过JavascriptExecutor给父级菜单主动触发mouseout事件，强制清除悬浮状态：

public void HoveronMenu() {        
    Actions action = new Actions(ldriver);
    WebElement mainMenu = ldriver.findElement(Hover);
    action.moveToElement(mainMenu).moveToElement(ldriver.findElement(selectmenu)).click().build().perform();
    // 新增：用JS触发主菜单的mouseout事件
    JavascriptExecutor js = (JavascriptExecutor) ldriver;
    js.executeScript("arguments[0].dispatchEvent(new Event('mouseout'))", mainMenu);
}

你也可以在控制台先查看菜单展开时被添加的样式类名，直接通过JS移除该类名即可收起弹窗，示例如下（需要将代码中的menu-open-class替换为你实际的样式类名）：

js.executeScript("arguments[0].classList.remove('menu-open-class')", mainMenu);

方法3（仅适用于无需保留点击后状态的场景） #

如果以上方案都不适用，且执行点击操作后不需要保留当前页面的操作状态，可以直接刷新页面恢复界面：

ldriver.navigate().refresh();

内容的提问来源于stack exchange，提问作者Moueen Akhtar