search

cypress-io / cypress

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

CSS disappears after mousing over the snapshot links #27632

Open nick-true-dev opened 10 months ago

nick-true-dev commented 10 months ago

Current behavior

After running cypress e2e tests, the target site gets rendered as expected.

However, if you over the mouse cursor over any of the test snapshot links in the cypress desktop app, then certain css styles unexpectedly disappear from these snapshots.

More specifically, the <link> elements used to import dark/light theme css files will disappear from the <head> section after you hover the mouse over a snapshot.

This causes the background color to change from dark gray to white.

For example, this is before hovering the mouse over 1 visit /:

before mouse over

...and this is after:

after mouse over

Desired behavior

The website's background color should remain gray/black whether or not the user hovers over the snapshot link.

Test code to reproduce

https://github.com/nick-true-dev/cypress_css_issue_example

Cypress Version

12.17.4

Node version

16.20.1

Operating System

macOS 12.6.8

Debug Logs

No response

Other

Note that the elements get added dynamically by addLinkElt() in App.vue in this example.

jennifer-shehane commented 6 months ago

@nick-true-dev Is this still occurring in v13 latest?

nick-true-dev commented 6 months ago

Hi Jennifer. I still see the issue with cypress 13.6.1.

mfgabriel92 commented 2 months ago

I am facing the same thing, except the entire page, with its elements, go invisible, not only the styling.