puppeteer 如何点击动态 "View More" link 直到加载所有内容

Question

我正在尝试抓取一个带有“查看更多”link 的页面，该页面会动态加载更多内容。如果有更多内容要加载，“查看更多”link 将再次出现，直到没有更多内容为止。

我想以编程方式不断单击循环中的“查看更多”link，直到加载所有内容，然后我将抓取完整列表。

我下面的代码找到第一个查看更多 link 没问题，但找不到第二个（或更多）link 如果它是动态加载的。

有人能帮忙吗？

谢谢。

循环功能不断点击“查看更多链接”link并加载动态内容

const clickViewMoreLoop = async() => {
    try {
        await page.waitForSelector(viewMoreSelector, { timeout: 5000 });
        console.log(“still loading…”);
        await page.$eval(selector, (el) => {
            el.click();
        });
        await page.waitForNavigation({ waitUntil: 'networkidle0' });
        return clickViewMoreLoop();
    } catch (e) {
        console.log(“loaded");
    }
}

await clickViewMoreLoop();

Answer 1

好的，所以我发现问题在于“查看更多”按钮需要位于当前浏览器视口内才能被选中和单击。所以我添加了 el.scrollIntoView();代码在点击事件之前将其显示出来，然后稍作停顿，以便代码有时间捕捉它。

这似乎工作正常...

console.log("click view more to load entire list");
while (true) {
    try {
        await page.$eval('#mainContentContainer > main > div > div > div > div.notranslate > div > div:nth-child(2) > button', (el) => {
                el.scrollIntoView();
                el.click();
        });
        await page.waitForTimeout(500);
        console.log("loading...");
    } catch (e) {
        console.log("done");
        break;
    }
}

如果有人有任何其他改进，请分享！

puppeteer 如何点击动态 "View More" link 直到加载所有内容

puppeteer how to click dynamic "View More" link until all content loaded

javascript

chromium

node.js

puppeteer