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

Question

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

Answer 1

如果您想等待所有个元素，您必须知道它们应该有多少。这是每 1 秒创建每个 .ticket 的示例。因此，当您知道页面上应该有 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();
})();

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

How to wait for all instances of a specific selector to load in puppeteer?

javascript

node.js

puppeteer