What could cause element not clickable while it is the same element? - selenium

Question

An img WebElement click rarely fails claiming the Element is not clickable even though the element that would get the click is the same.
I have a dialog that contains some button (close button with img X inside of it).
When I try to click the close the dialog by clicking on the WebElement for the img, rarely, I'd get WebDriverException as follows:
Caused by: org.openqa.selenium.WebDriverException: unknown error: Element
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCB8QKRBsEUJwAAAAn0lEQVQoz72RMQ7CMAwADwbgCSyhqmDpFj6AWqSOfIoH8BkGNsLGhiwG6NKJDvwBBoaExPCAeontu0SWA32F1HKTRawyucjK58PQ21LgvCIZjiU7DwbhzpQjBR0lbxw5LaXtlKCUl8ZKiAoapxkARkzCOU7NKMiMEzktdwxO5n9CxBVrGq18Xzh4bB/2SUWDYf+7qI1cxaRx5Sx1b7/0AYDRNbDgNXvDAAAAAElFTkSuQmCC" class="gwt-Image" style="visibility: visible;"> is not clickable at point (834, 307). Other element would receive the click:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhCB8QKRBsEUJwAAAAn0lEQVQoz72RMQ7CMAwADwbgCSyhqmDpFj6AWqSOfIoH8BkGNsLGhiwG6NKJDvwBBoaExPCAeontu0SWA32F1HKTRawyucjK58PQ21LgvCIZjiU7DwbhzpQjBR0lbxw5LaXtlKCUl8ZKiAoapxkARkzCOU7NKMiMEzktdwxO5n9CxBVrGq18Xzh4bB/2SUWDYf+7qI1cxaRx5Sx1b7/0AYDRNbDgNXvDAAAAAElFTkSuQmCC" class="gwt-Image" style="visibility: visible;">
As you can see the elements are identical. I started to doubt the Staleness of the element, its enablement, and even the possibility that the element moves.
Below is a code snippet that includes debugging message when I will explain.
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);
}
}
Before executing the click:
Position: (826, 299), Dimensions: (16, 16)
close button: stale? false displayed? true enabled? true clickable? true
After executing the click and catching the exception:
Position: (826, 299), Dimensions: (16, 16)
So the element has not moved.
As you can see inner HTML is just one 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>
So any suggestions as to why this is happening would be much appreciated.

Answer 1

Try induce java Scripts executor to click on the element with following 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);

Answer 2

It might be the case the <img> itself is not clickable and you need to click the parent <button> instead.
In XPath you can access the any element in the DOM and its parents, children, siblings, etc.
So I would recommend amending your selector to point to the parent button :
//img[#class='gwt-Image']/parent::button
and my expectation is that the click should be successful.
References:
XPath Tutorial
XPath Axes
XPath Operators & Functions