iframe present in the DOM is not listed in page.frames()

[gajus]

Consider the following scenario:

await page.waitForSelector('iframe[src*=tnspayments]');

const frames = await page.frames();

const paymentFrame = frames.find((frame) => {
  return frame.url().includes('tnspayments');
});

The selector iframe[src*=tnspayments] is resolved, but at this time page.frames() does not know of the frame.

This feels like a browser bug.

Adding an arbitrary wait time solves the issues.

await page.waitForSelector('iframe[src*=tnspayments]');

await delay(500);

const frames = await page.frames();

const paymentFrame = frames.find((frame) => {
  return frame.url().includes('tnspayments');
});

I suppose a thorough implementation could wait for frameattached.

Bringing this up in case it is not a desired behaviour.

[fran0254]

I have the same problem 1+

[aslushnikov]

Can you guys please share the exact script and URL?

[gajus]

Can you guys please share the exact script and URL?

It is the exact script and it works on any page that includes iframes.

[aslushnikov]

It is the exact script and it works on any page that includes iframes.

It is not runnable. To simplify the life of project maintainers, please provide runnable scripts that include URLs so that we can easily reproduce your issue locally.

[gajus]

It is not runnable. To simplify the life of project maintainers, please provide runnable scripts that include URLs so that we can easily reproduce your issue locally.

Aren't you paid to do this?

Others are contributing their time.

The above is more than enough to reproduce the issue that multiple people reported. Just closing this issue shows your complete indifference to this project.

[wanglam]

I have the same problem too..

[ebidel]

This script does not repro the issue described in the OP:

const puppeteer = require('puppeteer');

(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('http://jsbin.com/');
await page.waitForSelector('iframe[src*=runner]');

const frames = page.frames();
const runnerFrame = frames.find(frame => frame.url().includes('runner'));

console.log(runnerFrame.url()); // runnerFrame is in page.frames()

await browser.close();
})();

This is why we've asked for a URL and full example to repro the issue. If someone can provide those details, that would be marvelous.

[achingbrain]

@ebidel I've put a demo repo together that illustrates the problem: https://github.com/achingbrain/puppeteer-frames

Just npm install && npm start and read the console output.

I think it might be something to do with iframes loading remote content because if you comment out this line everything works as expected.

[aslushnikov]

@achingbrain thanks, that's due to the out-of-process iframes. I filed a separate issue: #2548

[JoseBarrios]

I ran into the same issue. I found a workaround/hack that might help folks here:

  /**                                                                                                    
   * Waits until the iframe is attached and then returns it to the caller                        
   *                                                                                                     
   * @access public
   * @param {object} page - The Puppeteer page API object 
   * @param {string} nameOrId - The name or id of the target iframe                                                                                                                                      
   * @returns {object} The Puppeteer iframe element                                                            
   */                                                                                                    
  async function iframeAttached(page, nameOrId) {                                                                  
    return new Promise(async resolve => {
      const pollingInterval = 1000;                                                                
      const poll = setInterval(async function waitForIFrameToLoad() {                                                                                                       
        const iFrame = page.frames().find(frame => frame.name() === nameOrId);                         
        if (iFrame) {                                                                                    
          clearInterval(poll);                                                                                  
          resolve(iFrame);                                                                               
        }                                                                                                                                                                         
      }, pollingInterval);                                                                                          
    });                                                                                                  
  } 

Now, you can get your iframes like this:

const iframe = await iframeAttached(page, 'YOUR_IFRAME_NAME_OR_ID');
// You can now use the iframe
iframe.doSomething(...);

[tokland]

This worked for me: #5123 (comment)