如何用Protractor移除DOM遮挡元素？解决点击不可交互问题

我之前在做UI自动化测试的时候也踩过这个坑！那个.dropdown-backdrop遮罩层真的是测试用例的克星——明明目标元素就在眼前，就是点不到，还抛出“元素不可点击，被其他元素拦截”的错误。你说尝试用JS移除没成功，大概率是时机不对或者执行方式没踩对点子，我给你几个亲测有效的解决方案：

方法1：先等遮罩层出现，再精准移除 #

很多时候我们的JS代码跑得太快，遮罩层还没被浏览器添加到DOM里就执行了移除操作，自然没用。这时候就得用「显式等待」，等遮罩层加载出来再动手：

如果你用Selenium（Python示例）

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 最多等10秒，直到遮罩层出现在DOM中
backdrop_element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CLASS_NAME, "dropdown-backdrop"))
)
# 执行JS移除这个元素
driver.execute_script("arguments[0].remove();", backdrop_element)

如果你用Cypress

// 等待遮罩层出现，超时时间设为10秒
cy.get('.dropdown-backdrop', { timeout: 10000 }).then($backdrop => {
  $backdrop.remove()
})

方法2：监听DOM变化，自动“干掉”新增的遮罩层 #

如果这个遮罩层是动态触发添加的（比如点击日期选择器后才生成），可以用MutationObserver监听DOM的变化，一旦发现遮罩层出现就立刻移除：

// 创建DOM变化监听器
const backdropObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有新增节点
    if (mutation.addedNodes.length > 0) {
      const backdrop = document.querySelector('.dropdown-backdrop');
      if (backdrop) {
        backdrop.remove();
        backdropObserver.disconnect(); // 移除后就停止监听，避免重复操作
      }
    }
  });
});

// 开始监听body的子元素变化
backdropObserver.observe(document.body, { childList: true });

把这段代码放在测试用例的前置步骤里，或者页面初始化时执行，就能自动拦截这个讨厌的遮罩层。

方法3：先隐藏再移除，避免瞬间遮挡 #

有时候直接移除可能还是会有极短的时间窗口导致点击被拦截，我们可以先把遮罩层隐藏，再彻底移除：

const backdrop = document.querySelector('.dropdown-backdrop');
if (backdrop) {
  backdrop.style.display = 'none'; // 先让它消失在视野里
  backdrop.remove(); // 再从DOM中删掉
}

额外小技巧：如果移除影响日期选择器，就提升目标元素层级 #

有些情况下，移除遮罩层可能会影响日期选择器的正常功能（比如下拉框无法关闭），这时候可以不用移除，而是把你要操作的元素层级调高，让它“盖”在遮罩层上面：

/* 临时给目标元素加个超高z-index */
.your-target-element-class {
  z-index: 9999 !important;
}

在测试用例里执行这段CSS代码，也能解决点击被拦截的问题。

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