Como tirar uma captura de tela de uma página N segundos após o carregamento da página com o Chrome Headless?

16

Quero fazer uma captura de tela de uma página com o Chrome Headless, e vimos --screenshotas --virtual-time-budgetopções e as opções para tirar uma captura de tela e limitar o tempo de carregamento do navegador.

No entanto, tenho elementos na página que aguardam a renderização de DOMContentLoaded e também queremos capturá-los.

Estou procurando uma maneira de tirar uma captura de tela, digamos, 5 segundos depois que a página é carregada, e não exatamente quando é considerada carregada.

Estamos chamando o Chrome Headless de nosso aplicativo NodeJS da seguinte forma:

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

Sabemos que existem possíveis bibliotecas npm que podem conseguir isso usando uma API do nó, em vez de usar opções de linha de comando, mas estamos preocupados com a estabilidade (a equipe do Chrome gosta de quebrar todas as APIs internas regularmente).

TL; DR

Existe alguma maneira de fazer o Chrome Headless esperar alguns segundos após o carregamento da página antes de fazer uma captura de tela?

google-chrome screenshot Madara Uchiha
fonte
3
David Schnurr compartilhou o script nodejs que faz o que você deseja aqui . Corra nodejs index.js --url="http://www.eff.org" --delay=5000por 5 segundos de atraso.
Vlastimil Ovčáčík

Respostas:

6

Eu estava procurando a mesma coisa. O que eu encontrei é o marionetista do google. https://github.com/GoogleChrome/puppeteer

Existem muitos exemplos, mas basicamente você pode fazer o que eu fiz.

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
fonte
Mar 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead
4253wyerg4e
2

Como afirma Vlastimil Ovčáčík , David Schnurr escreveu e compartilhou um script nodeJS para esse objetivo exato no Medium .

O script deve ser plug and play, menos algumas dependências.

A instalação é a seguinte:

  1. Clone o repositório Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Instale dependências:
    npm install chrome-remote-interface minimist
  3. Execute o 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
fonte