Cypress doesn't see shadow-root (user-agent) with pseudo elements

[przedab]

Current behavior

Cypress doesn't see a shadow-root (user-agent) and I can't get access to pseudo elements inside a root.

AssertionError: Timed out retrying after 4000ms: Expected the subject to host a shadow root, but never found it.

Cypress:

Manually:

Desired behavior

Make access to pseudo-elements inside the shadow-root (user agent).

Test code to reproduce

describe("shadow_root_user_agent", () => {
  it("access_to_pseudo_elements", () => {
    // visit google player site
    cy.visit("https://googleads.github.io/googleads-ima-html5/vsi/");
    // get a pseudo element inside a shadow-root (user-agent)
    cy.get("#h5-player")
      .shadow()
      .find('div[pseudo="-webkit-media-controls"]')
      .should("exist");
  });
});

Repository with simple test

Cypress Version

12.9.0

Node version

18.6.0

Operating System

Win 10

Debug Logs

No response

Other

No response

[astone123]

@przedab thanks for the reproduction. I'm not sure why this is happening. Routing to our e2e team

[ajdinmust]

I have the same issue

[ozee]

I am also hitting the same issue with lit and component testing.

[Knack-Mehul]

Any updates on this error, I am also facing the same issue.

[jcdvera]

I am facing the same error, is there any update on this issue, or a workaround?

[przedab]

Any update ?

[tymsam]

The issue still occurs! Please look into that :)

[Jaq112]

Any updates on this?

[hansyohan]

Any update on this one?

[hansyohan]

Any update on this one?

This somehow "solved" it when headed. https://www.youtube.com/watch?v=Si7PBh7cBZI

I'm not sure how it will go when headless...

[JulienMalcouronne]

Hello is there any update on this issue ?

[zagnut007]

So I've personally solved this issue that was happening for myself. I have some guesses as to what was happening.

I was seeing this issue in CircleCI with the latest version of Stencil and Cypress 12.16.x

First thing to note: the issue would go away when running Cypress 13.6, but then the StencilJS hydrate command wouldn't generate a functioning /hydrate/index.js. My best guess here is one of the dependancies of Cypress 13.6 conflicts with a version of the same dependency used by StencilJS. So I couldn't push Cypress higher than 12.16.x to get the hydrate to work correctly.

What I found is when I used the Date API from inside of a Stencil component utilizing the FunctionalComponent style, it would "break" the bundle and cause the timeout error on a completely unrelated Cypress test.

The fix was the move my Date API calls to the class-style component and only pass the formatted date as a string to the functional-style component and now everything is passing Cypress correctly.

My guess here is something in the bundling of functional-style components during the StencilJS build doesn't jive with what Cypress is expecting in the JS distribution and it ends up waiting for a browser API call that will never complete.

[cecchettisilva]

Hello 4all!

I solve the problem, using this article: https://dzone.com/articles/exploring-shadow-dom-with-examples-using-cypress

I use the: Approach 2: Using the includeShadowDom Flag in Config

Version Cypress: v12.14.0

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[fterradev]

Same issue here.