[Bug] - cannot find items in light dom of host elements

DesignByOnyx commented 4 years ago

Current behavior:

First, thanks so much for the work on this.

I am using StencilJS and Ionic to build a component library, and I'm working with a simple component with a structure like this where everything insidestls-custom-component is within a shadow dom and the ion-item renders slotted content within its own shadow dom. I am unable to select an ion-button from the context of its parent ion-item.

<stls-custom-component>
    # shadowRoot
        <ion-item class="foo">
            <ion-button>Foo</ion-button>
        </ion-item>
        <ion-item class="bar">
            <ion-button>Bar</ion-button>
        </ion-item>
</stls-custom-component>

I am using the following commands:

cy.shadowGet('stls-custom-component')
  .shadowFind('ion-item.foo')
  .shadowFind('ion-button')
  .shadowClick();

Desired behavior:

The problem is that the shadowFind('ion-button') is only searching in the shadowRoot on the ion-item, but the ion-button is in the light dom. To best describe the request I am making, consider the following elGetter:

const elGetter = () => {
    // search the light dom first
    let found = subject[0].querySelectorAll(selector);

    // if nothing is found, and the element is a host element, search the shadow dom
    if(!found && subject[0].shadowRoot) {
        found = subject[0].shadowRoot.querySelectorAll(selector);
    }

    return found;
};

Steps to reproduce: (app code and test code)

I am glad to provide a repo if the above is insufficient - just let me know.

Versions

cypress@3.7.0 cypress-shadow-dom@1.2.1

DesignByOnyx commented 4 years ago

After more testing, there are several problems with the "shadowFind" method which I will just tack onto this:

The semantics of $.find returns the results from multiple contexts ("subjects"), whereas the shadowFind currently only uses the first context/subject.
The shadowFind method does not allow descendant selectors (eg. spaces in the selector). This too breaks the semantics of $.find and breaks the ability for Cypress to retry the last command
shadowFind uses the native querySelectorAll which returns a NodeList, and this breaks Cypress default "retry" logic. Looking at the internals of Cypress, it expects a jQuery collection in order to continue retrying.

I have a PR which fixes all the mentioned problems coming in a minute.

abramenal commented 4 years ago

Hi @DesignByOnyx Thanks for the contribution!

Your approach seems to be straightforward and elegant, just merged that. As for tests that I have in ./example, retry-ability for dynamically added DOM element fails, so I think some piece is missing in your implementation. Not sure, but this might be related to shadowContains Can you please take a look on that as well? I don't have any opportunity to take a look. Fixing this allows me to release this change! 🥂

abramenal commented 4 years ago

@all-contributors add @DesignByOnyx for ideas, code

DesignByOnyx commented 4 years ago

Thanks for merging this. I definitely feel this is a step in the right direction and I am committed to making this stronger. I am currently integrating "proper" tests and want to provide a way to test multiple web component libraries: polymer/lit, svelte, stenciljs, etc. I'll take a look at the breaking example and provide a PR soon.

abramenal / cypress-shadow-dom