Max Call Stack when trying to type in an input field type='text'

[achatt89]

Current behavior:

I am working with web components, where I have managed to get to the desired input element using a DOM based helper function.
With the found desired DOM element, I am using cy.wrap(elementName) and then trying to type something in using cy.wrap(elementName).type('some info') which is resulting in rangeError: Maximum call stack size exceeded.

Not sure why.
Here's the screenshot of the same:

Console Log of the helper function output (which returns the desired element):

The reason I am using helper function to traverse through the DOM is because Cypress seems to have a limitation in traversing through the shadow-dom,

Code for the same:

        cy.document().then((document) => {
            todoAppElement = shadowDOMFind(document, ['input']);
            console.log(todoAppElement);
            cy.wrap(todoAppElement).type('Some Information');
        })

I am able to use cy.get('custom-component-name') and get the results as long as there's no shadow-dom involved.

Desired behavior:

It should be able to type on the textfield.

Steps to reproduce:

No Steps to Reproduce as Such

Versions

• Cypress Package Version: 3.0.3
• Cypress Binary Version: 3.0.3
• Node: v8.9.4
• OS: Windows 7
• Browser: Chrome

[chrisbreiding]

This is a known issue with shadow dom. We plan to bake in proper support for shadow dom eventually, but it hasn't been prioritized as of yet. Make sure to 👍 that issue, since we take that into account when planning what to work on next.

[achatt89]

Would you know by when will it be possible to support it?
Maybe if possible, I can work on it and submit the code for review?

[chrisbreiding]

I don't know when it will be prioritized. We're currently hiring so that we'll have more developers to tackle things like this.

It would be great if you'd like to work on it and submit a pull request.

[achatt89]

@chrisbreiding That sounds good.. I will work on it and send the request. Is there any documentation to start off? Any guidelines for contribution?

[chrisbreiding]

I'd start with our contributing doc.

[adamclerk]

I'm curious what package would contain this functionality?

[chrisbreiding]

It's in the driver package. type.coffee is a good place to start. It's where cy.type() is implemented.

[jennifer-shehane]

We've added experimental shadow DOM support through the experimentalShadowDomSupport configuration option.

To use it, update to Cypress 4.8.0 and pass the following to your configuration file or however you pass in configuration.

{
  "experimentalShadowDomSupport": true
}

See the Experiments for more information including how to use the new .shadow() command and includeShadowDom option.

This is still experimental, so we'd like your help working through any bugs or unexpected behavior before releasing into the main product. If you encounter any issues using the new experimental shadow DOM feature, please open a new issue, filling in the issue template and providing a reproducible example.