HI Team,
I am using katalon for a month now, and i wanted to get 1 end to end scenario automate to prove to the business that it is brilliant tool
However I have iframe<6 shadow doms< final element, or combination of iframe< 7-8 shadow dom<iframe<shadow don<final element
It has become pain in the neck to design test object hierarchy
It would be good if spy tool could automatically record the shadow dom and iframe elements
Thanks
Hi,
Sorry for my bad. Can you please explain your situation in more details? What kind of 1 end-to-end scenario automation do you want? As well, the problem you faced
the elements i am trying to click - are under combination of iframes and shadow doms , does that add more context?
thanks
I will quote an example from the Katalon’s official doc:
In this example,
book_app object, which is a Shadow Root Parent, before he newly creates a Test Object named input for the element he wants.I think that these 2 requirements suffers @dipali.gawas.
I guess, @dipali.gawas wants the Recorder and Spy tool to automatically generate all of Test Objects as Shadow Root Parent when he creates a new Test Object for the element he wants to grab. He would agree to operate the tool to create a Test Object for the HTML element he wants to grab. But he does not like to be bothered with the Test Objects as Shadow DOM Root.
I guess, he want to say that the tools are incomplete. “The tools are informed of enough information when I specify the target HTML element. The tools should be aware what sort of Test Object as Shadow DOM Root is required. So it should generate everything at once for me. Why they don’t do so? Please don’t ask me to create Test Objects as ShadowDOM Root”.
Not only Shadow DOM, the same requirement applies to the parent <iframe>.
Am I right?
Your target web app seems employing WebComponents technologies. I guess it is too sophisticated (advanced? complexed?) to test using Katalon Studio. I am sure that Katalon Studio is not designed with the WebComponent technogies in mind.
I would recommend you to shelve Katalon for now, and make a broader Google-search to find how others do automated UI testing for WebComponent-based web app. For example, I found the following
I think, if you are going to dive deep into testing WebComponents-based web apps, you should look at some JavaScript-native testing technologies like Cypress and Playwright to work with WebComponents-based web apps.
Or, if you are satisfied with just scratching the surface of your target web app, go-on with KS, while you need to create TestObjects for Shadow DOM Root.
@kazurayam bang on! you understood my problem very well
I would appreciate spy tool to do the job for me
Rest of the test team members are going to be part of team for short stint, so I need to use a tool which will have short onboarding time- that’s the reason i went with katalon.
Katalon Studio’s Test Object does not support grabbing HTML element under multiple layers of Shadow DOM. See the following discussion years ago
I don’t think the Spy & Recorder tools + Test Objects of Katalon Studio can ever support the nested Shadow DOM. You should not wait for it.
You had better look for alternatives like Cypress and Playwright. Or simply abandon your mission.
Testing a WebComponent-based web app is a difficult task. That is my impression I got from the articles which I quoted above. You should not underestimate it. You would need long enough onboarding time.
I found a tutorial
This tells us how to work with Shadow DOM (even nested Shadow DOM roots) in Java/Groovy using Selenium 4.
However, Katalon Studio runs on Selenum 3. It does not run on Selenium 4. Therefore you can not apply this approach in Katalon Studio.
Posted link is not a solution of question
???
It seems you haven’t read this discussion from the top.
All I am saying is @dipali.gawas can not solve his problem in Katalon Studio.
Why do I think so?
Let me add an explanation.
The Spy tool enables you to capture HTML elements visually:
You can visually identify HTML elements, hover curson on it, and select “Caputre Object”. OK. This works fine for all visible elements.
However, how can I capture the HTML element as “Shadow DOM Root” using the Spy tool? How can I capture the <iframe> element using the Record tool? — No, I can not. I can not caputure any invisible HTML nodes using the Spy and Record tool. The tools are incomplete in this sense.
In order to build a Test Object for a HTML element inside a Shadow DOM or <iframe>, I have to get out of the tools. I have to create the Test Object manually. I have to use Chrome DevTools to find out the detail of the target HTML node. I have to manually write CSS Selector to identify the Shadow DOM Root. — I suppose this is the reason why the original poster, @dipali.gawas, is unhappy with the tools. He wants the Spy tool to accomplish all he needs.
These tools works good enough for simple web pages without <iframe> and Shadow DOM. So, I suppose that Katalon team would be reluctant to change the current design.
Katalon documentation should clearly state that the Spy and Recorder tools are not enough to test web apps with WebComponents, especially nested Shadow DOM. — though, I know, they would not. Therefore I would write it here on behalf of Katalon.
I found a post by @albert.vu in May 2023, which mentions something about how to work with Shadow DOM in Katalon Studio.
I wanted to know how this sample Katalon project deals with the cases of nested Shadow DOM.
I had a quick look at the sample code in this project, but I could not find any code that deals with nested Shadow DOM.
I have studied a bit how to work with nested Shadow DOM with Selenium in Java/Groovy.
Selenium 4.x added getShadowRoot() method to the org.openqa.selenium.remote.RemoteWebElement class. This getShadowRoot() method is crucial to work with nested Shadow DOM.
On the other hand, org.openqa.selenium.remote.RemoteWebElement class of Selenium 3.x lacks the getShadowRoot() method.
Katalon Studio v8.6.x works on Selenium 3.x. It does not work on top of Selenium 4.x. Your code in Katalon Studio can not use getShadowRoot().
I would conclude that you can not work with nested Shadow DOM in Katalon Studio v8.6.x. Well, this is not a news at all.
In the Release note
I found a statement
v8.6.0
- Supported recording multi-level Shadow DOM objects and locating them during runtime.
I was interested in this. I searched for more information about this enhancement. But I could not find any.
Has anyone tried it?
