How to take a screenshot of a page N seconds after page is loaded with Chrome Headless?

Question

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?

Answer 1

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

})();

Answer 2

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