Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Snapshots Don't Preserve injected style tags (css-in-js)

See original GitHub issue

Operating System: MacOS 10.12.6
Cypress Version: 1.4.1
Browser Version: Chrome 63

Is this a Feature or Bug? Bug

Current behavior:

My project uses a css-in-js library (in this case cxs) to apply styling. The cxs library appends a style tag to the <head> at runtime and adds style definitions to this injected tag. When tests run normally, styling appears as expected. However, when switching between snapshots, injected style tags (css-in-js) is not preserved and styling is broken on the page

Desired behavior:

Styles should be preserved, or the javascript bundle should be reran so that styles can be injected again.

(although the second option sounds less likely to be reliable given the nature of snapshotting).

How to reproduce:

Run Cypress with a project that uses a css-in-js library that appends a style tags in <head> at run time.

Additional Info (images, stack traces, etc)

(pseudo) DOM structure while tests are running (correct behavior):

<iframe id="Your App: 'my app name'">
  ...
  <head>
    ...
    < !-- style tag injected by cxs -->
    <style id="_cxs_"></style>
    ...
  </head>
  ...
</iframe>

(pseudo) DOM structure while navigating between snapshots after tests have finished:

<iframe id="Your App: 'my app name'">
  ...
  <head>
    ...
    <!-- I did notice that there is still a style tag in the head 
    that _could_ be the injected style tag, but its missing
    its style declarations, and no longer has the `_cxs_` id, so this could just be a red herring -->
    <style></style>
    ...
  </head>
  ...
</iframe>

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

hehex9commented, Apr 9, 2018

I use emotion.js and styling is broken

0reactions

jennifer-shehanecommented, Jan 3, 2020

This issue will be closed to further comment as the exact issue here was resolved and tested.

@jaxxreal If you’re experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.