Почему кукловод не отображает эту страницу правильно, когда он делает снимок экрана?

Question

Этот код использует библиотеку Node.JS puppeteer, чтобы сделать снимок экрана веб-страницы и сохранить его как изображение в формате png:

#!/usr/bin/env node
const puppeteer = require("puppeteer");
(async () => {
    const browser = await puppeteer.launch({args: ['--no-sandbox', '--incognito']});
    const page = await browser.newPage();
    await page.setRequestInterception(true);
    page.on('request', request => {
        if (request.resourceType() === 'script')
        request.abort();
        else
        request.continue();
    });
    await page.goto(process.argv[2], { waitUntil: 'networkidle2' });
    await page.screenshot({path: process.argv[3], fullPage: true });
    await browser.close();

Сценарий запускается какthis:

nodejs screenshot-webpage.js "https://www.washingtonpost.com/sports/nationals/the-astros-are-back-in-this-world-series-and-the-chess-game-is-officially-afoot/2019/10/26/ad6739c4-f75f-11e9-ad8b-85e2aa00b5ce_story.html" "filename-for-screenshot.png"

Может кто-нибудь повторить сломанный скриншот, показанный ниже?

Сценарий Node.JS игнорирует элементы Javascript, что является конструктивным решением, но если я просматриваю страницу в веб-браузере с отключенным Javascript, он выглядит правильно

Что-то не так с моим кукловодомскрипт? Я использую Node.JS v12.13.0 в системе Debian 9 x64. Сценарий успешно делает снимки экрана других веб-страниц, поэтому я не уверен, является ли это сам сценарий или что-то около того, как сценарий взаимодействует с этой конкретной веб-страницей.

Снимок экрана выглядит следующим образом (изображение обрезано вверхстраницы, чтобы вписать ее в вопрос):

---

Неработающий скриншот

---

---

Исправитьснимок экрана

---

:

Answer 1

Я протестировал ваш скрипт и немного его изменил.

const puppeteer = require("puppeteer");
(async () => {
    const browser = await puppeteer.launch({
        // headless: false,
        devtools: false,
        args: ['--no-sandbox', '--incognito']
    })
    const page = (await browser.pages())[0]
    await page.setRequestInterception(true)

    let cssNum = 0
    console.log ('\n\nList of CSS loaded:\n')
    page.on('request', request => {
        if (request.resourceType() === 'script'){
            request.abort()
        } else {
            request.continue()
        }
        if (request.resourceType() === 'stylesheet'){
            cssNum++
            console.log (`[${cssNum}] => ${request.url()}`)
        }
    });

    await page.goto(process.argv[2], { waitUntil: 'networkidle2' })
    await page.screenshot({
        type: 'png',
        path: process.argv[3],
        fullPage: true
    })
    await browser.close()
    console.log('\n\n')
})()

Добавлены некоторые параметры отладки, такие как headless и devtools в puppeteer.launch. Для первого запуска для безголового устанавливается значение false, и оно работает хорошо.

[640px x 9726px, 685KBs] Работает плавно и нормально

И когда яустановите {headless : true} или установите его в качестве комментария (по умолчанию true при использовании puppeteer), снимок экрана был уродливым, как вы сказали ранее.

[624px × 8898px, 720KBs] Снимок экрана уродлив, а макет плохойотформатированный

Я думаю, что сайт Washington Posts обнаруживает безголовый браузер и различает результаты ответа. Как видно на рисунке ниже, таблицы стилей - это разные URL-адреса.

[847px x 405px, 54KBs] Terminal Console.logs показывают различия

И теперь вывсегда можно установить запуск кукловода по умолчанию на {headless : false}.

Также вы должны добавить аргументы без головы, которые должны быть установлены в командной строке, чтобы вы могли легко запускать и добавлять опции в терминале как без заголовка true, так и false.