Selenium test fails “Element is not clickable at…”

Question

I have a selenium java tests that should click on an element but I get the following error :

org.openqa.selenium.WebDriverException: Element is not clickable at point (1123, 355). Other element would receive the click: <img src="/vdoc/images/transp.gif" height="100%" width="100%">
Command duration or timeout: 178 milliseconds
Build info: version: '2.53.0', revision: '35ae25b1534ae328c771e0856c93e187490ca824', time: '2016-03-15 10:43:46'
System info: host: 'VM-DEV-SELENIUM', ip: '192.168.60.216', os.name: 'Windows Server 2012', os.arch: 'amd64', os.version: '6.2', java.version: '1.8.0_60'
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{applicationCacheEnabled=true, rotatable=false, handlesAlerts=true, databaseEnabled=true, version=46.0.1, platform=WINDOWS, nativeEvents=false, acceptSslCerts=true, webStorageEnabled=true, locationContextEnabled=true, browserName=firefox, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true}]
Session ID: e74f1926-e4a0-4326-8e35-3ea31797308c
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:422)
    at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:206)
    at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:158)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:678)
    at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:327)
    at org.openqa.selenium.remote.RemoteWebElement.click(RemoteWebElement.java:85)
    at ...

The problem is that the test should wait for an overlay to disapear The overlay is present in the DOM and uses z-index :

<div id="ui-loader-background" class="ui-loader-background" style="display: none; position: fixed; z-index: 9999; top: 0px; left: 0px; width: 2032px; height: 1034px;">
    <img width="100%" height="100%" src="/tata/images/transp.gif">
    <div class="ui-loader" style="position: fixed; left: 843.5px; top: 487px;">
        <div class="ui-loading">
            <span>Veuillez patienter ...</span>
        </div>
    </div>
</div>

I'm looking for my element in the DOM with the following CSS selector:

.screen.platform.vui-screen-explorer.EzsSite-browse table > tbody > tr:nth-child(13) > td:nth-child(2) > a:nth-child(2)

And using this code :

WebElement element = new WebDriverWait(driver, 15000)
                .until(ExpectedConditions.elementToBeClickable(By.cssSelector(cssSelector)));
element.click();

I've already tried to wait for the invisibility of the overlay before finding my element but it does not work :

By loadingImage = By.ByCssSelector.className(".ui-loader-background");

        Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
                .withTimeout(10, TimeUnit.SECONDS)
                .pollingEvery(5, TimeUnit.SECONDS)
                .ignoring(NoSuchElementException.class);

        wait.until(ExpectedConditions.invisibilityOfElementLocated(loadingImage));

Answer 1

Using ExpectedConditions.invisibilityOfElementLocated to wait until overlay disappeared is good idea, but you're trying to get rid of <div> that has style="display: none" attribute, so it is initially invisible. Also if you check exception log: Other element would receive the click: <img src="/vdoc/images/transp.gif" height="100%" width="100%"> , required element is not mentioned div , but img .

So try to use CSS selector 'img[src="/tata/images/transp.gif"]' to define loadingImage web-element