如何等待特定选择器的所有实例加载到 puppeteer 中？答案

【问题标题】：How to wait for all instances of a specific selector to load in puppeteer?如何等待特定选择器的所有实例加载到 puppeteer 中？
【发布时间】：2018-02-12 21:09:51
【问题描述】：

正如标题所说，有什么方法可以等待特定类的所有实例，比如加载一个名为“div.ticket”的选择器。我尝试使用waitForNavigation({waitUntil: "networkidle2"});，但它花费了太长时间，我试图从页面中获取一个 pdf，其中包含多张票，所有票都在一个具有“票”类的 div 中，但票没有正确获得（图像和一些文本丢失）当我在没有任何等待的情况下运行它时。我也试过page.waitFor('.ticket');，但它没有给出想要的输出。

【问题讨论】：

标签： javascript node.js puppeteer

【解决方案1】：

如果你想等待所有元素，你必须知道它们应该有多少。这是一个示例，每个 .ticket 每 1 秒创建一次。因此，当您知道页面上应该是 3 张票时，您应该等待page.waitFor('.ticket:nth-of-type(3)')：

const puppeteer = require('puppeteer');

const html = `
<html>
    <head></head>
    <body>
        <div class="tickets"></div>
        <script>
            const ticketsContainer = document.querySelector('.tickets');
            let i = 0;
            const timeInterval = setInterval(
                () => {
                    const newTicket = document.createElement("div");
                    newTicket.innerHTML = "ticket" + i;
                    newTicket.className = "ticket";
                    ticketsContainer.appendChild(newTicket);
                    i++;
                    if (i >= 3) {
                        clearInterval(timeInterval);
                    }
                }, 
                1000
            );
        </script>
    </body>
</html>`;

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(`data:text/html,${html}`);
    // await page.waitFor('.ticket');
    await page.waitFor('.ticket:nth-of-type(3)');
    await page.screenshot({ path: 'image.png' });
    await browser.close();
})();

【讨论】：