ElementNotInteractableException：元素不可交互：自升级到 chromedriver 83 后出现元素大小为零答案

【问题标题】：ElementNotInteractableException: element not interactable: element has zero size appears since upgrade to chromedriver 83ElementNotInteractableException：元素不可交互：自升级到 chromedriver 83 后出现元素大小为零
【发布时间】：2020-09-12 03:08:46
【问题描述】：

我使用以下 docker 镜像来运行我的黄瓜测试：

https://hub.docker.com/r/selenium/standalone-chrome/

不幸的是，从今天开始，似乎每当我运行测试时，都会出现以下错误。它们出现在每次测试的开始。我在页面上做什么并不重要。

**13:38:26 [exec] org.openqa.selenium.ElementNotInteractableException：元素不可交互：元素大小为零

13:38:26 [exec]（会话信息：chrome=83.0.4103.61）**

我做了一些挖掘，我注意到 chromedriver 版本已从 81 更新到 83。我设法通过使用具有 chromedriver 81 的 docker hub 链接中的旧 docker 映像解决了这个问题。但是如果我尝试使用 chromedriver 83再次它不会工作。

有没有其他人遇到过这种情况？由于更新，我需要添加新的 chrome 选项吗？

【问题讨论】：

您解决了这个问题了吗？我看到了同样的事情。
不。为了更紧急的事情，我不得不搁置一切。但我设法通过恢复到 Chrome 81 + chromedriver 81 使其工作。我会尝试更多
同样的问题，测试在 Chrome 81 中运行良好，但在 83 中出现相同的错误。

标签： docker selenium-chromedriver

【解决方案1】：

该问题的根本原因是 Chrome 无法滚动到视口之外的元素。取而代之的是，Chrome 会尝试在查看区域之外单击它。这就是问题出现的原因。这绝对是 Chrome 83 的问题，因为我在 Chrome 81 上没有遇到过。

此外，我在 Windows 机器上没有这样的问题，它只在 Linux 上重现（我使用的是 selenoid docker 图像）。

通过 JS 点击的解决方案不是最好的选择，因为通过 JS 你可以点击任何地方，即使是不可点击的元素（例如被其他对象重叠）。这是不安全的操作。

我建议在单击之前和原生 click() 之后滚动到该元素；它会完美地工作。

JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].scrollIntoView(true);", element);    
element.click();

【讨论】：

这个答案很好，但是您可以使用 selenium "move_to_element" 选项，而不是使用 javascript 滚动： from selenium.webdriver.common.action_chains import ActionChains ActionChains(driver).move_to_element(element) .perform() element.click()
我在带有 chrome 85 的 windows 10 中得到这个

【解决方案2】：

我也遇到了这个错误，我做了一些挖掘，我发现元素大小包含 0，例如，如果你想点击它，大小为 200 x 0 的元素会得到这个错误。这不是 docker 唯一的错误，我在本地 chrome 83 上得到它。

尝试使用 Javascript 执行器点击元素：

JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);

【讨论】：

这似乎可行，但我需要在几乎每个黄瓜步骤中添加它。如果其他一切都失败了，我会回到这个解决方案。
这个解决方案对我有用，谢谢！ fwiw，我在 chrome 83、ruby、rspec 上，在我们的 CI 服务器上无头运行。将 element.click 替换为对此方法的调用： def click_link(element) execute_script("arguments[0].click();", element) end

【解决方案3】：

当我使用无头 chrome 时，我通过使用 --window-size 参数解决了这个问题。例如。 chrome --headless --window-size=400,800.

我不知道发生了什么变化或为什么这是一个足够的解决方法。

【讨论】：

不幸的是，我已经有了 --window-size 参数，但它仍然不起作用。我无法切换到无头，因为它会导致我所有的下载测试停止工作。

【解决方案4】：

在我们的例子中，根本原因是 CSS/HTML 问题：一个锚点包裹了一个 div，并期望隐式地从这个子元素的大小获得一个大小。

以前的 Chrome 版本已经容忍这一点，但从 v.83 开始，Chrome 似乎在这方面变得更加严格。

因此，在这种情况下，解决方案是从以下内容进行更改：

<a href="http://example.org">
  <div class="class with style giving height and width">
    some content
  </div>
</a>

这样的：

<a href="http://example.org" class="class with style giving height and width">
  some content
</a>

这是有效的 HTML5。

【讨论】：

谢谢，这是 IMO 比在测试端做 hacky JS 更好的方法。首先研究 DOM 让我比投入 JS 执行器更优雅地解决问题。

【解决方案5】：

我最终使用了 scrollIntoView()，它成功了（下面的代码来自 Protractor 测试）：

// scroll to it
browser.executeScript('document.getElementById("targetID").scrollIntoView()');

browser.sleep(500);

// click it
element(by.id('targetID')).click();

【讨论】：

【解决方案6】：

chrome 驱动更新到 83 时遇到了和你一样的问题，我能够解决这个问题。

 WebDriverWait wait = new WebDriverWait(this.Driver, TimeSpan.FromSeconds(10));
            var result = wait.Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector(".btnSaveChanges")));
            ExcuteJquery("$j(\".btnSaveChanges div:contains('" + Text + "')\").click()");

使用 Jquery 将帮助您访问它

【讨论】：

此代码不可运行。修正错别字和缩进。

【解决方案7】：

我通过单击应该具有零宽度的元素内的子 <input> 元素来解决它。

【讨论】：

【解决方案8】：

原帖：https://stackoverflow.com/a/68740025/1244630

不要使用Click，而是按回车键。这对我有用：

IWebDriver driver = ...;
var button = driver.FindEment(...);
button.SendKeys(Keys.Enter);

【讨论】：

【解决方案9】：

我的解决方案：

    Actions actions = new Actions(driver);
    actions.moveToElement(element);
    actions.perform();

文档：https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。