18 votes

Comment faire une capture d'écran d'une page N secondes après le chargement de la page avec Chrome Headless ?

Je veux faire une capture d'écran d'une page avec Chrome Headless, et nous avons vu à la fois le --screenshot とのことです。 --virtual-time-budget interrupteurs pour prendre une capture d'écran et limiter le temps d'attente du navigateur pour le chargement.

J'ai cependant des éléments sur la page qui attendent que DOMContentLoaded soit rendu, et nous voulons les capturer aussi.

Je cherche un moyen de faire une capture d'écran, disons, de 5 secondes après la page est chargée, plutôt que juste au moment où elle est considérée comme chargée.

Nous appelons Chrome Headless depuis notre application NodeJS comme suit :

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

Nous savons qu'il existe des bibliothèques npm qui permettent d'y parvenir en utilisant une API de node, au lieu d'utiliser des commutateurs de ligne de commande, mais nous sommes préoccupés par la stabilité (l'équipe Chrome aime casser régulièrement toutes ses API internes).

TL;DR

Est-il possible de faire en sorte que Chrome Headless attende quelques secondes après le chargement de la page avant de faire une capture d'écran ?

7voto

Vincnetas Points 71

Je cherchais la même chose. Ce que j'ai trouvé, c'est google puppeteer. https://github.com/GoogleChrome/puppeteer

Il existe de nombreux exemples, mais en gros, vous pouvez faire ce que j'ai fait.

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();

})();

2voto

Red Flag Points 27

Comme Vlastimil Ovcácík David Schnurr a écrit et partagé un script nodeJS dans ce but précis sur le site Moyen .

Le script devrait être plug and play, moins quelques dépendances.

La configuration est la suivante :

  1. Clonez le dépôt Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git

  2. Installer les dépendances :
    npm install chrome-remote-interface minimist

  3. Exécuter le 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

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

X