在 Puppeteer 中如何等待弹出页面加载完成？

Question

在以下示例中，我应该如何等待弹出窗口完成加载？ 在单击谷歌图标后，您会收到一个弹出窗口以登录Gmail，当我尝试与第二个页面交互时， 它未定义（因为我不知道如何等待完全加载）。有什么建议吗？

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());
})();

- Captain_Meow_Meow

Answer 1

你可以等待新目标被创建。

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()));

顺便说一句，我先尝试了page.waitForNavigation()，但它没有起作用，可能是因为这是一个弹出窗口。

- eliranhe

Answer 2

const [newPage] = await Promise.all([
  new Promise((resolve) => page.once('popup', resolve)),
  page.click('something.that-will-open-the-popup')
]);

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

- Raphael Rafatpanah