Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add support for shadow dom

See original GitHub issue

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

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.

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

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

Issue Analytics

State:
Created 7 years ago
Reactions:118
Comments:114 (20 by maintainers)

Top GitHub Comments

42reactions

PabloHidalgocommented, 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.

28reactions

jennifer-shehanecommented, Mar 1, 2019

No work has been done on this issue.