Support for selecting elements inside shadow dom via ExternalSelectorConfig?

[GrayedFox]

Hello there, awesome little library you have built!

I am trying to construct some selectors based on an injected web-component that uses the shadow dom to shield the component from unwanted style changes.

This would be the shadow host:

class ParentSelector {
  @By.Type('product-host', { eq: 0 }) static base: Selector;
}

And these would be the elements within the shadow dom:

const testAttribute = { attribute: 'data-testid', parent: ParentSelector.base };

class ProductCardSelectors {
  @By.Attribute('product-title', testAttribute) static title: Selector;
  @By.Attribute('product-images-slide', testAttribute) static image: Selector;
  @By.Attribute('product-card-add', testAttribute) static addButton: Selector;
  @By.Attribute('product-price', testAttribute) static price: Selector;
  @By.Attribute('product-merchant', testAttribute) static vendor: Selector;
  @By.Attribute('stock', partAttribute) static outOfStockBadge: Selector;
}

I know I can reference the parent by passing in parent config option - but how can I tell the ProductCardSelectors class to traverse the shadow dom?

Do you have a recipe or workaround for this perhaps?

Cheers 😄

[GrayedFox]

Note there is the global config option when running Cypress, that also semi solves the issue: https://docs.cypress.io/guides/references/configuration#Global

[anton-kravchenko]

Hi @GrayedFox. Thank you for the feedback.

Did you try configuring includeShadowDom globally? As per the documentation, this should address your question.

In general, when you're using parent-child relationship, the lib just calls 2 get commands sequentially like follows: cy.get(<parent_selector>).get(<children_selector>) so I guess that should work perfectly for traversing shadow DOM elements given that includeShadowDom is set globally.

Please let me know if configuring includeShadowDom works for you. As per https://testersdock.com/cypress-shadow-dom/ there are 2 other ways of making it work but those are a bit more complicated.

[GrayedFox]

Including the shadow dom either via an individual command (passing the option) or as a global flag works fine! I was just wondering if you had plans on supporting this by adding this as an option to the ExternalSelectorConfig type - it's also something I could look into if you like but I am not sure when I will have time.

Edit: updated title of issue to clarify question/request

[anton-kravchenko]

@GrayedFox I'll add the includeShadowDom configuration at ExternalSelectorConfig level so that it will not be required/necessary to turn on includeShadowDom globally. I'll try to implement that sometime next week.