How to deal with overlay animation using selenium webdriver?

Question

The web application I'm trying to automate test cases for uses an overlay animation every time page is refreshed or as the user navigates from one page to another.

I have tried applying fluent wait but that doesn't seem to work as the element still appears clickable/visible to the driver before the overlay is actually gone, so it ends throwing click intercepted exceptions. As far as overlay itself is considered, it is not detectable on page until it appears, so selenium throws an element not found error if the overlay element is used for fluent wait.

I was wondering if anyone has ever handled such cases and knows any solution?

Answer 1

You handle overlay as any other element.

If overlay animation is a loading spinner, then you should use an explicit wait in this sequence:

1. Explicit wait for element to be present
2. Explicit wait for element to be not present

Reason:

If you just wait for element not present, then the code may move to the next line before the overlay has been displayed yet.

Note: Unless you add code, screen shot, html, etc its hard to answer more than this.

Answer 2

I know you said that you have attempted a Fluent wait but you might not have tried it with these extra methods chained on it. The below wait will check for your element every 500 milliseconds for a maximum of 30 seconds and it will ignore NoSuchElementExceptions.

new FluentWait<>(driver)
    .withTimeout(Duration.ofSeconds(30))
    .pollingEvery(Duration.ofMillis(500))
    .ignoring(NoSuchElementException.class)
    .until(ExpectedConditions.visibilityOf(element));

Depending on how your setup is structured this may need to be coupled with another FluentWait where the ExpectedConditions is looking for the .invisibilityOf(element). With those two things coupled together you can have a wait method that will wait for your element to appear and disappear before continuing.