Ask a Question

How to locate a component in nested shadowroots -- polymer in electron

SOLVED
seth
New Contributor

How to locate a component in nested shadowroots -- polymer in electron

Hi everyone!  I'm just dipping into TestComplete and I'm not having much luck figuring this particular issue out.  My project is a polymer/redux front end thats wrapped in Electron.  I'm trying to write some automated tests but am having a problem digging buttons and other components buried within nested shadowroot nodes.

 

I have enabled support for web components in Web Testing and I can get properties for objects that are one shadowroot deep, but cannot get any properties for objects deeper than that first shadowroot node.  The result I get back is that the object doesn't exist, though it most certainly does exist and function for the user.

1 ACCEPTED SOLUTION

Accepted Solutions
AlexKaras
Community Hero

Re: How to locate a component in nested shadowroots -- polymer in electron

Hi,

 

Also the https://support.smartbear.com/testcomplete/docs/app-testing/web/web-components/shadow-dom.html help article describes Shadow DOM support in TestComplete. I believe you've already read it, haven't you?

I did not work with (multi-level) shadow DOM, so can suggest nothing better at the moment but to contact Support via the https://support.smartbear.com/testcomplete/message/ form and ask them if multi-level shadow DOM is supported in TestComplete.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================

View solution in original post

6 REPLIES 6
sonya_m
Community Manager

Re: How to locate a component in nested shadowroots -- polymer in electron

Thank you for creating this thread!

 

@Marsha_R @tphillips @AlexKaras @Wamboo , could you take a look?


Sonya Mihaljova
Community and Education Specialist

Join Wintertainment 2021 to share your stories, have fun, earn community badges, and more!
seth
New Contributor

Re: How to locate a component in nested shadowroots -- polymer in electron

Good morning Sonya and thanks!  I actually found that NameMapping is useful but the nameMapping engine doesn't always locate the object and assign a name.  I've found mini work arounds but I think as I have to get deeper into the document, those workarounds won't work anymore.

 

My best workaround so far is to match the properties CustomObjectTypelook with innerHTML under the Chrome properties in Advanced view within Object Spy.  This also requires me to search for the parent object by FullName, which gets a little ugly.  If there is a better, faster, smarter way, I'd love to hear it  🙂

Marsha_R
Community Hero

Re: How to locate a component in nested shadowroots -- polymer in electron

There's a lot of setup and other information here:

https://support.smartbear.com/testcomplete/docs/app-testing/web/electron/about.html

 

Have you been through all this?

Marsha_R
[Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
sonya_m
Community Manager

Re: How to locate a component in nested shadowroots -- polymer in electron

Thank you for the link Marsha!

 

@seth Thank you for providing feedback! Have you looked into the section of documentation Marsha has suggested above? It is very thorough!


Sonya Mihaljova
Community and Education Specialist

Join Wintertainment 2021 to share your stories, have fun, earn community badges, and more!
AlexKaras
Community Hero

Re: How to locate a component in nested shadowroots -- polymer in electron

Hi,

 

Also the https://support.smartbear.com/testcomplete/docs/app-testing/web/web-components/shadow-dom.html help article describes Shadow DOM support in TestComplete. I believe you've already read it, haven't you?

I did not work with (multi-level) shadow DOM, so can suggest nothing better at the moment but to contact Support via the https://support.smartbear.com/testcomplete/message/ form and ask them if multi-level shadow DOM is supported in TestComplete.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================

View solution in original post

Morgan123
Visitor

Re: How to locate a component in nested shadowroots -- polymer in electron


@sonya_m wrote:CredibleBH

Thank you for the link Marsha!

 

@seth Thank you for providing feedback! Have you looked into the section of documentation Marsha has suggested above? It is very thorough!


Shadow DOM is a new DOM feature that helps you build components. Shadow DOM lets you place the children in a scoped subtree, so document-level CSS The host has a property called shadowRoot that refers to the shadow root. child-element renders its light DOM children inside this div --> <slot id="child-slot">.

cancel
Showing results for 
Search instead for 
Did you mean: