Як зробити скріншот сторінки N секунд після завантаження сторінки з Chrome Headless?

15

Я хочу зробити скріншот сторінки з Chrome Headless, і ми побачили обидва --screenshot і --virtual-time-budget перемикає знімок екрана та обмежує час очікування завантаження браузера.

У мене є елементи на сторінці, які чекають, поки DOMContentLoaded буде візуалізувати, і ми хочемо захопити їх.

Я шукаю спосіб зробити знімок, скажімо, 5 секунд після сторінка завантажена, а не права, коли вона вважається завантаженою.

Ми називаємо Chrome Headless з нашої програми NodeJS так:

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

Ми знаємо, що існують можливі бібліотеки npm, які можуть досягти цього за допомогою API з вузла, замість того, щоб використовувати перемикачі командного рядка, але ми стурбовані стабільністю (команда Chrome любить регулярно ламати всі свої внутрішні API).

TL; DR

Чи все одно, щоб Chrome Headless зачекав кілька секунд після завантаження сторінки, перш ніж робити знімок екрана?

google-chrome screenshot

— Madara Uchiha
джерело

3

Девід Шнурр поділився сценарієм nodejs, який робить те, що ви хочете тут . Запустити nodejs index.js --url="http://www.eff.org" --delay=5000 протягом 5 секунд затримки.

— Vlastimil Ovčáčík

4

Я шукав те ж саме. Я знайшов google кукольник. https://github.com/GoogleChrome/puppeteer

Є багато прикладів, але в основному ви можете робити те, що я робив.

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
джерело

1

Як Властиміл Овчачик Девід Шнурр написав і поділився сценарієм nodeJS для цієї точної мети Середній .

Сценарій повинен бути plug and play, за винятком деяких залежностей.

Налаштування:

Клонування сховища Git.
git clone https://github.com/schnerd/chrome-headless-screenshots.git
Встановити залежності:
npm install chrome-remote-interface minimist
Запустіть сценарій
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

— var firstName
джерело