webdriverio/query-selector-shadow-dom

Feature request: waitForSelectorShadowDOM()

thernstig opened this issue ยท 5 comments

Currently, all test code in Jest looks like this when you want to get an element:

const btn = (await page.waitForFunction(() => 
    querySelectorShadowDom.querySelectorDeep(".btn-in-shadow-dom")
)).asElement();
await btn.click();

Since waitForSelector is probably one of the most common functions, it would be nice if the package could add some shortcut to this like: waitForSelectorShadowDOM that directly can be used like:

await btn = waitForSelectorShadowDOM('path');

p.s. Thank you for a great package @Georgegriff !

I had considered writing a puppeteer wrapper for the library actually, may will get to it

@Georgegriff It would be awesome! ๐Ÿ’ฏ

I believe it should be fairly simple, but if done, I think it needs to consider extending jest-puppeteer (as it seems like the most common lib to use) according to https://github.com/smooth-code/jest-puppeteer#custom-setuptestframeworkscriptfile-or-setupfilesafterenv OR https://github.com/smooth-code/jest-puppeteer#extend-puppeteerenvironment OR https://github.com/smooth-code/jest-puppeteer#create-your-own-globalsetup-and-globalteardown depending on where such a function fits best.

Currently experimenting with adding support for playwright (new project form original puppeteer team - https://github.com/microsoft/playwright) as that has a really nice mechanism for custom selectors that works will .clicks, waitForSelector etc out of the box once custom selector has been defined: #19

It looks like puppeteer will be adding custom locators similar to playwright, I want to experiment soon.

Thought with playwright now shadow Dom just works woo!

Closing as i think this is satisfied by custom query handlers which will be coming soon-ish in puppeteer.
I have released experimental support for the feature which can be shown here
https://github.com/Georgegriff/query-selector-shadow-dom/tree/master/examples/puppeteer