Problems with webDriver JavaScript clicking!

"Let's click that element using javascript... so we could avoid issues like ElementNotInteractable, or AnotherElementWillReceiveTheClick." some automation engineer - 2020.

I have heard this one many times, and to be honest there are edge cases where it is the only way to make that click work. But I personally try to use that approach as the latest source and here is why...

Story

I got a message from a customer today saying: 'Hey marketing can't save new components on the page, they are saying that there is no save button'.

So I opened my email to check the automated tests and they were all Passed. 100% success. At this point I started to think that it was most likely a glitch on the system. So I started testing manually and found out that the save icon was indeed missing.

But then.. how did my tests didn't find this issue? This is a flow that all the tests go through, that means I should have had hundreds of failures.

So I opened the code and.. found the problem right away...

...
seleniumHelper.clickElementJavaScriptExecutor(checkIcon);
...
   public void clickElementJavaScriptExecutor(WebElement element){
        ((JavascriptExecutor)driver).executeScript("arguments[0].click();", element);
    }
...

This is one of those cases where the bug is 100% test case proof, or in different words I had useless tests.

Explanation

For this specific case, the element does exist on the page.

But it was hidden, not visible for normal customers and for javascript that doesn't mean anything. The script will just trigger the click event bind to it and move on as long as the element exist.

And that caused the automated flows to complete with no error, the test cases never exposed a real customer issue. After changing the javascript clicking for a normal click, all the tests started failing as expected.

checkIcon.click();

WebDriver error. Failed Authoring: Component: phonenumber
Failure Reason: org.openqa.selenium.ElementNotInteractableException: element not interactable.

End notes

Remember that every single action on the script should behave as a validation. Clicking, typing, selecting.. if one of those fail you got yourself a problem in the website this is a continues validation approach that would help your tests being more reliable and avoid false positives. (like in my story).

So using javascript to click the elements is sometimes a good idea, for example when the normal webdriver clicking doesn't seem to work, or you have a very specific UI that place components on top of each other and the clicking area is very small.

But we should try to avoid it, cause it is not a real user flow.

Comments?

cheers :) and remember to keep using webdriver
https://pjcalvo.github.com

if you liked the post: