Add Shadow DOM support to @percy/dom #280

wachunga · 2020-12-11T00:33:54Z

Nothing rendered in the shadow-dom, even if open, shows up in percy-cypress snapshots.

The below cypress test passes fine.

Repo:

<html>
  <head>
    <script lang="javascript" defer>
      document.addEventListener('DOMContentLoaded', () => {
        const contentEl = document.querySelector('#content');
        const shadow = contentEl.attachShadow({mode: 'open'});
        const paragraphEl = document.createElement('p');
        paragraphEl.textContent = 'Hey Percy! Can you see this?';
        shadow.appendChild(paragraphEl);
      });
    </script>
  </head>
  <body>
    <div>
      <h1>Shadow DOM repro</h1>
      <div id="content"></div>
    </div>
  </body>
</html>

it.only("shadow dom test", () => {
  cy.visit(`/`);
  cy.contains("Hey Percy!");
  cy.document().then((doc) => console.log(doc.documentElement.outerHTML));
  cy.percySnapshot();
});

The outerHTML logged out does not include the text, and apparently that's how percy gets the DOM...

Any suggestions on workarounds? Getting rid of shadow-dom is not an option for my application.

wachunga · 2020-12-11T00:36:08Z

Forgot to mention: there's a similar issue with Cypress snapshots (shown on hover) not including shadow-dom:
cypress-io/cypress#8843

There's a repo linked there that makes it easy to repro.

Robdel12 · 2021-04-01T21:27:02Z

Thanks for the issue! This is currently not supported across all of our SDKs. In the near future we'll be picking this up now that there's a method for capturing open shadowroots in the DOM: https://web.dev/declarative-shadow-dom/#serialization

But it does require a complete refactor to how @percy/dom works now.

jeffchew · 2021-04-06T20:01:52Z

I'd like to +1 this too. We started out with percy-storybook which appears to be fine with at least the base snapshots, but we have recently started hooking into puppeteer to capture click states, etc. The only way any content appears to render is with enableJavascript set to true, which only renders the initial state of the page but does not capture any subsequent states/e2e tests like click states, form entering, etc.

wachunga · 2021-04-17T15:05:22Z

@Robdel12 That's great news. I have confirmed that Cypress supports this already with the following change (when using Chrome browser, but not yet Electron):

  on("before:browser:launch", (browser = {}, launchOptions) => {
    launchOptions.args.push("--enable-experimental-web-platform-features");
    return launchOptions;
  });

Can you confirm that doesn't help until percy-dom knows what to do with <template shadowroot="open\>?

Also, if you have ideas for workarounds, that would really help my team.

Robdel12 · 2021-04-19T18:34:08Z

Sadly there isn't anything that can be done until we do the work to update @percy/dom. We have to change how we clone the DOM -- Shadow DOM doesn't respect/work with cloning the full DOM tree (document.cloneNode(true)). We'll have to rewrite use element.getInnerHTML({includeShadowRoots: true}) which could have other ripple impacts on how the DOM is captured/serialized/persisted. Not a small change :)

wwilsman · 2021-04-21T17:18:16Z

Did some preliminary research on this with Chrome 90 recently out with the declarative API enabled by default.

Even with the new declarative API, the cloned document does not seem to contain shadow roots. While the document does contain the templates needed to create shadow roots, it seems the roots themselves aren't actually created unless the cloned templates are rendered. This makes it so we have the same current issue of not being able to serialize shadow root contents (such as nested input elements or canvases).
It doesn't looks like these new template shadow roots will be able to be re-rendered trivially (without JS) unless the browser also supports the new declarative API. While chromium browsers have only recently shipped with support enabled by default, our other main rendering browser, FireFox, doesn't seem to have support on their roadmap quiet yet (that I can find).

Even when support is more widely available and that isn't an issue, we'll still have to figure out the first issue of how to properly serialize shadow root trees. Maybe that involves an even bigger refactor to walking the DOM tree and building the clone ourselves, but that's an even larger task than refactoring to use getInnerHTML.

jeffchew · 2021-06-24T20:24:06Z

Just checking if there's been any progress here at all?

Robdel12 · 2021-06-24T22:26:28Z

Hey @jeffchew! Based on @wwilsman's research (the comment right above) it doesn't look like this will be something we'll be able to implement for a while. The web APIs just aren't there and what is starting to come out only works/exists in Chrome (behind flags, depending on what version your tests are running in, default in Chrome 90).

We'd love to support this but it seems to be a case of Google running out in front of everyone (other browser vendors).

) ### Related Ticket(s) Refs #6139 ### Description This PR fully moves the existing `test-e2e` package to a dedicated cypress test setup for web components and react storybooks. A few tests have been included for `masthead`, `locale-modal`, and `leadspace`. They are largely focused on snapshot testing, though percy has been disabled for now as rendering of dynamic states are still not supported in percy for web components (see percy/cli#280). Actual cypress tests can be created now though, and also the current tests uses the built-in cypress screenshot feature: ![image](https://user-images.githubusercontent.com/1641214/132697052-2943ccdf-81c5-450d-999e-c39e557a3d05.png) And video that shows how the tests are run: https://user-images.githubusercontent.com/1641214/132697174-a778c055-d3d8-4e01-877d-bd58c2aa7491.mp4 ### Changelog **New** - Cypress testing for web components and react storybook **Changed** - disabled video recording by default to speed up tests **Removed** - Removed `test-e2e` package

jeffchew · 2021-10-21T14:37:33Z

Just keeping this on the radar if possible. We are increasing our e2e test coverage on our end and so far can only test with React (which we plan to deprecate sometime in the future and only support web components).

jeffchew · 2021-11-30T20:12:46Z

Just another FYI, we tried upgrading @percy/storybook to v4, and it ended up breaking all of the snapshots since from what I understand uses @percy/cli under the hood in this version:

https://percy.io/538fc19a/Carbon-for-IBM.com-Web-Components/builds/14269858/changed/805810435?browser=chrome&browser_ids=18%2C20&subcategories=unreviewed%2Cchanges_requested&viewLayout=side-by-side&viewMode=new&width=1280&widths=375%2C1280

All snapshots are unstyled, and a number of them also just went missing.

Robdel12 · 2021-11-30T20:15:10Z

You'll want to re-enable JavaScript with Storybook & WC's. https://github.com/percy/percy-storybook#unexpected-diffs

Edit: FWIW, there won't be any progress on this until the Web's APIs for WC's matures (as described here.)

mmun · 2022-04-25T18:53:52Z

Hey Percy folks!

Shadow DOM support is important for us at Addepar because our design system is based on Stencil which makes heavy use of shadow DOM.

We've developed a fork of @percy/cli (and to a smaller extent @percy/ember) that supports shadow DOM. They're publicly accessible at https://github.com/Addepar/percy-cli and https://github.com/Addepar/percy-ember. We've open sourced the forks as a proof of concept for the developers of Percy, as well as for other Percy users to use if they are in a similar situation as us.

Here are some details of the implementation. I'm happy to answer any questions.

Caveats

As discussed in the comments above, we're leaning on the experimental Declarative Shadow DOM available in Chrome. This means that:

🚨 It only works in Chrome 🚨 Specifically Chrome 90+, or Chrome 85+ behind a flag. See https://chromestatus.com/feature/5191745052606464.
It may break at any time in the future if Chrome changes its API or drops support for the feature entirely.

Implementation notes

cloneNode

cloneNode(true) does not include shadow roots. We reimplement a recursive cloneNode that can handle this.

adoptedStylesheets

The adoptedStylesheets property is commonly used in component frameworks using shadow DOM because it lets you efficiently reuse stylesheet objects across multiple shadow roots (i.e. across multiple instances of a shadow DOM-based web component).

It's a known issue that adoptedStylesheets are not currently serialized by the APIs exposed in the Declarative Shadow DOM feature. See for example whatwg/dom#831 (comment), https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#other-unanswered-questions and WICG/webcomponents#939.

We resolve this issue by inlining a <style> tag into each shadow root. There are more efficient ways to handle this serialization but it would require running a bit of setup code in the document on Percy's servers before snapshots are taken and that's not currently a feature Percy offers.

IgnaceMaes · 2022-04-26T09:42:37Z

@mmun That's amazing, thanks for looking into this.

At @OTA-Insight we're in the exact same situation as the design system is built with Stencil using Shadow DOM and the main application is written in Ember. Not having Shadow DOM available in the screenshot is blocking us from adopting Percy.

I've tested our setup using the forks you've linked and it fixes the issue 🙌

Right now the forks are built locally. When linking them directly in package.json in the following way it results in an error from the @percy/cli package: error Can't add "@percy/cli": invalid package version undefined.. Any idea if there is a way to fix this?

"@percy/cli": "https://github.com/Addepar/percy-cli.git#master",
"@percy/ember": "https://github.com/Addepar/percy-ember.git#master",

It would be great if this could make its way to the official package.

mmun · 2022-04-26T15:18:11Z

@IgnaceMaes Yeah, we're still thinking about the best way to handle this. One option is to use something like https://gitpkg.vercel.app/.

As an aside, you'll probably run into a Stencil-specific bug ("Sharing constructed stylesheets in multiple documents is not allowed") with the current implementation. This will cause your tests to fail despite the screenshots uploading correctly. We'll add a workaround for that soon.

Robdel12 · 2022-05-02T22:56:09Z

👋🏼 Thanks for the info @mmun! We'll likely only be interested in accepting something like this behind a flag so it's opt-in. There's too many caveat's for us to go all in on this, the API will need to stabilize a lot more before we feel ready for that.

mixonic · 2022-05-05T15:16:21Z

There's too many caveat's for us to go all in on this

I mean, the caveat today is that Percy doesn't work with Web Components (w/ Shadow DOM) rendered by a JS framework (or maybe generally) at all, which seems like a pretty large caveat.

Regardless, your call over at Percy 👍. What does adding this functionality behind an opt-in flag look like? Is there prior art or an example? We would love to have this upstream even if it is opt-in so that we can get off our forks.

wwilsman · 2022-05-05T16:10:47Z

That fork does look promising! We'll look into adopting this officially behind a config option in the coming weeks. Currently, the only option that gets forwarded to the DOM serialization script is enableJavaScript. A new option will likely follow a similar pattern, and we'll have to verify that all of our SDKs will correctly forward that option to the script.

mmun · 2022-05-05T17:16:16Z

@wwilsman Awesome. Thanks for taking a look. My team is available to collaborate if needed.

jeffchew · 2022-05-16T21:00:16Z

Would love this as a config option! Thank you @mmun for the work you put into your project for this! This would hopefully unblock us on our end!

Robdel12 · 2022-05-16T21:53:42Z

@jeffchew with storybook you can enable JS safely and it will render the story from scratch in our browsers (so the shadow DOM will get built). It's the only SDK that this will work well with

jeffchew · 2022-05-17T14:18:58Z

Thank you @Robdel12 , it turns out after digging into the storybook side there might be an unrelated issue to this that we are still blocked by, but we are also using percy with e2e testing in Cypress where we currently cannot do with web components (which relates more to this issue).

The unrelated bug with storybook seems to also affect our React based storybook, where most snapshots are not rendering (there is a timeout error of some kind) and I already reached out to our account executive and Lee V. about this (but not sure if there is an issue open for this).

Robdel12 · 2022-05-17T16:20:56Z

Ah! @jeffchew I remember debugging this and shipping a feature to help. I remember there were ad requests that were hanging asset discovery up (or maybe tracking pixels). You can exclude those requests from asset discovery and that should hopefully stop the timeouts from happening on your storybook builds https://docs.percy.io/docs/debugging-sdks#disallowing-requests

jeffchew · 2022-05-17T17:37:40Z

Thanks @Robdel12 ! We did try that but still running into issues. Should I create a new issue to track this as this is different from the Shadow DOM support? I can share logs on what I'm seeing but looks like JS assets themselves are getting blocked in Percy.

Robdel12 · 2022-05-17T17:46:24Z

For sure! I'd open a support discussion on the storybook SDK

jeffchew · 2022-05-17T18:12:58Z

@Robdel12 issue opened! percy/percy-storybook#565

itsjwala · 2022-12-20T13:04:57Z

Hey folks!

we've shadow DOM capturing in our roadmap. Due to some OKR reshuffling, it was delayed. Please expect beta by earlier Jan 2023.

To workaround this till then you may enable javascript in Percy's config and use https://github.com/percy/percy-storybook/ SDK.

itsjwala · 2023-01-10T15:27:40Z

Hey folks!

Percy now supports capturing Shadow DOM available in the Alpha release of CLI 🏗️. Please refer to this documentation for trying it out.

Robdel12 transferred this issue from percy/percy-cypress Apr 1, 2021

Robdel12 changed the title ~~percy-cypress does not capture anything in shadow-dom~~ Add Shadow DOM support to @percy/dom Apr 1, 2021

Robdel12 added the ✨ enhancement New feature or request label Apr 1, 2021

jeffchew mentioned this issue Apr 6, 2021

Update e2e testing to focus on percy snapshot testing for Web Components carbon-design-system/carbon-for-ibm-dotcom#5612

Closed

2 tasks

Robdel12 added the ❄️ on ice Waiting for API / upstream support label Jul 15, 2021

samouri mentioned this issue Sep 3, 2021

I2D: mode.isLocalDev ampproject/amphtml#35674

Open

jeffchew mentioned this issue Sep 9, 2021

test(e2e): introduce cypress for web components & react storybook carbon-design-system/carbon-for-ibm-dotcom#7096

Merged

Robdel12 mentioned this issue Dec 9, 2021

Does percy with cypress support visual testing of shadow dom elements? percy/percy-cypress#445

Closed

tfrijsewijk mentioned this issue Feb 9, 2022

Date Picker met shadowRoot is met extern label element niet toegankelijk dso-toolkit/dso-toolkit#1164

Closed

This was referenced Apr 2, 2022

feat(ui): Isolate rikaikun popup from host page via shadow DOM and all: revert melink14/rikaikun#933

Merged

Attempt to re-enable percy once they support shadow dom melink14/rikaikun#934

Open

This was referenced Apr 18, 2022

Modify cloneNode to handle shadow dom. #894

Closed

Modify cloneNode to handle shadow dom. Addepar/percy-cli#1

Merged

jeffchew mentioned this issue May 16, 2022

chore(deps): upgrade to Percy Storybook v4 [DO NOT MERGE] carbon-design-system/carbon-for-ibm-dotcom#8128

Closed

Robdel12 mentioned this issue May 30, 2022

Snapshot does not include #shadow content percy/percy-playwright#85

Closed

This comment was marked as duplicate.

Sign in to view

itsjwala linked a pull request Jan 5, 2023 that will close this issue

✨ Shadow DOM serialisation support #1165

Merged

itsjwala closed this as completed in #1165 Feb 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Shadow DOM support to @percy/dom #280

Add Shadow DOM support to @percy/dom #280

wachunga commented Dec 11, 2020

wachunga commented Dec 11, 2020 •

edited

Loading

Robdel12 commented Apr 1, 2021

jeffchew commented Apr 6, 2021

wachunga commented Apr 17, 2021

Robdel12 commented Apr 19, 2021

wwilsman commented Apr 21, 2021

jeffchew commented Jun 24, 2021

Robdel12 commented Jun 24, 2021 •

edited

Loading

jeffchew commented Oct 21, 2021

jeffchew commented Nov 30, 2021

Robdel12 commented Nov 30, 2021 •

edited

Loading

mmun commented Apr 25, 2022 •

edited

Loading

IgnaceMaes commented Apr 26, 2022

mmun commented Apr 26, 2022

Robdel12 commented May 2, 2022

mixonic commented May 5, 2022 •

edited

Loading

wwilsman commented May 5, 2022

mmun commented May 5, 2022

jeffchew commented May 16, 2022

Robdel12 commented May 16, 2022

jeffchew commented May 17, 2022

Robdel12 commented May 17, 2022 •

edited

Loading

jeffchew commented May 17, 2022

Robdel12 commented May 17, 2022

jeffchew commented May 17, 2022

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

itsjwala commented Dec 20, 2022

itsjwala commented Jan 10, 2023

Add Shadow DOM support to @percy/dom #280

Add Shadow DOM support to @percy/dom #280

Comments

wachunga commented Dec 11, 2020

wachunga commented Dec 11, 2020 • edited Loading

Robdel12 commented Apr 1, 2021

jeffchew commented Apr 6, 2021

wachunga commented Apr 17, 2021

Robdel12 commented Apr 19, 2021

wwilsman commented Apr 21, 2021

jeffchew commented Jun 24, 2021

Robdel12 commented Jun 24, 2021 • edited Loading

jeffchew commented Oct 21, 2021

jeffchew commented Nov 30, 2021

Robdel12 commented Nov 30, 2021 • edited Loading

mmun commented Apr 25, 2022 • edited Loading

Caveats

Implementation notes

cloneNode

adoptedStylesheets

IgnaceMaes commented Apr 26, 2022

mmun commented Apr 26, 2022

Robdel12 commented May 2, 2022

mixonic commented May 5, 2022 • edited Loading

wwilsman commented May 5, 2022

mmun commented May 5, 2022

jeffchew commented May 16, 2022

Robdel12 commented May 16, 2022

jeffchew commented May 17, 2022

Robdel12 commented May 17, 2022 • edited Loading

jeffchew commented May 17, 2022

Robdel12 commented May 17, 2022

jeffchew commented May 17, 2022

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

itsjwala commented Dec 20, 2022

itsjwala commented Jan 10, 2023

wachunga commented Dec 11, 2020 •

edited

Loading

Robdel12 commented Jun 24, 2021 •

edited

Loading

Robdel12 commented Nov 30, 2021 •

edited

Loading

mmun commented Apr 25, 2022 •

edited

Loading

mixonic commented May 5, 2022 •

edited

Loading

Robdel12 commented May 17, 2022 •

edited

Loading