cypress
cypress copied to clipboard
cypress-io
Cypress doesn't see shadow-root (user-agent) with pseudo elements
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");
});
});
Cypress Version
12.9.0
Node version
18.6.0
Operating System
Win 10
Debug Logs
No response
Other
No response
@przedab thanks for the reproduction. I'm not sure why this is happening. Routing to our e2e team
I am facing the same error, is there any update on this issue, or a workaround?
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...
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.
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
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.
