javascript - Puppeteer 阻止元素在不 sleep /等待的情况下出现

Question

我想遍历一个包含 URL 的数组并将一个元素插入另一个数组。

这是我使用的代码:

for (var i=0; i < links.length ; i++){
    await page.goto(links[i], { timeout: 0, waitUntil: ['domcontentloaded'] });
    await page.waitFor(20000); 

    var values = await page.evaluate(
        () => [...document.querySelectorAll('.XYZ')]
        .map(element => element.getAttribute('src'))
        ); //get the elements location
        media.push(values); // push to array
    );
    console.log(media);
}

此代码有效。但是，请注意第三行是 await page.waitFor(20000);。

我正在使用它来等待页面加载。如果我省略这一行，有时，名为 values 的变量是 undefined。

我试验了其他时间延迟值，它越低，未定义的可能性就越大。

在不浪费不必要的大延迟时间的情况下遍历数组的正确方法是什么？

因为我在 page.goto() 方法中使用了 waitUntil: ['domcontentloaded']，所以这个过程不应该是自动的吗？

Answer 1

考虑到您正在使用 evaluate 方法从 UI 中检索类名为 XYZ 的所有元素，为什么不使用 page.waitForSelector() 让 puppeteer 等待使用该类的最后一个加载元素加载到 UI 中？

通过这样做，您将知道您感兴趣的所有元素都将在您的评估方法被触发之前加载。

这比要求它每次硬编码等待 20 秒要高效得多。您希望在自动化期间始终避免使用硬编码等待调用。