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

Implement a selector with visible text and certain text #56

Closed lacell75 closed 3 years ago

lacell75 commented 3 years ago

To begin, thank you very much for what you have done in this project and that is fantastic!

And It would be wonderful if you could implement a selector on text or certain text like :

For example, here's a query for class with the text "Open downloads folder": querySelectorDeep(".dropdown-item=Open downloads folder"); or using partial text: querySelectorDeep(".dropdown-item*=Open");

other example with element button: querySelectorDeep("button=Open downloads folder"); or using partial text: querySelectorDeep("button*=Open");

And same thing for an ID.

Currently : We have this error invalid element state: Failed to execute 'querySelector' on 'Document': '.dropdown-item=Open downloads folder' is not a valid selector.

Do you think it would be possible to implement this?

Georgegriff commented 3 years ago

Hi thanks for the issue, I think this is a little out of the scope of this library, If you find yourself needing to reach for this sort of thing, have you considered using something like playwright? Playwright supports shadow Dom deep queries out of the box

If you did want to do something like this you could probably just combine a normal CSS selector using the library and then do am array .filter on the results for your desired behaviour, e.g. checking the innerText of elements or something like that

lacell75 commented 3 years ago

If you did want to do something like this you could probably just combine a normal CSS selector using the library and then do am array .filter on the results for your desired behaviour, e.g. checking the innerText of elements or something like that

Thanks, I have implemented this behavior with webdriver.io but I have a case that does not work: when an element does not exist yet, I don't know what to return in this case. Do you have an idea?