15

I want to make a screenshot of a page with Chrome Headless, and we've seen both the --screenshot and the --virtual-time-budget switches for taking a screenshot and limiting the browser's waiting for load time.

I have elements on the page however that wait for DOMContentLoaded to render, and we want to capture those too.

I'm looking for a way to take a screenshot, say, 5 seconds after the page is loaded, instead of right when it's considered loaded.

We're calling Chrome Headless from our NodeJS application like so:

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

We know that there are possible npm libraries that can achieve this using an API from node, instead of using command line switches, but we're concerned about stability (the Chrome team likes to break all their internal APIs regularly).

TL;DR

Is there anyway to make Chrome Headless wait a few seconds after page load before taking a screenshot?

  • 3
    David Schnurr shared nodejs script that does what you want here. Run nodejs index.js --url="http://www.eff.org" --delay=5000 for 5 second delay. – Vlastimil Ovčáčík May 20 '17 at 18:23
4

I was looking for the same thing. What I found is google puppeteer. https://github.com/GoogleChrome/puppeteer

There are lots of examples, but basically you can do what I did.

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

})();
1

As Vlastimil Ovčáčík states, David Schnurr has written and shared a nodeJS script for this exact purpose over on Medium.

The script should be plug and play, minus some dependencies.

Setup is as such:

  1. Clone the Git respository.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Install dependencies:
    npm install chrome-remote-interface minimist
  3. Run the 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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.