How to find the shadow object in DOM

[vishi1987]

Kindly help me out with the code snippet for finding the shadow DOM object.

I tried using the ContentDocument but it doesn't work out with me. please look into the attachment for more information. 

var outer = panel.contentDocument.Script('return arguments[0].shadowRoot','my-sequence-grid');

[tristaanogre]

How does it show in the TestComplete Object Spy when you investigate the component in question?  How does your application display in general in the Object Browser? What are you trying to achieve with this code automation code you're trying to write?

[vishi1987]

My application is web application.It doesn't recognize the object using the object spy basically i am working with wijimo grid 5.0 and need to work with the cell but using the object spy i not able to find the grid cell because it comes under the shadow root.

In Screenshot, it is mention id = grid-part, when i try to find the object using object spy or event using the "findchildbyxpath"  test complete not allowing me to work with the object.

[AlanZhang]

Hello,

I have same issue of find objects in shadow dom, the html format is looks like this:^^

Yes, I can get objects by using Object Spy like this 

But I could not using regulay way by using:

page.FindChildByXPath("//*[@id='tabContainer']/responsive-tabs/responsive-tab[1]/a")

because "PortDeposit" is an object under his shadow dom

what method I can use for retrive this shadow object?

Thanks,

Alan

[tristaanogre]

What version of TestComplete are you using, @AlanZhang ?

Note... the PREFERRED and RECOMMENDED method for object identification in TestComplete is the use of NameMapping and Aliases.  While XPath can be used, it is not the best methodology for TestComplete for a number of reasons discussed in various points in this community.

As of TestComplete version 14.0, Shadow DOM support is available (https://support.smartbear.com/testcomplete/docs/app-testing/web/web-components/shadow-dom.html)

[AlanZhang]

Thanks for the response !

The version I have 14.0(released), I also tried 14.10. 

Yes, I knew on 14.0, Shadow DOM support is available, but it most like are talking about concepts of Shadow DOM, from there  I still could not find a way to solve my above issue above?  can you or someone else give me the directict solution based on the information I have given above?

Thanks and wait for your response!

Alan 

[tristaanogre]

The direct solution has been provided.  Since you can find the component using Object Spy, that means TestComplete can see the component via it's Object Browser and NameMapping engine.  Rather than using XPath for object identification (a supported but not fully recommended methodology), the suggested solution is to use TestComplete's NameMapping object repository.

[AlanZhang]

Yes if Object Spy works. but actually my Object Spy not works for all my pages, someone post

Test Complete hangs issue here:

https://community.smartbear.com/t5/TestComplete-General-Discussions/Test-Complete-hangs-and-doesnt-r...

and I also have the same issuer on some of my  web pages. 

so, NameMapping solution is based on Object Spy, but what about if Object Spy not works as expected,  link hanging? can you  provide me another solution based on the information I have provied previous post.

Thanks,

[tristaanogre · Accepted solution]

That's new information...and not necessarily related to the specifics of finding objects via the DOM.  In that other thread, I suggested the user open a support issue directly with SmartBear.  Have you attempted the same?