dom-testing-library
dom-testing-library copied to clipboard
testing-library
prettyDOM should be able to serialize shadowRoots
Splitting this out from #484
A ShadowRoot is a DocumentFragment node that should be able to be serialized by pretty-format & prettyDOM,
A few changes would be needed in pretty-dom, including removing or altering the check for outerHTML (shadowRoot has innerHTML only) and adding recursive traversal of the node.
- https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node_type_constants
- https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
This library is more of a helper and not a first-class citizen of the API. Could you explain what high-level use cases this change would serve?
- Under the current implementation, if a query fails because the thing you are looking for is in a shadow root, you can't see it in prettyDOM output, which makes it hard to figure out what to do
- If we complete #413, we will need this anyways to allow failed tests to produce useful output
I'm envisioning printing something like what Playwright has in their documentation for ShadowDOM, which is basically what Chrome Devtools shows as well:
https://playwright.dev/docs/selectors#selecting-elements-in-shadow-dom
<article>
<div>In the light dom</div>
<div slot='myslot'>In the light dom, but goes into the shadow slot</div>
#shadow-root
<div class='in-the-shadow'>
<span class='content'>
In the shadow dom
#shadow-root
<li id='target'>Deep in the shadow</li>
</span>
</div>
<slot name='myslot'></slot>
</article>
I have a PR to shadow-dom-testing-library that utilizes JSDOM serialization. Unfortunately it doesnt use the "#shadowRoot" conventions since its piping through JSDOM, but heres an example output:
<body>
<div>
<duplicate-buttons>
<shadow-root>
<slot
name="start"
/>
<button>
Button One
</button>
<br />
<slot />
<br />
<button>
Button Two
</button>
<slot
name="end"
/>
</shadow-root>
<div
slot="start"
>
Start Slot
</div>
<div>
Default Slot
</div>
<div
slot="end"
>
End Slot
</div>
</duplicate-buttons>
</div>
</body>
I have some kind of version of prettyDOM which supports ShadowRoots in output. I only added the parts I needed at the time so it likely does not fulfill all requirements. But hopefully this helps:
https://github.com/AriPerkkio/aria-live-capture/blob/85f1e4613bec443797097320ed5f2b9f733fc729/.storybook/pretty-dom-with-shadow-dom.ts
See it in action here by clicking the Next state button: https://ariperkkio.github.io/aria-live-capture/?path=/story/dom-api-support-shadowroot--live-region-inside-shadow-dom
Just updating here, I got a proper serializer working, Thanks @AriPerkkio for the assist.
https://github.com/KonnorRogers/shadow-dom-testing-library/pull/43
There is one problem where it seems to output a lot of extra whitespace, but at least its working!