Jak zrobić zrzut ekranu strony N sekund po załadowaniu strony za pomocą Chrome Headless?

16

Chcę zrobić zrzut ekranu strony z Chrome Headless i widzieliśmy zarówno przełączniki, jak --screenshoti --virtual-time-budgetprzełączniki do robienia zrzutów ekranu i ograniczania oczekiwania przeglądarki na czas ładowania.

Mam jednak na stronie elementy, które czekają na renderowanie DOMContentLoaded, i my też chcemy je przechwycić.

Szukam sposobu na zrobienie zrzutu ekranu, powiedzmy, 5 sekund po załadowaniu strony, zamiast dokładnie wtedy, gdy zostanie uznana za załadowaną.

Nazywamy Chrome Headless z naszej aplikacji NodeJS w następujący sposób:

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

Wiemy, że są możliwe biblioteki npm, które mogą to osiągnąć za pomocą interfejsu API z węzła zamiast przełączników wiersza poleceń, ale martwimy się o stabilność (zespół Chrome lubi regularnie łamać wszystkie wewnętrzne interfejsy API).

TL; DR

Czy mimo wszystko Chrome bezgłowy musi zaczekać kilka sekund po załadowaniu strony przed zrobieniem zrzutu ekranu?

google-chrome screenshot Duch Madary
źródło
3
David Schnurr udostępnił skrypt nodejs, który robi to, co chcesz tutaj . Uruchom nodejs index.js --url="http://www.eff.org" --delay=5000przez 5 sekund.
Vlastimil Ovčáčík

Odpowiedzi:

6

Szukałem tego samego. Znalazłem lalkarza Google. https://github.com/GoogleChrome/puppeteer

Istnieje wiele przykładów, ale w zasadzie możesz zrobić to, co zrobiłem.

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

Jak stwierdza Vlastimil Ovčáčík , David Schnurr napisał i udostępnił skrypt nodeJS w tym celu na Medium .

Skrypt powinien być plug and play, pomijając niektóre zależności.

Konfiguracja jest taka:

  1. Sklonuj repozytorium Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Zainstaluj zależności:
    npm install chrome-remote-interface minimist
  3. Uruchom skrypt
    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
źródło