为什么puppeteer截屏时无法正确呈现此页面？

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();

脚本运行如下：

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的Web浏览器中查看页面，则看起来正确

我的操纵up脚本有问题吗？我在Debian 9 x64系统上使用Node.JS v12.13.0。该脚本成功拍摄了其他网页的屏幕截图，因此我不确定是脚本本身还是脚本与该特定网页的交互方式。

屏幕快照如下（图像裁剪到页面顶部以适合问题）：

---

屏幕截图损坏

---

---

正确的屏幕截图

---

：

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')
})()

在puppeteer.launch中添加了一些调试设置，例如headless和devtools。 对于第一次运行，无头设置为false，并且效果很好。

[640px x 9726px, 685KBs] It works smoothly and fine

当我设置{headless : true}或将其设置为注释时（使用操纵符时默认为true），如您之前所说的那样，屏幕截图很难看。

[624px × 8898px, 720KBs] Screenshot is ugly and layout is bad formatted

我认为《华盛顿邮报》网站检测到无头浏览器并区分了响应结果。如您所见，下面的图片，样式表是不同的URL。

[847px x 405px, 54KBs] Terminal Console.logs show the differences

现在，您始终可以将默认的操纵up启动设置为{headless : false}。

此外，您还应该添加要在命令行中设置的无头args，以便您可以轻松地在终端中运行和添加选项，无头true或false。