パペッティア（人形使い） -スクロールダウンしてください。

質問

スクロールダウンすると、新しいコンテンツが作成される状況にあります。新しいコンテンツは特定のクラス名を持っています。

すべての要素が読み込まれるまでスクロールダウンし続けるにはどうしたらよいでしょうか。

言い換えれば、スクロールダウンし続けると何も新しいものが読み込まれなくなる段階に到達したいのです。

私は、スクロールダウンするためのコードを使っていました。

await page.waitForSelector('.class_name');

この方法の問題点は、すべての要素が読み込まれた後、コードがスクロールダウンし続け、新しい要素が作成されず、最終的にタイムアウトエラーが発生することです。

これがそのコードです。

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

どのように解決するのですか？

これを試してみてください。

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, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if(totalHeight >= scrollHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

出典 https://github.com/chenxiaochun/blog/issues/38