Кукольник ждут страницы. $$ ('. className'), но я получаю только первые 11 элементов с этим классом, почему?

Question

код, который я использую для очистки списка студентов:

let collection1 = await page.$$('div.layout-2DM8Md')
  console.log("Student Online:")
  for (let el of collection1) {
    let name = await el.$eval(('div.name-uJV0GL'), node => node.innerText.trim());
    console.log(name)
  }

Answer 1

Возможно, потому что содержимое остальных этих элементов загружается динамически с помощью Javascript фреймворка, такого как React или Vue. Это означает, что он загружается только тогда, когда эти элементы входят в область просмотра браузера.

Чтобы исправить это, вам нужно написать функцию, которая автоматически прокручивает страницу, чтобы эти элементы могли попасть в область просмотра, а затем вы прежде чем собирать данные, нужно дождаться окончания этой функции sh.

Функция прокрутки:

const autoScroll = async(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();
                }
            }, 30);
        });
    });
}

Затем вызвать эту функцию после page.goto() и до вы получаете контент с помощью page.content(). Я также устанавливаю ширину и высоту области просмотра, тогда прокрутка идет немного быстрее:

await page.goto(url, {waitUntil: 'load'});
await page.setViewport({
    width: 1200,
    height: 800
});
await autoScroll(page); // The scroll function
const html = await page.content()