Katalon is not able to perform click on Angular (mat expansion panel and mat tabs), did anyone face the same issue and solved it?

Product Forums Katalon Studio
,
1

Katalon is not able to perform click on Angular (mat expansion panel and mat tabs), did anyone face the same issue and solved it?

2

Hello,

There should be no problem for Katalon to interact with them.

Here is a quick example of how to click on tabs on this Angular Material 2 App - Tabs DEMO PAGE


WebUI.openBrowser("https://angular-material2-custom-tabs.stackblitz.io/")
WebUI.delay(15)

TestObject firstRowTest2Tab = new TestObject()
firstRowTest2Tab.addProperty("xpath",ConditionType.EQUALS,"(//div[text()='Test 2'])[1]")

TestObject secondRowTest3Tab = new TestObject()
secondRowTest3Tab.addProperty("xpath",ConditionType.EQUALS,"(//div[text()='Test 3'])[2]")

WebUI.click(firstRowTest2Tab)
WebUI.delay(3)
WebUI.click(secondRowTest3Tab)


WebUI.delay(15)
WebUI.closeBrowser()

Please note that having test object defined in script is not the best practice. It has been used here just to show everything in one piece of code.

Best regards
Ismar

1 Like
3

Hi Ismar,

Thanks a TON for providing the simple solution. Here the issue is not about identification of the element on the DOM and UI. The main issue is happening while trying to click on the identified element through katalon script.

Please see below
02-01-2019 10:47:32 AM click(findTestObject("/d_Tab"), CONTINUE_ON_FAILURE)

Elapsed time: 0.545s

Unable to click on object ‘Object Repository/D_Tab’ (Root cause: org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (1342, 117)

(Session info: chrome=71.0.3578.98)

(Driver info: chromedriver=2.43.600210 (68dcf5eebde37173d4027fa8635e332711d2874a),platform=Windows NT 10.0.15063 x86_64) (WARNING: The server did not provide any stacktrace information)

Command duration or timeout: 0 milliseconds

Build info: version: ‘3.7.1’, revision: ‘8a0099a’, time: ‘2017-11-06T21:07:36.161Z’

Regards,
Sriker Paidy

4

“Element is not clickable at point (x, y)” error message (as the name says) indicates that Katalon has found that element but can’t click it for some reason. Here are some possible reasons and solutions:

  1. First scroll to elemnet: In some older drivers it was required to first scroll to element then to click on it. (NOTE: If you are using up to date katalon with up to date drivers this should not be the problem, but you can still try it). You can use [WebUI] Scroll To Element function. Example:
WebUI.scrollToElement(findTestObject('Object Repository/D_Tab'), 3)
WebUI.delay(5)
WebUI.click(findTestObject('Object Repository/D_Tab'))
  1. Scroll to and mouse over before click: I worked with websites that had links that do not work before putting your mouse over it and then clicking. So just add [WebUI] Mouse Over before clicking the object. Example:
WebUI.scrollToElement(findTestObject('Object Repository/D_Tab'), 3)
WebUI.delay(5)
WebUI.mouseOver(findTestObject('Object Repository/D_Tab'))
WebUI.delay(3)
WebUI.click(findTestObject('Object Repository/D_Tab'))

  1. Something is covering up the element: Please check if your element is covered up by anything. For example cookie notification message with page overlay or anything like that. Be sure that there is no other HTML element covering it

  2. Use pure JS: I usually use [WebUI] Execute JavaScript only as a last resort. It is not bad practice but I would recomend you use selenium/katalon whenever possible. Example:

WebUI.executeJavaScript('''var link = document.getElementById('mat-tab-label-0-1');
link.click()''');

Please do note that 4th step requires you to know JS and how to trigger a click on element. You can write this script with jQuery if your site has it included.

If you have and can provide public link to website that you are testing I will gladly take a look at it as soon as I can

1 Like
5

Hi Ismar,

Thanks for your detailed response. But only the javascript option worked for me. I am fine with using the JavaScript, but is there a possibility to get the XPath/CSS of the object stored in object repo of Katalon?

So that I can fetch the XPath/CSS dynamically in the script. otherwise, I have left with no choice than to use the Profiles(GlobalVariables)

Thanks & Regards,
Sriker Paidy

6

I think that can be achieved with flowing script

WebUI.executeJavaScript('''

var link = getElementByXpath("'''+ findTestObject('Object Repository/firstRowTest2Tab').findProperty("xpath").getValue()+'''");
link.click()
function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}


''', null)

Some explanation:
So basicly we are taking the xpath of the test object by using

findTestObject('Object Repository/firstRowTest2Tab').findProperty("xpath").getValue()

and insert it directly into JavaScript.

After that we are using “getElementByXpath” function to get the HTML element by xpath. (CREDITS)

After getting the element we are triggering click event as before.

1 Like
7

Thanks alot Ismar!!

Can you through some light on the function above and explain the return statement.

8

If you are talking about “getElementByXpath” function, unfortunately I can’t explain it. I took it as a “black box” solution not bothering to understand document.evaluate function. All I can tell is that it returns html element that would be selected by xpath.

As I implied by CREDITS, I have not wrote this function and I have taken this solution from mentioned stack overflow question.

Here you can see the documentation for evaluate function including parameters, return value and browser support

1 Like
9

Thanks Ismar… no problem :slight_smile:

I have written the below piece of code for creating a dynamic object by xpath & css.

@Keyword
def createDynamicObject(String objectName, String _cssSelector) {
TestObject _objectName = new TestObject(objectName);
_objectName.setSelectorValue(SelectorMethod.CSS, _cssSelector)
_objectName.setSelectorMethod(SelectorMethod.CSS)
return _objectName
}

@Keyword
def createDynamicObjectwithXpath(String objectName, String _xpathSelector) {
TestObject _objectName = new TestObject(objectName);
_objectName.setSelectorValue(SelectorMethod.XPATH, _xpathSelector)
_objectName.setSelectorMethod(SelectorMethod.XPATH)
return _objectName
}

1 Like