Selector playground does not support Shadow DOM

[simenbrekken-visma]

Current behavior

When attempting to locate selectors using the highlight feature of the selector playground it does not locate elements within ShadowRoots even when includeShadowDom is enabled.

fixtures/shadow-dom.html

Resulting selector playground:

Desired behavior

When includeShadowDom is enabled selector should search all available ShadowRoots. This will most likely require https://github.com/cypress-io/cypress/blob/develop/packages/runner-shared/src/iframe/aut-iframe.js#L294 to be modified as it only searches the current contentDocument.

Test code to reproduce

I wasn't able to find a test that would let me reproduce this but any test visiting the following HTML fixture should make it apparent.

<my-custom-element></my-custom-element>

<script type="module">
  window.customElements.define(
    'my-custom-element',
    class extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }

      connectedCallback() {
        this.shadowRoot.innerHTML = `
        <button data-testid="first-button">First Button (data-testid="first-button")</button>
        <button data-testid="second-button">Second Button (data-testid="second-button")</button>
        <button class="third-button">Third Button (class="third-button")</button>
        <div data-testid="more-buttons">
          <button class="fourth-button">Fourth nested button (data-testid="fourth-button")</button>
        </div>
        `;
      }
    }
  );
</script>

Cypress Version

8.7.0 and 9.5.1

Other

No response

[simenbrekken-visma]

I was able to fix the issue in Cypress but it appears https://github.com/ericclemmons/unique-selector does not handle Shadow DOM either so it appears that will also need a fix.

[AdrianRRo]

Any update on this? I have the same issue

[needfulthing]

Same issue here. It'll be nice to add the get() options in the playground.