javascript - Puppeteer - 向下滚动，直到你不能再

Question

我处于向下滚动时创建新内容的情况。新内容具有特定的类名。

如何继续向下滚动直到所有元素都加载完毕？

换句话说，我想达到一个阶段，如果我继续向下滚动，不会加载任何新内容。

我是用代码向下滚动，加上一个

await page.waitForSelector('.class_name');

这种方法的问题是，在所有元素加载后，代码一直向下滚动，没有创建新元素，最终我得到一个超时错误。

这是代码:

await page.evaluate( () => {
  window.scrollBy(0, window.innerHeight);
});
await page.waitForSelector('.class_name');

Answer 1

试一试:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.yoursite.com');
    await page.setViewport({
        width: 1200,
        height: 800
    });

    await autoScroll(page);

    await page.screenshot({
        path: 'yoursite.png',
        fullPage: true
    });

    await browser.close();
})();

async function autoScroll(page){
    await page.evaluate(async () => {
        await new Promise((resolve) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if(totalHeight >= scrollHeight - window.innerHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

来源:https://github.com/chenxiaochun/blog/issues/38

编辑

将 window.innerHeight 添加到计算中，因为可用的滚动距离是 body 高度减去视口(viewport)高度，而不是整个 body 高度。