web-dev-qa-db-fra.com

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

Je souhaite effectuer une capture d'écran d'une page avec Chrome Headless. Nous avons déjà vu les commutateurs --screenshot et --virtual-time-budget qui permettent de prendre une capture d'écran et de limiter le temps de chargement du navigateur.

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

Je cherche un moyen de prendre une capture d'écran, disons, 5 secondes après la page est chargée, au lieu d'être correcte lorsqu'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 que certaines bibliothèques npm peuvent atteindre cet objectif en utilisant une API de nœud au lieu d'utiliser des commutateurs de ligne de commande, mais nous sommes préoccupés par la stabilité (l'équipe de Chrome aime casser régulièrement toutes ses API internes).

TL; DR

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

google-chromescreenshot
15
Madara Uchiha

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

Il y a beaucoup d'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();

})();
6
Vincnetas

Comme l'indique Vlastimil Ovčáčík , David Schnurr a écrit et partagé un script nodeJS à cet effet sur Moyen .

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

La configuration est en tant que telle:

  1. Cloner le référentiel Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Installer des dépendances:
    npm install chrome-remote-interface minimist
  3. Lancer 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
1
var firstName