Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@chromatic-com/cypress doesn't render web component shadow DOM styles #129

Open
myamericanairlines opened this issue Apr 8, 2024 · 0 comments

Comments

@myamericanairlines
Copy link

myamericanairlines commented Apr 8, 2024

Describe the bug
Web Component shadow DOM styles are not rendering in chromatic when using the Chromatic for Cypress integration.

Running cypress standalone (cypress open --e2e --browser chrome) does display the web components correctly.
Creating a storybook story of the web component and uploading to chromatic shows the shadow DOM correctly.

Running the Chromatic for Cypress steps (See To Reproduce below) does not display the shadow DOM elements in chromatic. All the non web component DOM elements display their html and css correctly.

To Reproduce
Steps to reproduce the behavior:

  1. ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 cypress run --e2e
  2. npx chromatic --cypress -t=[token]
  3. Click on the View your Storybook at link

Expected behavior
Would expect the web component shadow DOM styles to be rendered in chromatic

Screenshots
Screenshot showing shadow DOM styles correctly (not in chromatic)
image

Screenshot showing shadow DOM not rendering in chromatic
image

Additional Info

cypress.config.ts
image

e2e.ts
image

package.json
image
image
image
image

info.cy.ts
image

.storybook/main.ts
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant