Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for shadow dom #144

Closed
chrisbreiding opened this issue May 18, 2016 · 114 comments
Closed

Add support for shadow dom #144

chrisbreiding opened this issue May 18, 2016 · 114 comments

Comments

@chrisbreiding
Copy link
Contributor

@chrisbreiding chrisbreiding commented May 18, 2016

Currently, Cypress fails for various reasons when dealing with the shadow dom. So far, I've seen three issues.

  1. Cypress considers the shadow root to be a non-DOM subject.
cy.get("#root")
  .then ($root) ->
    return Cypress.$($root[0].shadowRoot)
  .find('.child-2')
  .should('have.text', 'I am child 2')

shadow root is non-dom

Moving the .find into the .then gets past this issue, but is not ideal:

cy.get("#root")
  .then ($root) ->
    return Cypress.$($root[0].shadowRoot).find('.child-2')
  .should('have.text', 'I am child 2')

It might be nice and maybe even necessary to have a convenience method like cy.getShadowRoot() that could be chained off other dom commands.

  1. When you try to assert something on an element inside a shadow root, Cypress reports that the element is detached from the dom. This stems from the fact that $.contains(el1, el2) returns false when el1 is outside the shadow root and el2 is inside it. Some discussion here.
cy.get("#root")
  .then ($root) ->
    return Cypress.$($root[0].shadowRoot).find('.child-1')
  .should("have.text", "I am child 1")

shadow child detached from dom

  1. Commands that cause Cypress to check if the subject is hidden by ancestors trigger infinite recursion and blow the call stack because it never hits the <body> or <html> elements while walking up the chain of ancestors.
cy.get("#root")
  .then ($root) ->
    return Cypress.$($root[0].shadowRoot).find('.child-2')
  .contains('button', 'Go')

shadow dom infinite recursion

@StefanGussner
Copy link

@StefanGussner StefanGussner commented Oct 12, 2017

For anyone finding this issue on Google when searching for how to access the shadow Dom:
I just this workaround until this feature is implemented:

it('.should - search by email', () => {
        cy.get('profile-search').then(search=>{
            const email = search[0].shadowRoot.querySelector('#email');
            email.value='test@example.com';
            email.dispatchEvent(new CustomEvent('change'));
        });
        cy.wait(200);
        cy.get('profile-search').then(search => {
            return search[0].shadowRoot.querySelector('profile-preview').getAttribute('uid');
        }).should('eq', 1);
    });
@chachra
Copy link

@chachra chachra commented Oct 26, 2017

Any update on what might be best way to use Cypress on say a Polymer project nicely?

@brian-mann
Copy link
Member

@brian-mann brian-mann commented Oct 26, 2017

@leonrodenburg
Copy link

@leonrodenburg leonrodenburg commented Nov 27, 2017

Is there any update on this? The temporary solution proposed by @brian-mann in #830 doesn't seem to work in the newest versions of Cypress anymore. It throws a Maximum call stack size exceeded error when cy.wrap is called on an element that is in a shadow root. Might be related to issue 3 that @chrisbreiding mentioned above. We'd love to use Cypress for a large Polymer 2 app we're developing, but this seems to rule Cypress out as an option for now.

@lawked
Copy link

@lawked lawked commented Jan 31, 2018

I would love to get some update on this too :)

@QuentinDejean
Copy link

@QuentinDejean QuentinDejean commented Feb 5, 2018

Same here, we're heavily relying on shadow-DOM and use Cypress for our functional testing.

Thanks to @chrisbreiding we've figured a few ways to get around and select elements, but not having a proper support of shadow DOM makes it impossible to use .get(), and therefore to do anything related to forms.

@QuackMartins
Copy link

@QuackMartins QuackMartins commented Jun 19, 2018

Updates? 😅

@nstogner
Copy link

@nstogner nstogner commented Jul 10, 2018

Would love to see this working! 👍

@Georgegriff
Copy link

@Georgegriff Georgegriff commented Jul 12, 2018

Commented on a similar issue here with my findings, although am able to find shadow Dom elements with JS, cypress thinks the element is not attached to the DOM anymore when I work with it
#830

@jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Jul 12, 2018

This feature is still in the 'proposal' stage. No work has been done on this feature as of yet. We're a small team and as much as we'd love to work on everything, we have to choose what to work on based on a multitude of things.

@soy-capitan
Copy link

@soy-capitan soy-capitan commented Sep 4, 2018

Just plus oneing this issue. I hope you prioritize this, because I'd like to be able to use cypress without having to petition every company I work for to rewrite their front end, since shadow dom is super common. I've been using it all of two weeks and I'm impassibly stuck because shadow dom can't be seen.

@PabloHidalgo
Copy link

@PabloHidalgo PabloHidalgo commented Oct 9, 2018

Another +1 here!

Just plus oneing this issue. I hope you prioritize this, because I'd like to be able to use cypress without having to petition every company I work for to rewrite their front end, since shadow dom is super common. I've been using it all of two weeks and I'm impassibly stuck because shadow dom can't be seen.

I agree with you. Nowadays it's a common scenario big companies bet for WebComponents for build their front-end, and it's a shame we can't use cypress for testing :(

Hope it get's prioritized.

@Snapu

This comment was marked as off-topic.

@agasbzj
Copy link

@agasbzj agasbzj commented Feb 15, 2019

May I ask is there any update or workarounds? I'm testing ionic4 based apps and there are thousands of shadow doms in ionic4 components. :-(

@vdamrongsri
Copy link

@vdamrongsri vdamrongsri commented Feb 24, 2019

I'm also on boat for cypress supporting shadow-dom for us stenciljs users. Any updates?

@jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Mar 1, 2019

No work has been done on this issue.

@jackblackCH
Copy link

@jackblackCH jackblackCH commented Mar 6, 2019

What's the status quo here? Is it somehow possible to test WebComponents and/or ShadowDom?

@PerfectedApp
Copy link

@PerfectedApp PerfectedApp commented May 26, 2020

@Herbrandus we also invested a lot of R&D into Cypress, but due to growing demand of web components and shadow-dom, we are forced to abandon it. The Cypress team has their reasons and cannot argue whatever those reasons are. Unfortunately, we just cannot continue to use this solution.

@kamituel
Copy link

@kamituel kamituel commented May 26, 2020

Folks, please refrain from the "I need this too" kinds of comments (you can upvote the original post instead). There's quite a lot of noise here recently. Thank you!

@alexbjorlig
Copy link

@alexbjorlig alexbjorlig commented May 26, 2020

@kamituel literally 5 comments above, a cypress team member wrote:

This is always subject to change in the future and showing your support with 👍 or comments explaining how this feature would directly affect your use of Cypress will be helpful in these future evaluations.

So I don't agree with your recommendation - and Github, after all, supports an unsubscribe feature.

@kamituel
Copy link

@kamituel kamituel commented May 26, 2020

So I don't agree with your recommendation - and Github, after all, supports an unsubscribe feature.

You can disagree of course. But unsubscribing is not a solution because then I wouldn't be notified when something actually meaningful happens with regard to the Shadow DOM support.

@alexbjorlig
Copy link

@alexbjorlig alexbjorlig commented May 26, 2020

then I wouldn't be notified when something actually meaningful happens with regard to the Shadow DOM support

You can customize your notifications, and receive notifications when the issue is closed/re-opened:

Screenshot 2020-05-26 at 12 41 39

@kamituel
Copy link

@kamituel kamituel commented May 26, 2020

Yeah, I might need to do that at some point.

In all fairness I was hoping to also be notified when a proposal on the Shadow DOM support is posted, or any other meaningful updates. So I knew about them in advance.

That's a pity Github doesn't allow us to limit notification to only those coming from project members. That'd be just perfect in this situation.

Anyway, I'll just close my mouth now not to generate that noise I complained about myself ;) Cheers.

@43081j
Copy link
Contributor

@43081j 43081j commented May 26, 2020

Like i said above, i have a fairly solid implementation so far in #7469.

it would be very useful if people who want this could give their opinion in there too, so im aware if it achieves the use cases people have

@JasonFairchild
Copy link

@JasonFairchild JasonFairchild commented May 26, 2020

I wonder if some people could be less blocked then they think they are. Here is a list of attempts to provide support for Shadow DOM. They might not be super robust or up-to-date, but certainly something that could be played with or one can learn from.

https://github.com/JaySunSyn/cypress-daywalker from JaySunSyn
https://github.com/abramenal/cypress-shadow-dom from abramenal
https://www.npmjs.com/package/query-selector-shadow-dom from Georgegriff

These are more conceptual than potentially working solutions:
https://github.com/cypress-io/cypress/compare/develop...TomCaserta:issue-144?expand=1 from TomCaserta
#6233 from raldenhoven
#7469 from 43081j

There are probably others, these are the ones I could find relatively quickly. I also think this would be a good feature for Cypress to add direct support for, but I can also see that there are probably other features that are more important for the time being.

@mattvb91
Copy link

@mattvb91 mattvb91 commented May 27, 2020

@Herbrandus we also invested a lot of R&D into Cypress, but due to growing demand of web components and shadow-dom, we are forced to abandon it. The Cypress team has their reasons and cannot argue whatever those reasons are. Unfortunately, we just cannot continue to use this solution.

@PerfectedApp what did you switch to? Looks like we will have to abandon again second project in a row.

@Oloompa
Copy link

@Oloompa Oloompa commented May 28, 2020

I need an alternative too. What do you use in place of cypress?

@mattvb91
Copy link

@mattvb91 mattvb91 commented May 28, 2020

We are considering forking Cypress to support Shadow DOM and #95 as both issues are still open after over 4 years. This issue along with fetch makes Cypress feel like its already becoming a legacy tool to work with

@Oloompa
Copy link

@Oloompa Oloompa commented May 28, 2020

OMG i didn't notice the #95 issue.
Using cypress for component was the first step.
Next is testing app but i cannot imagine having issues everywhere cause of lack of native support with fetch.

After 4 days trying to make it works it looks like a very immature tool.
Moreover relying on jquery in 2020 ...

@JaySunSyn
Copy link

@JaySunSyn JaySunSyn commented May 28, 2020

Ladies, not every tool is for everyone and I assume the cypress team is juggling priorities and do not consider shadow dom support as one of them - which is IMO fine.

Either consider using one of the plugins @JasonFairchild mentioned or look into things like https://github.com/microsoft/playwright where shadow dom is supported.

@PerfectedApp
Copy link

@PerfectedApp PerfectedApp commented May 28, 2020

There are a lot of other options out there. Depends on what you or your organisation is needing. Some of these options have a more professional, nonsexist, and friendly community than others.

For those that are interested, our group is currently looking at CodeceptJS. Although, I still have hope for Cypress.

@Oloompa
Copy link

@Oloompa Oloompa commented May 28, 2020

@PerfectedApp thanks
It looks like creator of CodeceptJS is working on testomat.io

@cbowlinger
Copy link

@cbowlinger cbowlinger commented May 28, 2020

In the last day there's been some progress on the #7469 issue with getting some reviewing and a relative plan based on the review that I believe to be going on right now

#7469 (comment)

@JessicaSachs
Copy link
Member

@JessicaSachs JessicaSachs commented May 28, 2020

Yeah, given the great work done in #7469, we intend to ship shadow DOM support behind an experimental flag when the PR is merged (latest). The outstanding steps are outlined in that PR.

@JasonFairchild
Copy link

@JasonFairchild JasonFairchild commented Jun 4, 2020

Major props to @43081j for taking initiative and starting the work being done on #7469
Seems like it has been quite a lot of effort, nice job!

@cypress-bot
Copy link

@cypress-bot cypress-bot bot commented Jun 8, 2020

The code for this is done in cypress-io/cypress#7469, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot
Copy link

@cypress-bot cypress-bot bot commented Jun 8, 2020

Released in 4.8.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.8.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jun 8, 2020
@jennifer-shehane
Copy link
Member

@jennifer-shehane jennifer-shehane commented Jun 9, 2020

We've added experimental shadow DOM support through the experimentalShadowDomSupport configuration option. (Big thanks to @43081j!)

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.