ElementNotInteractableException: element not interactable: element has zero size appears since upgrade to chromedriver 83

The root cause of that issue is that Chrome doesn't scroll to the element outside of the viewport. Instead of it, Chrome tries to click on it outside of the viewing area. That's why the issue appears. It is definitely an issue with Chrome 83 because I didn't face it on Chrome 81.

Moreover, I have no such issue on Windows machine, it reproduced only on Linux (I'm using selenoid docker images).

Solution with a click via JS is not the best option, because via JS you can click anywhere even for unclickable elements (e.g. overlapped by other objects). It's an unsafe operation.

Instead of this, I would suggest scrolling to the element before click and after native click(); it will work just perfectly.

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

I got around this by using the --window-size argument when I'm using headless chrome. E.g. chrome --headless --window-size=400,800.

I do not know what changed or why this is a sufficient workaround.

I'm getting this error also, i did some digging, i found that the element size contains 0, for example an element of size 200 x 0 will get you this error if you want to click on it. This is not a docker only error, i'm getting it on local chrome 83.

Try clicking on element using the Javascript Executor:

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

In our case, the root cause was a CSS/HTML problem: an anchor was wrapping a div and expected to implicitly gain a size from that of this child element.

Previous versions of Chrome had been tolerant of this, but from v.83 Chrome seems to have become stricter on this front.

So, in this case the solution was to change from something like this:

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

To something like this:

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

This is valid HTML5.

I ended up using scrollIntoView() which did the trick (below code is from Protractor test):

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

browser.sleep(500);

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

I got around it by clicking a child <input> element inside the element that supposedly had zero width.

I had the same problem as you with chrome driver updating to 83, i was able to get around this problem.

 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()");

Using Jquery will help you access this

Original post: https://stackoverflow.com/a/68740025/1244630

Instead of using Click, rather press enter. This worked for me:

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

My solution:

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

Documentation: https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html