How to click an element that is blocked in protractor?

Question

Im trying to click a button but sometimes a pop up gets in front of this button, and my automation script fails telling me the element is intercepted and not clickable, I have a function to scroll down to the element, but still this other element gets in front, is there a way to workaround this blocking element?

I can try actions, but this will not work in FireFox as in protactor its not supported, any ideas how to create a function to "Round" the element to make sure no other element is blocking it?

Answer 1

First of all, direct answer to your question. Use this java scrip click

/**
*  Clicks on passed element by injecting js click() in the context of window
*  @param    {ElementFinder}      $element       Locator of element
*  @return   {Promise}
*/
let jsClick = $element => 
        return browser.executeScript(
            'arguments[0].click();', $element.getWebElement()
        );

What it does - when you call the function and pass an element, it injects a js code into browser's console. this code locates your element and performs a click. Important difference that it will click the element regardless of layout or it's visibility, so don't overuse it in tests, because it's not really a user-like behavior

Also, what element blocks your button? I've had this many times, when a third party integration brings up some random popups, and you don't have a control over those elements. What I did, and it always worked, I was removing that integration also by injecting some code in browser. But the code is different for all of them, so you'll need to research this. Example is here https://stackoverflow.com/a/59039308/9150146

Answer 2

Whenever the popup appears use browser.driver.switchTo().alert().dismiss(); to dismiss javascript popup and then continue the automation.