C# Selenium执行WebElement.Click()抛出元素不可交互异常

程序启动前期运行正常，执行到驱动点击按钮的步骤时抛出 element not interactable（元素不可交互） 异常，试过多种解决方法均未生效，推测问题和点击按钮后页面HTML结构变化有关。

抛出异常的C#代码如下：

driver.FindElement(By.XPath("//button[@id='exifInfoMobile']")).Click();

完整报错信息：

OpenQA.Selenium.ElementNotInteractableException: 'element not interactable
(Session info: chrome=103.0.5060.114)'

<li class="photo-info">
       <button class="btn btn-photo-info" id="exifInfoMobile">
               <span class="text">info</span>
       </button>
</li>

• 配置WebDriverWait显式等待元素加载
• 切换为按ClassName属性定位目标元素
• 切换为按Id属性定位目标元素

以上方案均未解决问题，目前推测问题和模态组件逻辑有关：点击该按钮后页面右侧会新增信息面板，站点整体HTML结构会发生变化。

这个报错和点击后页面结构变化没有关系，核心是触发点击时，定位到的元素不符合可交互条件，按以下优先级逐一排查：

• 先排查匹配到了隐藏元素
  很多站点会同时写桌面端、移动端两套DOM，部分元素id完全相同，但其中一套会被设置为隐藏状态（加display:none、visibility:hidden或者hide类名），你大概率定位到了隐藏的非移动端元素。
  先执行driver.FindElements(By.Id("exifInfoMobile")).Count看同id元素数量，如果结果大于1，就把定位器改成带可见性过滤的版本，参考XPath：//button[@id='exifInfoMobile' and not(contains(@style,'display: none')) and not(contains(@class,'hide'))]
• 滚动到元素位置再点击
  如果元素不在当前视口范围内，也会报不可交互。定位到元素后先滚动到可视区域，等待滚动动画结束再点击，代码参考：

  WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
  IWebElement exifBtn = wait.Until(d => d.FindElement(By.XPath("替换成上面带可见性过滤的XPath")));
  IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
  js.ExecuteScript("arguments[0].scrollIntoView({block: 'center'});", exifBtn);
  Thread.Sleep(300); // 等待滚动动画完成
  exifBtn.Click();
  

• 检查是否有遮罩层遮挡
  打开浏览器DevTools，用元素选择器点按钮所在的位置，看实际选中的元素是不是目标按钮——如果有提前加载的透明遮罩、固定导航栏、模态层盖在按钮上方，点击会被拦截，需要等遮罩消失或者先关闭遮罩再操作按钮。
• JS点击兜底
  确认元素存在、可见、无遮挡后还是点击失败的话，用JS执行点击绕过Selenium的交互检查：

  js.ExecuteScript("arguments[0].click();", exifBtn);
  

最后注意你用的Chrome版本是103，必须使用完全对应版本的ChromeDriver，版本不匹配也会偶发各类元素交互异常。

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