org.openqa.selenium.ElementNotVisibleException：尝试通过 selenium 单击元素时元素不可交互

Question

我正在尝试点击添加新的按钮。但它抛出一个错误，说 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>

我尝试了以下方法：

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

使用 chrome 扩展生成的 Add New 按钮的 Xpath 是：

/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

基本上，元素不可交互的原因有四个。

1) 时间 - 元素加载所需的时间。为此，您需要检查如何使用隐式显式等待

2)检查元素是否在框架中。为此，请切换到框架。

3) 定位器不正确

4) 响应性的错误实现。这仍然源于3）。有些网站只为移动版和网页版启用了一个代码。因此，当您检查 xxxxx.size 时，该元素将具有多个实例。您必须在列表中搜索显示为 != none 的列表。然后，您可以将元素的位置附加到您的 xpath 或您正在使用的任何定位器。例如。 xxxx/yyyyy/zzzz[3] 如果列表中的位置是 4。

将此代码用于java， 假设 a) 定位器类型是 id b) 列表的名称是 nameOfYourElements

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

Answer 2

要点击文本为 Add New 的元素，您可以使用以下任一解决方案：

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

Answer 3

请给 webdriver 一些等待时间以显示元素。请试试这个。

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

Answer 4

试试 xpath：driver.findElement(By.xpath("//button[text()='Add New']"));

请检查元素是否在 iframe 中。如果是，那么需要先切换到iframe再点击元素，切换到iframe可以参考：How to handle iframe in Selenium WebDriver using java

如果它不在 iframe 中，那么您可以使用上述 xpath 直接单击元素。