¿Cómo tomar una captura de pantalla de una página N segundos después de cargar la página con Chrome Headless?

15

Quiero hacer una captura de pantalla de una página con Chrome Headless, y hemos visto tanto --screenshot y el --virtual-time-budget interruptores para tomar una captura de pantalla y limitar el tiempo de carga que espera el navegador.

Sin embargo, tengo elementos en la página que esperan a que DOMContentLoaded se renderice, y queremos capturarlos también.

Estoy buscando una manera de tomar una captura de pantalla, digamos, 5 segundos después la página se carga, en lugar de la derecha cuando se considera cargada.

Estamos llamando a Chrome Headless desde nuestra aplicación NodeJS así: 

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

Sabemos que hay posibles bibliotecas npm que pueden lograr esto utilizando una API desde el nodo, en lugar de usar interruptores de línea de comandos, pero nos preocupa la estabilidad (al equipo de Chrome le gusta romper todas sus API internas con regularidad).

TL; DR

¿Hay alguna forma de hacer que Chrome Headless espere unos segundos después de cargar la página antes de tomar una captura de pantalla?

google-chrome screenshot Madara Uchiha
fuente
3
David Schnurr compartió el script nodejs que hace lo que usted quiere aquí . correr nodejs index.js --url="http://www.eff.org" --delay=5000 Por 5 segundos de retraso.
Vlastimil Ovčáčík

Respuestas:

4

Estaba buscando lo mismo. Lo que encontré es google titiritero. https://github.com/GoogleChrome/puppeteer

Hay muchos ejemplos, pero básicamente puedes hacer lo que yo hice. 

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
fuente
1

Como Vlastimil Ovčáčík Estados Unidos, David Schnurr ha escrito y compartido un script nodeJS para este propósito exacto en Medio .

El script debe ser plug and play, menos algunas dependencias.

La configuración es como tal:

  1. Clona el repositorio de Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Instalar dependencias:
    npm install chrome-remote-interface minimist
  3. Ejecuta el script
    node index.js --url="https://superuser.com/questions/1209741/how-to-take-a-screenshot-of-a-page-n-seconds-after-page-is-loaded-with-chrome-he" --delay=4000
var firstName
fuente