cypress: DOM Snapshots don't include Shadow DOM

@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.

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.

@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.

I also have this issue!

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

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

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.

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

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.

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

Having the same issue. Any update on this?

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?

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?

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.