Unable to get content of iframe inside shadow dom

[dmshkv]

Hey, developers!
I'm trying to select elements of iframe, that is inside of shadow root of Polymer component, but no result. Have to mention that the page is the opened popup from the main app.

So I'm taking the popup's page like this and trying to iterate its

const pages = await browser.pages();
const popup = pages[pages.length - 1]; // last opened page, verified by url
const frames = popup.frames(); // this returns the wrong number of iframes inside the popup's page
frames.map(async (f) => {
    const itsUrl = await f.url();
    console.log(itsUrl);
}); // and there is no iframe from shadow root of polymer component

Also one of the used approaches

const pages = await browser.pages();
const popup = pages[pages.length - 1];
const shadowRoot = await page.evaluateHandle("document.querySelector('my-polymer-component').shadowRoot");
const some = await shadowRoot.$("body"); // this returns null

Can you please help in finding the proper solution for this?

[dmshkv]

Hey, @aslushnikov! Would you be so kind to take a look at the issue?

[aslushnikov]

hey @dmshkv! Frames are reported just fine from-inside shadow DOM. One thing I can think of is that the page hasn't loaded yet, so the iframe is not inserted.

It's hard to say what's going on here for sure - since there's not enough information for me to reproduce this locally. I'd try waiting for the frameattached event.

If you don't see the frame reported by Puppeteer no matter what - than it's likely that you have an OOPIF and than this is a dupe of #2548.

[dmshkv]

Thanks, Andrey!