Selenium操作Angular下拉框点击外部触发校验报ElementNotInteractableException

根因说明 #

该问题由Angular Material CDK下拉组件的默认遮罩层机制导致：

• Angular 11.0.2版本中CDK下拉组件展开时，会自动生成div.cdk-overlay-backdrop cdk-overlay-transparent-backdrop cdk-overlay-backdrop-showing透明遮罩层，该层默认z-index高于页面其他普通元素，且会拦截所有外部点击事件
• 直接点击下拉外区域时，操作被遮罩层拦截，目标元素处于不可交互状态，因此抛出ElementNotInteractableException异常
• 浏览器检查器默认优先选中层级最高的元素，因此无法选中下拉内的元素，只会定位到遮罩层

解决方案 #

自动化测试场景（模拟点击外部触发校验） #

• 优先点击遮罩层元素触发下拉关闭，示例Selenium代码如下：

// 定位CDK遮罩层
WebElement backdrop = driver.findElement(By.cssSelector("div.cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing"));
// 点击遮罩层关闭下拉
backdrop.click();
// 后续校验表单提示逻辑

• 也可以通过执行JS脚本直接触发下拉元素失焦，绕过遮罩层拦截：

document.querySelector('你的下拉选择器').blur();

开发调试场景（选中下拉内元素） #

• 临时隐藏遮罩层，在浏览器控制台执行如下代码即可正常选中下拉内元素：

document.querySelector('div.cdk-overlay-backdrop').style.display = 'none';

• 也可以在浏览器元素面板中找到对应遮罩层元素，右键选择「隐藏元素」实现相同效果。

可选优化配置 #

如果需要长期调整交互逻辑，可以给Angular Material下拉组件添加自定义配置，取消遮罩层的事件拦截：

<mat-select [backdropClass]="'cdk-overlay-backdrop-no-pointer'">
  <!-- 下拉选项 -->
</mat-select>

对应全局样式添加：

.cdk-overlay-backdrop-no-pointer {
  pointer-events: none;
}

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