Selenium自动化中如何点击被toaster消息遮挡的元素

问题根因 #

你遇到的报错核心原因是elementToBeClickable显式等待仅判断元素自身的可见性+disabled属性状态，不会检测元素是否被其他层级的DOM节点（此处是toaster提示框）遮挡，因此等待判定通过后实际点击时还是会触发遮挡异常，你之前用JS直接点击目标元素不生效也和遮挡层级优先级有关。

可行解决方案 #

方案1：等待toaster自动消失后再操作（优先推荐，符合真实用户操作逻辑） #

先定位toaster提示框的元素选择器，新增等待toaster完全消失的逻辑，再执行后续登出操作，示例代码如下：

// 新增等待toaster消失的工具方法
public static void waitForToasterDisappear(WebDriver driver) {
    WebDriverWait wait = new WebDriverWait(driver, TimeUnit.SECONDS.toSeconds(EXPLICIT_WAIT));
    // 先等toaster出现，再等toaster不可见，适配toaster延迟弹出的场景
    wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("你的toaster元素选择器")));
    wait.until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("你的toaster元素选择器")));
}

// 改造你的登出触发逻辑，先等toaster消失再操作
public SignOutPage clickOnUserMenu() {      
    // 新增toaster等待步骤
    WaitUtility.waitForToasterDisappear(driver);
    WaitUtility.waitForElementToBeClickable(driver, userMenu);
    PageUtility.clickOnElement(userMenu);
    return new SignOutPage(driver);
}

方案2：强制隐藏toaster遮挡层（适合toaster停留时间过长的场景） #

如果toaster停留时间太久不想等待，可以直接执行JS代码移除/隐藏toaster元素，消除遮挡后再点击：

// 新增隐藏toaster的工具方法
public static void hideToaster(WebDriver driver) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    // 直接修改toaster样式隐藏，也可以直接执行remove()删除节点
    js.executeScript("document.querySelector('你的toaster元素选择器').style.display = 'none'");
}

// 调用逻辑和方案1一致，在点击用户菜单前先调用hideToaster方法即可

方案3：兜底方案（不推荐，仅适配特殊场景） #

如果以上两种方案都无法实现，可以用JS直接触发目标元素的点击事件，注意和你之前尝试的JS点击写法区分，要确保事件绑定正确：

public static void jsClickElement(WebDriver driver, WebElement element) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("arguments[0].click();", element);
}

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