Как сделать снимок страницы через N секунд после загрузки страницы с помощью Chrome Headless?

16

Я хочу , чтобы сделать скриншот страницы с Chrome безголовым, и мы видели , как --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 Призрак Мадары
источник
3
Дэвид Шнурр поделился скриптом nodejs, который делает то, что вы хотите здесь . Запустите nodejs index.js --url="http://www.eff.org" --delay=5000на 5 секунд с задержкой.
Властимил Овчачик

Ответы:

6

Я искал то же самое. То, что я нашел, это 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
источник
Март 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead
4253wyerg4e
2

Как утверждает Властимил Овчачик , Дэвид Шнурр написал и поделился сценарием nodeJS для этой конкретной цели на Medium .

Скрипт должен быть подключи и играй, за исключением некоторых зависимостей.

Настройка такова:

  1. Клонировать репозиторий Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Установить зависимости:
    npm install chrome-remote-interface minimist
  3. Запустить скрипт
    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
источник