Кукольник: захват всего HTML со страницы, которая использует ленивую нагрузку

Question

Я пытаюсь получить весь HTML на веб-странице, которая использует ленивую загрузку.То, что я пытался прокрутить до самого конца, а затем использовать page.content ().Я также попытался прокрутить назад до верхней части страницы после прокрутки до нижней части, а затем использовать page.content ().Оба способа захватывают некоторые строки таблицы, но не все, что является моей главной целью.Я полагаю, что веб-страница использует ленивую загрузку из activ.js.

const puppeteer = require('puppeteer');
const url = 'https://www.torontopearson.com/en/departures';
const fs = require('fs');

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto(url);
    await page.waitFor(300);

    //scroll to bottom
    await autoScroll(page);
    await page.waitFor(2500);

    //scroll to top of page
    await page.evaluate(() => window.scrollTo(0, 50));

    let html = await page.content();

    await fs.writeFile('scrape.html', html, function(err){
        if (err) throw err;
        console.log("Successfully Written to File.");
    });
    await browser.close();
});

//method used to scroll to bottom, referenced from user visualxcode on https://github.com/GoogleChrome/puppeteer/issues/305
async function autoScroll(page){ 
    await page.evaluate(async () => {
        await new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 300;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

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

Answer 1

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

const bodyHandle = await page.$('body');
const { height } = await bodyHandle.boundingBox();
await bodyHandle.dispose();
console.log('Handling viewport...')
const viewportHeight = page.viewport().height;
let viewportIncr = 0;
while (viewportIncr + viewportHeight < height) {
await page.evaluate(_viewportHeight => {
window.scrollBy(0, _viewportHeight);
}, viewportHeight);
await wait(30);
viewportIncr = viewportIncr + viewportHeight;
}
console.log('Handling Scroll operations')
await page.evaluate(_ => {
window.scrollTo(0, 0);
});
await wait(100);  
await page.screenshot({path: 'GoogleHome.jpg', fullPage: true});

Из этого я могу даже снимать длинные скриншоты. Надеюсь, это поможет вам.

Answer 2

Проблема в том, что связанная страница использует библиотеку response-virtualized .Эта библиотека отображает только видимую часть сайта.Поэтому вы не можете получить всю таблицу сразу.Ползание до нижней части таблицы приведет только к тому, что нижняя часть таблицы будет помещена в DOM.

Чтобы проверить, откуда страница загружает свое содержимое, необходимо проверить вкладку сети DevTools.Вы заметите, что содержимое страницы загружается с этого URL , что, по-видимому, обеспечивает идеальное представление DOM в формате JSON.Таким образом, действительно нет необходимости очищать эти данные со страницы.Вы можете просто использовать URL.