Кукольник не возвращает все запросы с определенного сайта

Question

У меня есть следующий код, который извлекает все запросы с определенного веб-сайта (Получить все изображения, CSS, сценарии, шрифты ...)

var totalRequests = 0;

    puppeteer.launch().then(async browser => {
        const page = await browser.newPage();
        await page.setRequestInterception(true);
        page.on('request', interceptedRequest => {
            interceptedRequest.continue();
        });
        page.on('response', response => {
            totalRequests = totalRequests + 1;
            console.log('Url: ' + response.url());
        });
        await page.goto('https://stackoverflow.com');
        await browser.close().then(() => {
            res.send('Requests: ' + totalRequests);
        });

Отлично, в консоли я вижу все URL-адреса с stackoverflow.com (файлы Css, файлы изображений, файлы шрифтов и файлы Javascript) и общее количество файлов, которые были запрошены (в этом случае я вижу 31 запросов), но по какой-то причине я заметил, что этот код не возвращает все запросы страниц.

Если мы пойдем в Google Chrome, нажмите F12, перейдите в раздел сети и перезагрузите страницу (учтите, что вы находитесь по URL https://stackoverflow.com),, мы увидим в общей сложности 39-40 файлов запросов.

Проблема в том, что мой код возвращает только 30–31 запросов, и в консоли я не вижу все ссылки, которые были показаны, как в Chrome. Что может происходить? И что я могу сделать, чтобы вернуть все запросы, как показано в Google Chrome?

Answer 1

Основной выпуск

Для stackoverflow.com количество загружаемых ресурсов зависит от размера окна вашего браузера. Если ваш видовой экран это позволяет, stackoverflow покажет вам рекламу (на правой боковой панели). Но соответствующие ресурсы (JavaScript, изображения и т. Д.) Будут загружены только в том случае, если размер вашего окна просмотра достаточно широк. Попробуйте сами, уменьшив размер окна, пока правая боковая панель не будет скрыта, а затем перезагрузите страницу. DevTools покажет вам другое количество загруженных ресурсов.

Пример кода

В следующем примере показано, как смоделировать большее окно браузера, установив свойство defaultViewport. Обратите внимание, что я полностью использую синтаксис async / await в этом примере, и я удалил вызов page.setRequestInterception, так как событие response также будет запускаться без него (его нужно использовать, только если вы очень хочу изменить запрос или ответ).

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ // headless: false, devtools: true,
        defaultViewport: { width: 1600, height: 800 }
    });
    const page = await browser.newPage();

    var totalRequests = 0;
    page.on('response', () => {
        totalRequests = totalRequests + 1;
    });

    await page.goto('https://stackoverflow.com');
    console.log(totalRequests);

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

Это возвращает 30 для меня, что все еще не то число, которое мы ожидаем (~ 40).

Ожидание загрузки всех ресурсов

Есть еще одна проблема с вашим кодом. Давайте откроем DevTools, чтобы посмотреть, что происходит. Если вы посмотрите на диаграмму водопада на вкладке вашей сети, она выглядит так:

Видите эту красную линию? Это событие загрузки. По умолчанию page.goto ожидает этого события. Но в нашем случае на самом деле есть несколько файлов, которые загружаются после запуска события (файлы справа от красной линии). Чтобы также дождаться загрузки этих ресурсов, мы можем использовать одну из опций функции page.goto. При использовании waitUntil: 'networkidle0' скрипт будет ждать, пока не прекратится сетевая активность.

Таким образом, если вы отключите строку page.goto сверху этой строкой, вы должны увидеть ожидаемое количество запросов:

await page.goto('https://stackoverflow.com', { waitUntil: 'networkidle0' });

При использовании этого параметра приведенный выше код вернул мне 39, чего вы и ожидали.