webdriverio/query-selector-shadow-dom

Puppeteer examples not working

thernstig opened this issue · 8 comments

thernstig commented

https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/puppeteer/clicking-elements.js

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

This does not work due to that page.waitForFunction returns a JSHandle and not an ElementHandle. This it should be like this:

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

Interesting it was working did puppeteer change their API in 2.x?

thernstig commented

Yes, it seems they did.

naveenmadd commented

https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/puppeteer/clicking-elements.js

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

This does not work due to that page.waitForFunction returns a JSHandle and not an ElementHandle. This it should be like this:

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

even this has compiling issue, need to remove semi-colon in below line

querySelectorShadowDom.querySelectorDeep(".btn-in-shadow-dom")

and even i'm getting same issue Error: Node is either not visible or not an HTMLElement
image

But surprisingly evaluateHandle with JSPath is working for my issue #12
anyway Thanks for the response and support @Georgegriff @thernstig

thernstig commented

Updated original post to remove the extra ; that slipped in there.

thernstig commented

@Georgegriff I just also noticed that page.evaluateHandle also returns a JSHandle (and not ElementHandle) and page.evaluate only takes ElementHandle as function arguments: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args

So the examples needs more updates.

Georgegriff commented

@thernstig are you sure? I ran the examples last night against puppeteer 2 and they worked as expected

thernstig commented

@Georgegriff No you are correct, it seems it should work. I just read the docs from Puppeteer and thought it would not, due to this:

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args

ElementHandle instances can be passed as arguments to the page.evaluate:

But reading the args it actually says:

...args <...Serializable|JSHandle> Arguments to pass to pageFunction

And since ElementHandle is a child of JSHandle, both works. Sorry for the noise.