Qualità dell'immagine del browser senza testa: cromo senza testa, js fantasma, js più sottile

Sto cercando ulteriori informazioni su ciò che accade sotto il cofano nei browser senza testa. In passato ho lavorato con diversi browser senza testa come slimmerJS , Phantom.js e Headless Chrome , con lo scopo di acquisire schermate in diversi siti.

Non sono mai riuscito a generare un'immagine dall'aspetto reale e di qualità nitida che assomigli a ciò che vedi nel browser, sembra una limitazione dello strumento, come ad esempio la massima qualità che puoi ottenere da questo, ma voglio capire perché, e possibilmente, come migliorarlo.

Si prega di confrontare gli esempi seguenti.

1. In questo sito Web, https://en.wikipedia.org/wiki/Main_Page , trova il logo di Wikipedia nell'angolo in alto a sinistra.
2. Questa è una schermata di quel logo presa dal cromo senza testa attraverso il burattinaio:

Se si confronta il sito Web reale con lo screenshot, è possibile vedere come l'immagine viene sfocata. In questo esempio, è solo un'immagine, ma ciò accade anche con il testo HTML.

Ora, se dovessi fare uno screenshot usando il mio computer, che si tratti di Windows, Mac, Linux, otterrei uno screenshot di ottima qualità che assomiglia completamente al vero affare.

Allora perché succede? Ho provato tutte le cose standard come impostare lo screenshot con la massima qualità in ogni libreria e impostare un viewport abbastanza grande in modo che lo screenshot abbia una risoluzione decente. È davvero la massima qualità che puoi ottenere da uno screenshot del browser senza testa?

Qualsiasi illuminazione su questo settore sarebbe apprezzata. Grazie!

Otterrai risultati migliori impostando deviceScaleFactor su 2 (aka emula retina):

(async () => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();
    await page.setViewport({width: 800, height: 800, deviceScaleFactor: 2});
    await page.goto('https://en.wikipedia.org/wiki/Main_Page')

    await page.screenshot({ fullPage: true, path: 'test.png' })
})();

Come puoi vedere, puoi ottenere risultati molto decenti:

Fonte: https://github.com/puppeteer/puppeteer/issues/571