org.openqa.selenium.ElementNotVisibleException: element not interactable while trying to click an element through selenium

Question

I am trying to click Add New button. But it is throwing an error, saying org.openqa.selenium.ElementNotVisibleException: element not interactable

<div id="left-tabs-example-pane-metastore" aria-labelledby="left-tabs-example-tab-metastore" role="tabpanel" aria-hidden="false" class="fade tab-pane active in">
   <div class="title col-sm-12"><button class="custom-btn create-new-button" style="float: right;">Add New</button></div>
   <div class="test_table custom-test_table">
      <div class="divTable">
         <div class="divTableHeading">
            <div class="row" style="margin: 0px 3px; border-bottom: 1px solid rgb(221, 221, 221); padding: 15px;">
               <div class="col-sm-3">Name</div>
               <div class="col-sm-3">Created by</div>
               <div class="col-sm-3">Created on</div>
               <div class="col-sm-2">Status</div>
               <div class="col-sm-1">Actions</div>
            </div>
         </div>
         <div class="divTableBody">
            <div class="row" style="margin: 0px 3px; border-bottom: 1px solid rgb(221, 221, 221); padding: 15px;">
               <div class="col-md-3" title="beta-stage-metastore" style="text-overflow: ellipsis; display: inline-block; white-space: nowrap; overflow: hidden;"><a href="#/projects/p-b48010e4-873a-4c4b-9c71-10235dfc8cf0/resources/rds-3e5e6b92-0d59-4485-bf7a-e6965eb7f9f8/details">beta-stage-metastore</a></div>
               <div class="col-md-3">betaorg-admin</div>
               <div class="col-md-3">9th February at 13:17 hrs</div>
               <div class="col-md-2" style="overflow-wrap: break-word;">STOPPED</div>
               <div class="col-sm-1">
                  <span class="dropdown custom_dropdown option-custom_dropdown" style="border-right: none;">
                     <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="images/more.png"></a>
                     <ul class="dropdown-menu">
                        <li><a>Start</a></li>
                     </ul>
                  </span>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

I have tried following:

driver.findElement(By.cssSelector(".custom-btn.create-new-button")).click();

Xpath for Add New button generated using chrome extension is:

/html/body/div[@id='app']/div[@class='_loading-overlay']/main/div[@class='container-fluid search_table_container']/div[@class='col-md-12 test_tab_wrapper']/div[@class='test_subtab_container']/div[@id='left-tabs-example']/div[@class='col-sm-12'][2]/div[@class='tab-content']/div[@id='left-tabs-example-pane-resources']/div/div[@class='workflowtab_box']/div[@class='row vertical_tab_panel_container']/div[@id='left-tabs-example']/div[@class='col-sm-9']/div[@class='tab-content']/div[@id='left-tabs-example-pane-metastore']/div[@class='title col-sm-12']/button[@class='custom-btn create-new-button']

Answer 1

Basically, there are four reasons why an element is not interactable.

1) Timing - the time it takes for elements to load. For this, you need to check how to use implicit an explicit wait

2)Check if the element is in a frame. For this, switch to the frame.

3) Incorrect locator

4) Wrong implementation of responsiveness. This still stems from no 3). Some websites have only one code turned on for mobile and web versions. So, the element will have more than one instance when you check the xxxxx.size. You will have to search through the list for the one whose display != none. Then, you can append the position of the element to your xpath or whatever locator you are using. E.g. xxxx/yyyyy/zzzz[3] if the position is 4 in the list.

Use this code for java, Assumptions a)the locator type is id b)name of the list is nameOfYourElements

List nameOfYourElements = wd.findElements(By.id("nameOfYourID")); System.out.println(nameOfYourElements.size());