Add support for shadow dom #144

chrisbreiding · 2016-05-18T21:51:13Z

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

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')

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.

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")

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')

The text was updated successfully, but these errors were encountered:

StefanGussner · 2017-10-12T12:51:26Z

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 · 2017-10-26T22:15:23Z

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

brian-mann · 2017-10-26T22:16:40Z

@chachra #830 (comment)

leonrodenburg · 2017-11-27T14:57:18Z

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 · 2018-01-31T13:59:12Z

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

QuentinDejean · 2018-02-05T00:12:57Z

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.

LiberQuack · 2018-06-19T16:31:21Z

Updates? 😅

nstogner · 2018-07-10T19:07:20Z

Would love to see this working! 👍

Georgegriff · 2018-07-12T09:45:08Z

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 · 2018-07-12T19:53:11Z

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 · 2018-09-04T23:29:37Z

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 · 2018-10-09T10:37:00Z

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.

agasbzj · 2019-02-15T09:25:07Z

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 · 2019-02-24T16:49:40Z

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

jennifer-shehane · 2019-03-01T22:47:22Z

No work has been done on this issue.

jackblackCH · 2019-03-06T12:37:43Z

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

PerfectedApp · 2020-05-26T10:22:52Z

@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 · 2020-05-26T10:32:57Z

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 · 2020-05-26T10:36:55Z

@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 · 2020-05-26T10:40:41Z

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 · 2020-05-26T10:43:21Z

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:

kamituel · 2020-05-26T10:46:49Z

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 · 2020-05-26T12:45:49Z

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 · 2020-05-26T16:05:56Z

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 · 2020-05-27T07:52:29Z

@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 · 2020-05-28T09:02:33Z

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

mattvb91 · 2020-05-28T09:25:59Z

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 · 2020-05-28T09:35:35Z

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 · 2020-05-28T09:52:35Z

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 · 2020-05-28T15:10:45Z

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 · 2020-05-28T15:39:49Z

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

cbowlinger · 2020-05-28T19:07:06Z

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 · 2020-05-28T21:18:54Z

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 · 2020-06-04T23:48:05Z

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 · 2020-06-08T17:05:37Z

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 · 2020-06-08T20:34:12Z

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.

jennifer-shehane · 2020-06-09T04:25:17Z

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.

chrisbreiding self-assigned this May 18, 2016

chrisbreiding added the type: enhancement Requested enhancement of existing feature label May 18, 2016

jennifer-shehane added pkg/driver This is due to an issue in the packages/driver directory stage: proposal 💡 No work has been done of this issue type: feature New feature that does not currently exist and removed type: enhancement Requested enhancement of existing feature labels Oct 27, 2017

ciampo mentioned this issue Feb 26, 2018

[test] e2e tests ciampo/macro-carousel#4

Open

chrisbreiding mentioned this issue May 30, 2018

cy.screenshot chained from an element within shadowDom throws maximum call stack exceeded error #1832

Closed

chrisbreiding mentioned this issue Aug 14, 2018

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

Closed

bahmutov mentioned this issue Sep 12, 2018

Cypress cannot reach Vaadin components #2463

Closed

This comment has been minimized.

Sign in to view

duncdrum mentioned this issue Nov 26, 2018

shadow-dom support for new webcomponent apps eXist-db/e2e-core#1

Closed

jennifer-shehane unassigned chrisbreiding Mar 1, 2019

jennifer-shehane mentioned this issue Mar 6, 2019

e2e testing Polymer application / shadowDom #830

Closed

cypress-bot bot added stage: ready for work The issue is reproducible and in scope and removed stage: proposal 💡 No work has been done of this issue labels Jun 1, 2020

cypress-bot bot added stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope labels Jun 8, 2020

chrisbreiding closed this as completed in #7469 Jun 8, 2020

cypress-bot bot added the stage: pending release label Jun 8, 2020

cypress-bot bot removed the stage: needs review The PR code is done & tested, needs review label Jun 8, 2020

cypress-bot bot removed the stage: pending release label Jun 8, 2020

cypress-bot bot locked as resolved and limited conversation to collaborators Jun 8, 2020

Add support for shadow dom #144

Add support for shadow dom #144

Comments

chrisbreiding commented May 18, 2016 • edited Loading

StefanGussner commented Oct 12, 2017 • edited by jennifer-shehane Loading

chachra commented Oct 26, 2017

brian-mann commented Oct 26, 2017

leonrodenburg commented Nov 27, 2017

lawked commented Jan 31, 2018

QuentinDejean commented Feb 5, 2018 • edited Loading

LiberQuack commented Jun 19, 2018

nstogner commented Jul 10, 2018

Georgegriff commented Jul 12, 2018

jennifer-shehane commented Jul 12, 2018

soy-capitan commented Sep 4, 2018

PabloHidalgo commented Oct 9, 2018

This comment has been minimized.

agasbzj commented Feb 15, 2019

vdamrongsri commented Feb 24, 2019 • edited Loading

jennifer-shehane commented Mar 1, 2019

jackblackCH commented Mar 6, 2019

PerfectedApp commented May 26, 2020

kamituel commented May 26, 2020

alexbjorlig commented May 26, 2020

kamituel commented May 26, 2020

alexbjorlig commented May 26, 2020

kamituel commented May 26, 2020

43081j commented May 26, 2020

JasonFairchild commented May 26, 2020

mattvb91 commented May 27, 2020

Oloompa commented May 28, 2020

mattvb91 commented May 28, 2020

Oloompa commented May 28, 2020

JaySunSyn commented May 28, 2020

PerfectedApp commented May 28, 2020

Oloompa commented May 28, 2020

cbowlinger commented May 28, 2020 • edited Loading

JessicaSachs commented May 28, 2020 • edited Loading

JasonFairchild commented Jun 4, 2020

cypress-bot bot commented Jun 8, 2020

cypress-bot bot commented Jun 8, 2020

jennifer-shehane commented Jun 9, 2020 • edited Loading

chrisbreiding commented May 18, 2016 •

edited

Loading

StefanGussner commented Oct 12, 2017 •

edited by jennifer-shehane

Loading

QuentinDejean commented Feb 5, 2018 •

edited

Loading

vdamrongsri commented Feb 24, 2019 •

edited

Loading

cbowlinger commented May 28, 2020 •

edited

Loading

JessicaSachs commented May 28, 2020 •

edited

Loading

jennifer-shehane commented Jun 9, 2020 •

edited

Loading