generate incomplete pdf before multiple iframe is loaded

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.11.0 (I pasted the code from 1.9.0)
• Platform / OS version: MAC
• URLs (if applicable):
• Node.js version: v10.14.1

What steps will reproduce the problem? https://try-puppeteer.appspot.com/

const browser = await puppeteer.launch();

const page = await browser.newPage();

  const html = '<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div>'
  await page.setContent(html, { waitUntil: 'domcontentloaded' });
  await page.emulateMedia('screen');
  
  await page.setViewport({
    width: 1280,
    height: 750
  });
await page.waitFor(100000);
const pdf = await page.pdf({
    scale: 1,
    printBackground: true,
    margin: { bottom: 0 },
    path: 'screenshot.pdf'
 });
 

await browser.close();

Please include code that reproduces the issue.

1. go to https://try-puppeteer.appspot.com/
2. paste the codes I have listed above (3 google map iframe)
3. the pdf generated does not have the third iframe rendered correctly.

I have tried to set a timeout, even with 60 secs time out It wont render correctly. And it does not seem to respect the the rule of await page.setContent(html, { waitUntil: 'domcontentloaded' });

What is the expected result? await page.setContent(html, { waitUntil: ‘domcontentloaded’ }); should get all iframe load events as well. or a method to provide a way of detecting iframe loading What happens instead? renders incomplete iframes.

[sammiwei911]

thanks @vsemozhetbyt’s help. Here is the working codes:

const page = await browser.newPage();
await page.setViewport({
      width: 1280,
      height: 750
});
await page.emulateMedia('screen');

const html = '<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div><div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12077.188806999058!2d-73.2243774!3d40.8214352!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e562057f79c0860!2sH+Lee+Dennison+Building!5e0!3m2!1sen!2sus!4v1547750310674" height="250" width="600" allowfullscreen=""></iframe></div>'
await page.setContent(html, { waitUntil: 'networkidle0' });
await page.evaluate(async () => {
  for (const iframe of Array.from(document.querySelectorAll('iframe'))) {
    iframe.scrollIntoView();
    await new Promise((resolve) => { setTimeout(resolve, 2000); });
  }
});

const pdf = await page.pdf({
      scale: 1,
      printBackground: true,
      margin: { bottom: 0 },
      path: 'screenshot.pdf'
});

await browser.close();

[vsemozhetbyt]

What if you call scrollIntoView() for each frame in a loop waiting some time after each call and then create the PDF?