javascript - 为什么 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 浏览器中查看页面，它看起来是正确的

我的 puppeteer 脚本有问题吗？我在 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。 第一次运行时，headless 设置为 false，效果很好。

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

当我设置 {headless : true} 或将其设置为注释(使用 puppeteer 时默认 true)时，屏幕截图如您之前所说很难看。

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

我认为《华盛顿邮报》网站会检测 headless 浏览器并区分响应结果。如下图所示，样式表是不同的 URL。

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

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

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