CODEWITHSUNDEEP
javaseleniumselenium-webdriverxpathcss-selectors
user10144071
user10144071

Reputation: 135

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

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

Upvotes: 3

Views: 2270

Answers (4)

Seunara
Seunara

Reputation: 185

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

Upvotes: 1

undetected Selenium
undetected Selenium

Reputation: 193078

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

Upvotes: 0

Sameer Arora
Sameer Arora

Reputation: 4507

Try the xpath: driver.findElement(By.xpath("//button[text()='Add New']"));

Please check if the element is in an iframe or not. If yes, then you need to first switch to the iframe and then click on the element, for switching to the iframe, you can refer to: How to handle iframe in Selenium WebDriver using java

If its not in an iframe then you can directly click on the element using the above mentioned xpath.

Upvotes: 0

KunduK
KunduK

Reputation: 33384

Please give some wait time to webdriver to visible the element.Please try this.

    WebDriverWait wait = new WebDriverWait(driver, 40);          
 wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div/button[@class='custom-btn create-new-button']"))).click();

Upvotes: 0

Related Questions