In the following example how do I wait for the pop up window to finish loading? After clikcing the google icon you get a pop up window to login to gmail, when I try to interact with the second page it is undefined (as I don't know how to wait for it to fully load. Any advice?

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    page = await browser.newPage();
    await page.goto("");
    await page.waitForSelector(".Icon-google");
    await page.click(".Icon-google");
    const pages = await browser.pages();
    console.log(pages[2].url());
})();

In the following example how do I wait for the pop up window to finish loading? After clikcing the google icon you get a pop up window to login to gmail, when I try to interact with the second page it is undefined (as I don't know how to wait for it to fully load. Any advice?

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    page = await browser.newPage();
    await page.goto("https://www.example.com/signin");
    await page.waitForSelector(".Icon-google");
    await page.click(".Icon-google");
    const pages = await browser.pages();
    console.log(pages[2].url());
})();

• javascript
• puppeteer

• This question is similar to: How to handle popup windows in Puppeteer. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – ggorlen Commented Jul 19, 2024 at 2:27

2 Answers 2

You can wait for a new target to be created.

const browser = await puppeteer.launch({headless: false});
page = await browser.newPage();
await page.goto("https://app.testim.io/#/signin");
await page.waitForSelector(".Icon-google");
const nav = new Promise(res => browser.on('targetcreated', res))
await page.click(".Icon-google");
await nav
const pages = await browser.pages();
console.log(pages.length);//number of pages increases !
console.log(pages.map(page => page.url()));

P.S. first I tried page.waitForNavigation() but it didn't work, probably because it's a popup.

const [newPage] = await Promise.all([
  new Promise((resolve, reject) => {
    page.once('popup', resolve))
    setTimeout(reject, 10000)
  },

  page.click('something.that-will-open-the-popup')
]);

await newPage.waitForSelector('.page-is-loaded')