Hi @4280-kazurayam @Andrej Podhajský @Russ Thomas and others,
We are using Katalon for testing web application with angular components and from UI level there is no issue (shadow DOM works fine) but in some instances it would help us if we could make direct calls to angular objects or services (to avoid going trough UI… and here I don’t mean REST APIs but calling directly angular services).
For example, within Chrome console I can make a call for getAllAngularRootElements(); or ng.probe($$(‘component-name’)[0]).componentInstance.appTitle.length; and those return successfully and I just want to be able to do the same using Katalon Studio.
The way we are trying to do this is to use javascript execution which works fine for some basic stuff (like String pageTitle = WebUI.executeJavaScript(‘return document.title;’, null) but when I try to do a call like like ng.probe($$(‘component-name’)[0]).componentInstance.appTitle.length;
it returns error like this
11-14-2018 04:29:19 PM - [FAILED] - Unable to execute JavaScript. (Root cause: org.openqa.selenium.WebDriverException: unknown error: $$ is not defined
_ (Session info: chrome=70.0.3538.102)_
_ (Driver info: chromedriver=2.43.600210 (68dcf5eebde37173d4027fa8635e332711d2874a),platform=Windows NT 10.0.16299 x86_64) (WARNING: The server did not provide any stacktrace information)_
Is there a way around this? Any suggestions?
I have attached couple of screenshots to maybe explain better what I am asking for.
Thanks!
R
KatalonAngularComponents_KatalonStudio.jpg
KatalonAngularComponents_Chrome.jpg
We got it to work 
Very simple solution.
Instead of passing $$(‘component-name’)[0] to
**ng.probe($$(‘component-name’)[0]).componentInstance.appTitle.length
**we are passing query selector (and this eliminated $$ error)
**ng.probe(window.document.querySelector(‘component-name’)).componentInstance.appTitle.length
**this is how the final call looks…
def length = WebUI.executeJavaScript(****“return ng.probe(window.document.querySelector(‘component-name’)).componentInstance.appTitle.length;”, null)
In case you are calling a method that does not return anything you just need to remove **return **from the JS.
Rasko
Just to mention… appTitle.length I used just as an example (not something we need in our tests) but the concepts applies to any angular object property or method…
2 Likes
+1 Yes, excellent job, Rasko!
I’m intrigued though, why $$ isn’t working for you. (Warning - I’m not experienced using angular – is $$ provided by it?)
Pretending now that you were using something like jQuery… if jQuery’s $() calls fail. it’s usually because the context has changed, perhaps because there’s an iframe involved. But then, it’s usually the case that the console fails… I find this very strange…
I’m basically saying, I’d really want to know why a console call works, but the same code fails in a groovy->js call. That’s not how Katalon/groovy is meant to behave. And if there are issues with the groovy->js infrastructure, I’d want (need!) them fixed, asap.
