How to Fix “Element is not clickable” in Selenium WebDriver tests?

Three ways to resolve the “Element is not clickable” issue in Selenium.

A repost of my daughter’s article with permission. I added the refactoring part.
You can find more Selenium examples like this one in my eBook: Selenium WebDriver Recipes in Ruby. This is also included in my “How to in Selenium WebDriver” series.

“Element is not clickable” is a common error that Selenium test automation engineers often encounter. This might be applicable to other test automation frameworks, with different error messages. There are possible two causes:

1. The element is not clickable, such as disabled or not allowed to click by nature (e.g. a hidden field)
   this is easy to find out by inspecting (via right-click in Chrome), the solution is to change/refine the locator.
2. The element is not viewable in the browser, by the definition of Selenium, not humans (there might a very minor differences)

This article will explain the second type. Below is a test failure of trying to click the exclamation icon.

The test failed (the above: webpage, the below test failure output)

Tip: run the test and keep the browser open so that you can inspect the web page, test scripts and test output all-together. Check out: Keep the Browser Open after Executing an Individual Test.

Analyse

The test step:

driver.find_element(:class, "fa-warning").click

The error output:

Failure/Error: driver.find_element(:class, "fa-warning").click
     Selenium::WebDriver::Error::ElementClickInterceptedError:
      element click intercepted: Element is not clickable at point (1201, 611)
       (Session info: chrome=102.0.5005.115)

The reason:

Selenium is unable to click the exclamation icon, which is inside the viewable of the browser window. However, it is just, not enough for Selenium, even though we (human beings) could see it. This is a rare case (clickable element on the edge of the…