DOM Snapshots don't include Shadow DOM

[yjaaidi]

Current behavior

1. Setting includeShadowDom to true allows accessing Shadow DOM but when debugging previous commands DOM snapshots, Shadow DOM is missing.
2. Visual regression tools like Percy fail because Shadow DOM is missing.

Related issues: #144 #830 #5776

Desired behavior

DOM Snapshots should somehow include Shadow DOM.

Test code to reproduce

Please let me know if you really need a repro or if the given information is enough.

Versions

Cypress: 5.3.0
@percy/cypress: 2.3.2

[jennifer-shehane]

Please provide a reproducible example of the issue where DOM snapshots are not present within Cypress alone, isolating the issue outside of Percy.

We’ll have to close the issue if this is not provided. Thanks.

[yjaaidi]

Thank you Jennifer for your quick feedback. I'll come up with a repro as soon as I can.

[yjaaidi]

Hi @jennifer-shehane!
Here is a repro of the issue /~https://github.com/yjaaidi/cypress-snapshot-shadow-dom-repro

As you can see in the GIF below, the Shadow DOM appears when inspecting the DOM but it doesn't appear when inspecting the DOM Snapshot.

[jennifer-shehane]

Thanks for providing a reproducible example. I can see this issue from this repo: /~https://github.com/yjaaidi/cypress-snapshot-shadow-dom-repro

During .pause() the DOM element is rendered

During snapshot, the DOM element is not rendered

[yjaaidi]

Exactly! Thank you for the screenshots 😉

[yjaaidi]

This might help

There is a new experimental feature in Chrome that allows recursive Shadow DOM serialization (it is hidden behind the chrome://flags/#enable-experimental-web-platform-features feature flag).

document.body.getInnerHTML({includeShadowRoots: true})

Meanwhile it lands, we could use a polyfill.

[distante]

Hi, I do not quite understand which is the actual state of this issue.

As I understand using includeShadowDom will allow us to find shadow DOM elements but it does not have any effect on the Snapshots and they are still blank. Is this correct?

I also get blank snapshots but I see how the DOM renders while testing using Cypress 7.7.0

[jennifer-shehane]

@distante This is correct. If you hover over the commands that were done on Shadow DOM, it will not restore how the DOM looked at that time.

[DHFW]

@jennifer-shehane @bahmutov Any plans to fix this (if possible)? This makes testing in Cypress with shadow DOM / web components so much less useful (using the Cypress UI)... Also: cy.type() in normal inputs/textarea fails because according to Cypress the element is disabled, while it does not have such an attribute. Almost every action (type, click, blur) needs the {force: true} option else it will not work. This is totally different from the normal/non-shadow DOM way of working...

[swinejelly]

Yes, we are also affected by this as well and cannot test a component that relies heavily on using shadow doms short of heavily changing it.

[mrrinatino]

This is a problem that I recently encountered on my project. In the development of simple scenarios, this did not hurt much. But when I started describing more sophisticated test cases, it was very inconvenient in some places because of the existing problem. I would be grateful for the solution.

[papb]

Hello! How can I help moving this issue forward? @jennifer-shehane could you point me to where I should I look in Cypress' source code so that I can do a PR?

[nordp]

@jennifer-shehane This is something that heavily affects debugability of cypress tests on apps that use shadow DOMs. Testing works fine, but debugging or developing tests is a lot more difficult when the snapshot feature is not useable.

[papb]

Hello! How can I help moving this issue forward? @jennifer-shehane could you point me to where I should I look in Cypress' source code so that I can do a PR?

[papb]

For the record, I still have this issue with Cypress v10.11.0

[matheuscnali]

I also have this issue!

[ashleynolan]

Is there any news on this issue? We'd be keen to hear if there was any way we could help with the issue, as otherwise we'll essentially either have to move away from either Cypress or Percy in order to give us visual regression snapshots

[mcditermine]

Having the same issue. Any update on this?

[timnederhoff]

Hi @AtofStryker do you know if this commit is included in the solution? in #28823 you mentioned this issue would be included by adding this commit (or branch): 4648fd6
however, we concluded that the snapshots are still blank for the shadowed elements/dom in the latest versions (tested with v13.13.0, 13.14.0 and 13.15.0)

[AtofStryker]

#28823

Hi @timnederhoff. The commit that #28823 (comment) is talking about is not included in the solution, mainly because it needed additional effort because the solution was error prone and difficult to test. The idea for the spike though is still there, so once we can revisit this issue we at least have a reference.