waitForSelector not working for iframe, unable to find element in iframe

[joevo2]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.4.0
• Platform / OS version: macOS X 10.13.4
• URLs (if applicable): https://getvase.com
• Node.js version: v8.11.1

What steps will reproduce the problem?

Please include code that reproduces the issue.

describe('Main page', () => {
  test(
    'Initiate account kit signup',
    async () => {
      await page.goto('http://localhost:3000/')

      // Click on phoneNumberView and enter number
      await page.waitForSelector('.App-phone-number-input')
      await page.click('input[type=tel]')
      await page.type('input[type=tel]', myPhoneNumber)
      await page.click('button[class=App-phone-go-button]')

      // Wait for account kit iframe to load
      await page.waitForSelector('iframe[src*=accountkit]')
      await page.waitFor(3000)
      const frame = await page
        .frames()
        .find(f => f.url().includes('accountkit'))
      await frame.waitForSelector('button[class=_5xrj]')
      const button = await frame.$('button[class=_5xrj]')
      await button.click()
    },
    1600000
  )
})

1. Automated testing with Jest
2. Input number then press submit
3. Wait for account kit iframe unable to wait, temporary workaround of waitFor()
4. Press account kit iframe next button unable to find the button

What is the expected result?
Able to wait the iframe without page.waitFor() and press the next button

What happens instead?
Unable to wait for the iframe, need to use waitFor() and unable to find the button

Tried the solution https://github.com/GoogleChrome/puppeteer/issues/1361
but not working.

Need help sincerely 😢

[aslushnikov]

@joevo2 can you try running browser with the following flag:

const browser = await puppeteer.launch({                                                                                                                                                                                                                                                            
  args: ['--disable-features=site-per-process'],                                                                                                                                                                                                                                                    
  headless: false                                                                                                                                                                                                                                                                                   
}) ;

if it helps then this is due to #2548.

[joevo2]

@aslushnikov cool stuff! it worked! thanks man

[mayankchincholkar]

Thanks @aslushnikov and @joevo2 you guys saved my day. Awesome stuff 👍

However, I am still unable to perform certain operations.
Like await frame.$eval('#selector', element => element.textContent); works fine
however, await frame.waitForSelector('#selector',{visible: true}); times out for the same selector.
Can you please help here.

[marcusstenbeck]

@mayankchincholkar

Here's how I sorted it.

async function recursiveFindInFrames(inputFrame, selector) {
  const frames = inputFrame.childFrames();
  const results = await Promise.all(
    frames.map(async frame => {
      const el = await frame.$(selector);
      if (el) return el;
      if (frame.childFrames().length > 0) {
        return await recursiveFindInFrames(frame, selector);
      }
      return null;
    })
  );
  return results.find(Boolean);
}

async function findInFrames(page, selector) {
  const result = await recursiveFindInFrames(page.mainFrame(), selector);
  if (!result) {
    throw new Error(
      `The selector \`${selector}\` could not be found in any child frames.`
    );
  }
  return result;
}

const element = await findInFrames(page, '#element');

[Antoniojfl]

This worked for me thanks a lot!