search

webdriverio / query-selector-shadow-dom

querySelector that can pierce Shadow DOM roots without knowing the path through nested shadow roots. Useful for automated testing of Web Components. Production use is not advised, this is for test environments/tools such as Web Driver, Playwright, Puppeteer
MIT License
241 stars 25 forks source link

Source order is not preserved when using multiple selectors #54

Open Kilian opened 3 years ago

Kilian commented 3 years ago

querySelectorAll with multiple selectors returns the elements in source order. So the following HTML:

<h1> h1 </h1>
  <h2> h2 </h2>
    <h3> h3 </h3>
  <h2> h2 </h2>
    <h3> h3 </h3>

Combined with this javascript: document.querySelectorAll("h1, h2, h3"); will return [h1, h2, h3, h2, h3]. The equivalent querySelectorAllDeep however returns those listed selector by selector: [h1, h2, h2, h3, h3]. That can be quite an important difference. Is that worth fixing (I guess that might be difficult) or at least mentioning in the readme?

Georgegriff commented 3 years ago

Thanks for the issue, I'll take a look when I get time, with your example is shadow Dom involved at all? In your example it's not clear to me when or if shadow Dom is involved

Kilian commented 3 years ago

This is without shadow Dom involved, though I assume that won't make a difference.

Georgegriff commented 3 years ago

I took a look at this, I think this would be very difficult to fix, given how the library works, as such i've updated the readme with a known limitations block https://github.com/Georgegriff/query-selector-shadow-dom/blob/main/README.md#known-limitations.

I contemplated ways in which to fix this but I think it would be difficult with Shadow DOM, i'd need to keep track of where was in the tree when i find result, and use that to order the elements. I think this would be possible but i'd need to do a breaking change, since the order of results may change for users, i'll leave the issue open and think on it a bit more

mcqua007 commented 2 years ago

@Georgegriff It would be really great if there was another function that preserved the order. This is needed for things like focus traps etc... I understand not wanting to make breaking changes that's why making it another function could work. Something like querySelectorAllDeepOrdered.

For those of you looking to preserve this library may help:

https://github.com/43081j/shadow-dom-utils