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

16

Je veux faire une capture d'écran d'une page avec Chrome Headless, et nous avons vu --screenshotles --virtual-time-budgetcommutateurs et pour prendre une capture d'écran et limiter l'attente du navigateur pour le temps de 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 prendre une capture d'écran, disons, 5 secondes après le chargement de la page, au lieu de la droite lorsqu'elle est considérée comme chargée.

Nous appelons Chrome Headless à partir de notre application NodeJS comme ceci:

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 possibles qui peuvent y parvenir en utilisant une API à partir d'un nœud, 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 leurs API internes).

TL; DR

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

google-chrome screenshot Le fantôme de Madara
la source
3
David Schnurr a partagé un script nodejs qui fait ce que vous voulez ici . Courez nodejs index.js --url="http://www.eff.org" --delay=5000pendant 5 secondes.
Vlastimil Ovčáčík

Réponses:

6

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

Il existe de nombreux exemples, mais 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();

})();
Vincnetas
la source
Mars 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead
4253wyerg4e
2

Comme l'indique Vlastimil Ovčáčík , David Schnurr a écrit et partagé un script nodeJS dans ce but précis sur Medium .

Le script doit être plug and play, moins certaines dépendances.

La configuration est en tant que telle:

  1. Clonez le référentiel Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Installer les dépendances:
    npm install chrome-remote-interface minimist
  3. Exécutez le 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
la source