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

user10144071 :

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']

DebanjanB :

To click on the element with text as Add New you can use either of the following solutions:

• cssSelector:

  driver.findElement(By.cssSelector("div.tab-content>div#left-tabs-example-pane-metastore>div.title>button.custom-btn create-new-button")).click();
  

• xpath:

  driver.findElement(By.xpath("//div[@class='tab-content']/div[@id='left-tabs-example-pane-metastore']/div[contains(@class, 'title')]/button[@class='custom-btn.create-new-button' and text()='Add New']")).click();