Javascript 为什么木偶演员在截图时不能正确呈现这个页面？

此代码使用Node.JS库获取网页的屏幕截图并将其保存为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"

有人能复制下面显示的坏截图吗

JS脚本忽略了Javascript元素，这是出于设计，但是如果我在禁用Javascript的web浏览器中查看页面，它看起来是正确的

我的木偶戏剧本有什么问题吗？我在Debian9x64系统上使用Node.jsv12.13.0。这个脚本成功地截取了其他网页的截图，所以我不确定是脚本本身还是脚本如何与这个特定网页交互

屏幕截图如下所示（图像被裁剪到页面顶部以适合问题）：

---

截图

---

---

正确的截图

---

:

---

我对您的脚本进行了一些测试，并对其进行了一些修改

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

添加了一些调试设置，例如

puppeter.launch

中的headless和devtools。 在第一次运行时，headless设置为false，并且运行良好

当我设置

{headless:true}

或将其设置为注释（使用Puppeter时默认为true）时，屏幕截图就像您之前所说的那样难看

我认为华盛顿发布的网站检测到了无头浏览器，并区分了回应的结果。如下图所示，样式表是不同的URL

现在，您可以将默认的木偶演员启动设置为

{headless:false}

此外，您还应该在命令行中添加要设置的headless参数，以便可以在终端中轻松地运行和添加选项（headless true或false）