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

Fails to query a selector with special chars #58

Open shalev-kaveh opened 3 years ago

shalev-kaveh commented 3 years ago

Hi @Georgegriff, First of all thanks for sharing your code! I've been using it for a while and it's working well :)

I've come across, however, a corner case - trying to query a selector in a shadowDOM in this website. Querying this selector (each element of the array is a new shadowDom document) ["dps-app", "dps-home-unauth", "dps-card > img[slot="icon-custom"][height="\33 0"]"] (please note that the last string is automatically backslashed \ into "dps-card > img[slot=\"icon-custom\"][height=\"\\33 0\"]") image

works in the "classic" way to query shadow selectors: document.querySelector("dps-app").shadowRoot.querySelector("dps-home-unauth").shadowRoot.querySelector("dps-card > img[slot=\"icon-custom\"][height=\"\\33 0\"]")​ image

However, trying to query it with queryDeep returns null: (after converting into a queryDeep selector syntax - "dps-app dps-home-unauth dps-card img[slot=\"icon-custom\"][height=\"\\33 0\"]") image

But, when removing the selector's last funky height attribute - it succeeds! ("dps-app dps-home-unauth dps-card img[slot=\"icon-custom\"]") image

I'm not sure why it has failed to query with the height attribute, and would really appreciate your help with fixing it. Thanks!

shalev-kaveh commented 3 years ago

Hi @Georgegriff , do you have any lead?

Georgegriff commented 3 years ago

Hey sorry, i've had a lot on at the moment, i will eventuaally get to this, in the mean time im always accepting of pull requests