search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.1k stars 3.19k forks source link

DOM Snapshots don't include Shadow DOM #8843

Open yjaaidi opened 4 years ago

yjaaidi commented 4 years ago

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: https://github.com/cypress-io/cypress/issues/144 https://github.com/cypress-io/cypress/issues/830 https://github.com/cypress-io/cypress/issues/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 commented 4 years ago

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 commented 4 years ago

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

yjaaidi commented 4 years ago

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.

cypress-snapshot-shadow-dom

jennifer-shehane commented 4 years ago

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

Screen Shot 2020-10-28 at 6 06 41 PM

During snapshot, the DOM element is not rendered

Screen Shot 2020-10-28 at 6 06 55 PM
yjaaidi commented 4 years ago

Exactly! Thank you for the screenshots 😉

yjaaidi commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 1 year ago

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 commented 1 year ago

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

matheuscnali commented 1 year ago

I also have this issue!

ashleynolan commented 1 year ago

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 commented 11 months ago

Having the same issue. Any update on this?

timnederhoff commented 1 month ago

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): https://github.com/cypress-io/cypress/commit/4648fd6016321c56496bf4b6195e65316 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 commented 1 month ago

28823

Hi @timnederhoff. The commit that https://github.com/cypress-io/cypress/pull/28823#issuecomment-1915907634 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.