什么可能导致元素不可点击，而它是相同的元素？

Posted 2023-02-16

【中文标题】什么可能导致元素不可点击，而它是相同的元素？

【英文标题】：What could cause element not clickable while it is the same element?

【发布时间】：2019-07-30 02:59:17

【问题描述】：

img WebElement 点击很少会失败，声称该元素不可点击，即使获得点击的元素相同。

我有一个包含一些按钮的对话框（其中包含 img X 的关闭按钮）。

当我尝试通过单击 img 的 WebElement 来关闭对话框时，我很少会得到 WebDriverException 如下：

原因：org.openqa.selenium.WebDriverException：未知错误：元素

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCB8QKRBsEUJwAAAAn0lEQVQoz72RMQ7CMAwADwbgCSyhqmDpFj6AWqSOfIoH8BkGNsLGhiwG6NKJDvwBBoaExPCAeontu0SWA32F1HKTRawyucjK58PQ21LgvCIZjiU7DwbhzpQjBR0lbxw5LaXtlKCUl8ZKiAoapxkARkzCOU7NKMiMEzktdwxO5n9CxBVrGq18Xzh4bB/2SUWDYf+7qI1cxaRx5Sx1b7/0AYDRNbDgNXvDAAAAAElFTkSuQmCC" class="gwt-Image" style="visibility: visible;"> 在点 (834, 307) 处不可点击。其他元素会收到点击：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCB8QKRBsEUJwAAAAn0lEQVQoz72RMQ7CMAwADwbgCSyhqmDpFj6AWqSOfIoH8BkGNsLGhiwG6NKJDvwBBoaExPCAeontu0SWA32F1HKTRawyucjK58PQ21LgvCIZjiU7DwbhzpQjBR0lbxw5LaXtlKCUl8ZKiAoapxkARkzCOU7NKMiMEzktdwxO5n9CxBVrGq18Xzh4bB/2SUWDYf+7qI1cxaRx5Sx1b7/0AYDRNbDgNXvDAAAAAElFTkSuQmCC" class="gwt-Image" style="visibility: visible;">

如您所见，元素是相同的。我开始怀疑元素的 Staleness，它的启用，甚至元素 moves 的可能性。

下面是一段代码sn-p，我会解释时包含调试信息。

private static final By X_BUTTON__SELECTOR
    = WlSeleniumUtils.selectTagWithClass("img", "gwt-Image");

public void clickAndReturnIfAny() 
   WebElement closeImage = manageWorkspaceDialogWebElem
     .findElement(X_BUTTON__SELECTOR);

   // print the elements location before clicking
   System.out.println(String.format
     ("Position: %s, Dimensions: %s", 
      closeImage.getLocation() + "", 
      closeImage.getSize() + ""));
   try 

     // print check for staleness and enablement.
     System.err.println
         ("close button: stale? "
          + driverHelper.isStale(closeImage)
          + " displayed? " + closeImage.isDisplayed()
          + " enabled? " + closeImage.isEnabled()
          + " clickable? " + (ExpectedConditions
                              .elementToBeClickable
                              (closeImage)
                              .apply(driverHelper.getDriver())
                              != null));
     closeImage.click();
   
   catch (WebDriverException wde) 
     System.err.println
         ("Faied to click manage-workspaces dialog's "
          + "close button: stale? "
          + driverHelper.isStale(closeImage)
          + " displayed? " + closeImage.isDisplayed()
          + " enabled? " + closeImage.isEnabled()
          + " clickable? " + (ExpectedConditions
                              .elementToBeClickable
                              (closeImage)
                              .apply(driverHelper.getDriver())
                              != null));

     // print the entire html content to check for multiple img tags.
     System.err.println
         (manageWorkspaceDialogWebElem.getAttribute("innerHTML"));

     // fetch the element again and check its location
     closeImage = manageWorkspaceDialogWebElem
         .findElement(X_BUTTON__SELECTOR);
     System.out.println(String.format
             ("Position: %s, Dimensions: %s",
              closeImage.getLocation() + "",
              closeImage.getSize() + ""));

     throw new RuntimeException
         ("Failed to close mange-workspaces dialog.", wde);
   

执行点击前：

位置：(826, 299)，尺寸：(16, 16)

关闭按钮：陈旧？虚假显示？真的启用了吗？真正的可点击？真的

执行点击并捕获异常后：

位置：(826, 299)，尺寸：(16, 16)

所以元素没有移动。

如你所见，内部 HTML 只是一个 img：

<div class="popupContent">
   <table cellspacing="0" cellpadding="0" style="background-color: rgb(255, 255, 255); width: 100%; height: 100%;">
      <tbody>
         <tr>
            <td align="right" style="vertical-align: top;"><button type="button" class="wl-popup-close-button" style="border-style: none; outline-style: none; background-color: rgb(255, 255, 255); padding: 0px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCB8QKRBsEUJwAAAAn0lEQVQoz72RMQ7CMAwADwbgCSyhqmDpFj6AWqSOfIoH8BkGNsLGhiwG6NKJDvwBBoaExPCAeontu0SWA32F1HKTRawyucjK58PQ21LgvCIZjiU7DwbhzpQjBR0lbxw5LaXtlKCUl8ZKiAoapxkARkzCOU7NKMiMEzktdwxO5n9CxBVrGq18Xzh4bB/2SUWDYf+7qI1cxaRx5Sx1b7/0AYDRNbDgNXvDAAAAAElFTkSuQmCC" class="gwt-Image" style="visibility: visible;"></button></td>
         </tr>
      </tbody>
   </table>
</div>

因此，对于为什么会发生这种情况的任何建议将不胜感激。

【问题讨论】：

我不清楚你的问题。它只是关于一个有时不可点击的元素吗？

【参考方案1】：

尝试诱导java Scripts executor点击具有以下xpath的元素。

WebElement element=driver.findElement(By.xpath("//button[@class='wl-popup-close-button']/img[@class='gwt-Image']"));
javascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", element);

【参考方案2】：

可能是<img> 本身不可点击，您需要点击父<button>。

在 XPath 中，您可以访问 DOM 中的任何元素及其父、子、兄弟等。

所以我建议修改您的选择器以指向parent 按钮：

//img[@class='gwt-Image']/parent::button

我的期望是点击应该成功。

参考资料：

XPath Tutorial XPath Axes XPath Operators & Functions