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

Open
chrisbreiding opened this Issue May 18, 2016 · 17 comments

Comments

@chrisbreiding
Copy link
Collaborator

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

chachra commented Oct 26, 2017

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

@brian-mann

This comment has been minimized.

Copy link
Member

brian-mann commented Oct 26, 2017

@leonrodenburg

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

lawked commented Jan 31, 2018

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

@QuentinDejean

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

QuackMartins commented Jun 19, 2018

Updates? 😅

@nstogner

This comment has been minimized.

Copy link

nstogner commented Jul 10, 2018

Would love to see this working! 👍

@Georgegriff

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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.

Copy link

Snapu commented Nov 21, 2018

+1

@agasbzj

This comment has been minimized.

Copy link

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. :-(

@hawaiiansurfer

This comment has been minimized.

Copy link

hawaiiansurfer commented Feb 24, 2019

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

@jennifer-shehane

This comment has been minimized.

Copy link
Member

jennifer-shehane commented Mar 1, 2019

No work has been done on this issue.

@jackblackCH

This comment has been minimized.

Copy link

jackblackCH commented Mar 6, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.