How to resolve exception - "element click intercepted ,Other element would receive the click"?

Question

Here is my script -

next=WDS.browser.findElement(pkg.By.xpath("//button[contains(@class,'btn btn-sm btn-light border ml-3')]"))
 
while(next.isEnabled()==true)
            {
                //java.lang.Thread.sleep(4000);
                
                var wait19 =new org.openqa.selenium.support.ui.WebDriverWait(WDS.browser, 9000)
        wait19.until(org.openqa.selenium.support.ui.ExpectedConditions.elementToBeClickable(pkg.By.xpath("//button[contains(@class,'btn btn-sm btn-light border ml-3')]"))).click()
                
                 
                
    next=WDS.browser.findElement(pkg.By.xpath("//button[contains(@class,'btn btn-sm btn-light border ml-3')]"))
//WDS.log.info(WDS.browser.getPageSource())
                if (!next.isEnabled()) {
                    WDS.log.info('Next button disabled')
                      break
                                   }
            }

In my application, I need to visit total 300 pages and calculate time taken to traverse from first page to last.

But, when click on next button, it throws exception:

ERROR c.g.j.p.w.s.WebDriverSampler: element click intercepted: Element <button _ngcontent-pde-c133="" class="btn btn-sm btn-light border ml-3">...</button> is not clickable at point (226, 567). Other element would receive the click: <div _ngcontent-pde-c109="" class="overlay ng-tns-c109-11 ng-trigger ng-trigger-fadeIn ng-star-inserted ng-animating" style="background-color: rgba(0, 0, 0, 0.8); z-index: 99999; position: fixed;">...</div>

How do I resolve it?

Answer 1

The error means that the button you're trying to click is being "covered" by some form of animation loader/spinner most probably showing that the data is loaded

You need to use Explicit wait to wait until this animation loader becomes invisible so you would be able to click the button.

Put this line before the line which fails:

wait19.until(org.openqa.selenium.support.ui.ExpectedConditions.invisibilityOfElementLocated(pkg.By.xpath("//div[contains(@class,'ng-animating')]")))

and it should resolve your issue.

More information: The WebDriver Sampler: Your Top 10 Questions Answered

Answer 2

Initially, this problem occurred when WebDriver is not able to click on the element it want to click.

In outsourced software testing companies this problem is resolved using Action class. For example,

Actions action = new Actions(driver);

action.moveToElement(element).click().perform();

Here, element is the locator on which we want to click on.