Come fare uno screenshot di una pagina N secondi dopo che la pagina è stata caricata con Chrome Headless?

16

Voglio fare uno screenshot di una pagina con Chrome Headless, e abbiamo visto sia --screenshotgli --virtual-time-budgetswitch che gli switch per fare uno screenshot e limitare l'attesa del browser per il tempo di caricamento.

Tuttavia, nella pagina sono presenti elementi che attendono il rendering di DOMContentLoaded e vogliamo catturare anche quelli.

Sto cercando un modo per fare uno screenshot, diciamo, 5 secondi dopo che la pagina è stata caricata, invece che a destra quando è considerata caricata.

Chiamiamo Chrome Headless dalla nostra applicazione NodeJS in questo modo:

cp.spawnSync("google-chrome-beta", ["--headless", "--disable-gpu", "--screenshot", "--profile-directory=Default", "--window-size=1920,6200", "--virtual-time-budget=25000", url]);

Sappiamo che ci sono possibili librerie npm che possono ottenere questo risultato utilizzando un'API dal nodo, invece di utilizzare le opzioni della riga di comando, ma siamo preoccupati per la stabilità (al team di Chrome piace rompere regolarmente tutte le loro API interne).

TL; DR

Esiste un modo per far attendere Chrome Headless qualche secondo dopo il caricamento della pagina prima di fare uno screenshot?

google-chrome screenshot

— Madara Uchiha
fonte

3

David Schnurr ha condiviso lo script nodejs che fa quello che vuoi qui . Esegui nodejs index.js --url="http://www.eff.org" --delay=5000per 5 secondi di ritardo.

— Vlastimil Ovčáčík,

6

Stavo cercando la stessa cosa. Quello che ho trovato è burattinaio di Google. https://github.com/GoogleChrome/puppeteer

Ci sono molti esempi, ma fondamentalmente puoi fare quello che ho fatto.

const puppeteer = require('puppeteer');

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
};

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({width: 5960, height: 4209})
    await page.goto('http://stackoverflow.com', {waitUntil: 'networkidle'});
    await timeout(10000)
    await page.screenshot({path: 'example.png'});
    browser.close();

})();

— Vincnetas
fonte

Mar 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead

— 4253wyerg4e,

2

Come afferma Vlastimil Ovčáčík , David Schnurr ha scritto e condiviso uno script nodeJS per questo preciso scopo su Medium .

Lo script dovrebbe essere plug and play, meno alcune dipendenze.

L'installazione è come tale:

Clona il repository Git.
git clone https://github.com/schnerd/chrome-headless-screenshots.git
Installa dipendenze:
npm install chrome-remote-interface minimist
Esegui lo script
node index.js --url="/superuser/1209741/how-to-take-a-screenshot-of-a-page-n-seconds-after-page-is-loaded-with-chrome-he" --delay=4000

— var firstName
fonte