The element is not clickable

You could use [WebUI] Wait For Element Not Visible on the

element.
If that doesn’t work, try using JavaScript:
http://forum.katalon.com/discussion/1736/unable-to-click-on-object-other-element-would-receive-click

You can refer to solution described here: https://docs.katalon.com/display/KD/Troubleshooting+common+issues+related+to+interacting+with+an+element

Just as an update, the particular issue I was facing was that the footer on the webpage was at a higher “layer” than the other elements, meaning that any clicks to elements underneath wouldn’t be received. All that was needed to clear up my own issue was adding a “Scroll to Element” command to get the footer out of the way.

…is not clickable at point (88, 520)

All that was needed to clear up my own issue was adding a “Scroll to
Element” command to get the footer out of the way.

Let me take a wild guess - you recorded your test and expected it to work. Right?

It’s far better to manually add your objects to the system if you want to avoid time-wasting endeavors like this (better still, build your own objects, “live” in memory during your test).

Ohh, that is too funny. Thanks! You started my Friday off rather nicely. Thanks @Matthew_Miyares for the fix suggestion, but even with scroll to “element” (which fixed a previous text field – and now I want to save the form), I still get

Element <input type="button" onclick="return false;" id="scum_savret" class="btn undefined btn-default" value="Save and return"> is not clickable at point (181, 472). Other element would receive the click: <div class="yui3-widget-mask" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000;">

My script said:
WebUI.scrollToElement(findTestObject(‘Pages (Pond Scum Tests)/scum button save and return’), 0)
WebUI.click(findTestObject(‘Pages (Pond Scum Tests)/scum button save and return’))

Have you considered using JavaScript to click on elements instead of the WebUI API (which uses Selenium commands in the background)?

We have apps that have overlays, things rendering on top of each other periodically, modal dialogs, etc, and often you’ll get much more consistent and desirable behavior using Javascript, jQuery, etc, to do the majority of the work:

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement

import com.kms.katalon.core.webui.common.WebUiCommonHelper
import com.kms.katalon.core.webui.driver.DriverFactory

// Turn your TestObject into a WebElement...
WebElement element = WebUiCommonHelper.findWebElement(findTestObject("my/test/object"), 30);

// Get the current driver from Katalon and convert to a JavascriptExecutor...
WebDriver driver = DriverFactory.getWebDriver();
JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;

// Click your WebElement using JavaScript...
jsExecutor.executeScript("arguments[0].click();", element);

If you find that this kind of thing works for you, consider creating a Custom Keyword that acts as a utility method, then you can pass any objects that you want to click. Also, this approach isn’t limited to clicking on elements, we also use similar methods to set dropdowns, send keys to text fields, etc.

Hope this helps!

1 Like

You can shorten that code @Brandon_Hein by using https://docs.katalon.com/katalon-studio/docs/webui-execute-javascript.html.

And if you bypass TestObjects you can empty out your Object Repository and all the maintenance that goes with it too. Use the same philosophy you mentioned, but create a method that takes a CSS selector and shoots off the click (or whatever)…

static void clickUsingJS(String selector) {
  WebUI.executeJavaScript('document.querySelector("' + selector + '").click()', null)
}
2 Likes

@Russ_Thomas Nice, I didn’t realize that the WebUI class had that wrapper method. But I would still suggest using the Object Repository to manage locators/selectors. In our case, we have several layers, one of which is a Page Object layer, which calls the repository for the TestObject, converts to WebElement, passes to the utility methods to perform the action, and handles any wait conditions after the action is performed. It’s a matter of preference, but I would prefer handling TestObjects rather than digging through a class to find a given selector. In that case it would look like:

static void clickUsingJS(WebElement element) {
  WebUI.executeJavaScript("arguments[0].click();", element);
}

No problem, Brandon, as you say, it’s a matter of preference(s).

Me, I’d rather fly direct from New York to London. An excursion to Tokyo “midway”, to me, makes no sense. Test Objects (in this, I admit, poor analogy) are Tokyo. They’re a contrivance the efficacy of which eludes me. They “pack up” and “wrap” HTML elements. They need unpacking once they reach code that communicates with the browser. APIs are required to unwrap them to convert to another wrapper “WebElement”…

Nope. Just don’t get it. Sorry.

Browsers use CSS as selectors. CSS is optimized beyond belief (and certainly beyond my humble abilities to achieve). I’ll stick with them and eshew anything that prevents me from using them in as direct a manner as possible.

Anyway, I’ve harped on about this enough in these forums. Time I just shut the hell up :smile:

Oh… almost forgot. You can of course make your own TestObjects “live” in memory (and still dump the OR) if you want the best of both worlds. Search on makeTO.

1 Like

Calling them contrived is a bit unfair. While they are indeed less direct than a simple CSS selector passed as a string, I would argue that their convenience and versatility far outweigh the extra baggage. Consider the following:

1.) Most Katalon users will be more familiar/comfortable with the use of TestObjects, as all the tutorials and documentation will encourage and detail their use.
2.) While CSS as a selection strategy is indeed optimized, it’s by no means the most readable nor does it provide the most power in terms of complex location strategies. XPath probably takes the cake on that one.
3.) The utility method you’ve provided betrays the single responsibility principle, as it’s both locating and manipulating the element. In my case, the TestObject (and by extension, the underlying WebElement), having already been located, can be passed around to other methods to do a lot of other cool stuff like getting attribute values, finding other elements relative to it, etc.

Thanks as always for the informed discussion, it’s always enlightening to see how others approach these things. :metal:

Oh, agreed. “We are where we are”. My suspicion is though, that it’s more the Recorder tool that drove their need/requitement. Either way, it’s the effect of the cause (whatever the actual cause).

Agreed. XPath certainly wins if backtracking (parent/ancestor selection) is required.

That’s fair. Not sure I see/feel the need to worry about design philosophy to that level in automated testing (I’m open to being convinced though).

Sure! I’m wrong way more often than I’m right :wink:

Not sure I see/feel the need to worry about design philosophy to that level in automated testing (I’m open to being convinced though).

I believe this depends on the complexity of the application(s) you are testing. In our case, we have several clients that all use an implementation of an application that has a shared code base, but that also has significant differences from other client implementations. In this kind of environment, OOP design principles are paramount, especially with a small team of testers to write/maintain a large script base.

Admittedly, the amount of abstraction may be overkill for a lot of people, but it never hurts to approach an automation project just like you would any development project.

Hi guys,
Thanks for the informative and extremely polite exchange to help understand how to get at those elements that have other element laid over them. “Where I am at” as a beginner is keeping an object library (I use the spy web and then manually adjust the Xpath as needed) to keep myself organized. Trying to understand a bit @Brandon_Hein code I have the following question (sorry, never programmed in java):

The two lines of // Get the current driver from Katalon and convert to a JavascriptExecutor… just need to be executed once (place that right after the imports of my script) and then whenever I have a web element that gives the old "Web element not clickable at point… " I can 1. Turn my testobject into a web element and then 2. click the web element using javascript ? That the idea? Seems to have worked for the first element but not the second.

No, Curtis. Brandon was giving you a self contained, working demo. As he goes on to say…

If you find that this kind of thing works for you, consider creating a Custom Keyword that acts as a utility method, then you can pass any objects that you want to click.

So the general idea is, create a method (i.e. a Keyword in current Katalon parlance), call it something like “jsClicker” and then you can wrap that code up into a simple/single utility method you can call from any test case. He also goes on to suggest you could extend the idea to other scenarios, like for example, retrieving values, checking attributes etc, all using JS.

Personally, I don’t bother using the @Keyword decorator. I just make my util methods static and import the lib statically everywhere I need it.

static void jsClicker(whatever) {
  // do js stuff
}

If you haven’t done so already, read this:

https://docs.katalon.com/katalon-studio/docs/sample-custom-keywords.html

1 Like

@Curtis_BRODERICK

Exactly as Russ and I have said, if it’s something that you want to use across multiple scripts (which you almost certainly will if it worked for you already), you will want to encapsulate this into a method. Russ has linked you a demo on generally how to create/work with Custom Keywords, but I can also give you a brief demo and some code to get you started:

1.) In your Tests Explorer, right click on Keywords, then click on New > Keyword
image

2.) You’ll be prompted with a dialog. For now, just call the Package “util” and the Class Name “Util” (this follows Java convention):
image
Feel free to reorganize/rename things later of course.

3.) Since you said you are using the Object Repository, I will assume that you will be passing TestObjects to the utility method. If that’s the case, go ahead and copy over all of the auto-generated code in your Util class with the following (Updated this to match the solution from below that seems to work better):

package util

import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement

import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import com.kms.katalon.core.webui.driver.DriverFactory

public class Util {

	public static void jsClick(final TestObject testObject) {
		WebElement element = WebUiCommonHelper.findWebElement(testObject, 30);
		WebDriver driver = DriverFactory.getWebDriver();
		JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;
		jsExecutor.executeScript("arguments[0].click();", element);
	}
}

4.) You can then call this method from ANY Test Case that you want just by importing the Util class, and calling the method:

import com.kms.katalon.core.testobject.ObjectRepository
import com.kms.katalon.core.testobject.TestObject as TestObject

// This is the import statement for the "Util" Custom Keyword we've created:
import util.Util

TestObject myTestObject = ObjectRepository.findTestObject("path/to/my/object");
Util.jsClick(myTestObject);

If you choose not to wrap this up into a method, you will be forced to type out this code yourself anytime you want to use JS to click something, which obviously isn’t great.

Hope this helps!

2 Likes

Brandon, thank you for this util sample. This static approach I am also going to use it for my projects tomorrow :wink:

Wow! @Brandon_Hein I see that you perceived clearly when I said “never programmed in java”. Thanks for the very clear instructions. Thanks @Russ_Thomas for clarifying as well. Before trying Brendon’s keyword solution, I used the ‘self contained’ solution (I hate saying the word method here as it really confuses things) which did successfully get to that button that was hidden under some other object(s). Commented out that and then tried with my new keyword in my util package.

Unfortunately, Katalon doesn’t seem to find the method executeJavaScript() as it spits this back to me.
groovy.lang.MissingMethodException: No signature of method: static com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.executeJavaScript()
and then points to line 13 of the Util.groovy: WebUI.executeJavaScript(“arguments[0].click();”, element);

@Curtis_BRODERICK

Yea, the WebUI API can be troublesome at times (or I’m just using it incorrectly). Since the approach in my original comment seemed to work for you, we can just use that. It’s a bit more verbose, but not too bad. Go ahead and replace your Util class with this:

package util

import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement

import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import com.kms.katalon.core.webui.driver.DriverFactory

public class Util {

	public static void jsClick(final TestObject testObject) {
		WebElement element = WebUiCommonHelper.findWebElement(testObject, 30);
		WebDriver driver = DriverFactory.getWebDriver();
		JavascriptExecutor jsExecutor = (JavascriptExecutor)driver;
		jsExecutor.executeScript("arguments[0].click();", element);
	}
}

I ran this on my side as well to be sure, should work fine :slight_smile: I’ve updated the demo I gave above to match this.

Side note: A “method” in Java is analogous to a “function” in C/JavaScript/etc. It’s just a set of code you can call to do some chunk of work for you.

2 Likes

YES Excellent. Just about to leave the office and bing, it works. BIG thanks Brendon and Russ.
Curtis

Glad to help :metal: