ページにChromeヘッドレスが読み込まれてからN秒後にページのスクリーンショットを撮る方法は？

16

Chrome Headlessを使用してページのスクリーンショットを作成したいのですが、スクリーンショットを取得し、ブラウザーの読み込み時間を制限するため--screenshotの--virtual-time-budgetスイッチとスイッチの両方を確認しました。

ただし、ページにはDOMContentLoadedがレンダリングされるのを待つ要素があり、それらもキャプチャする必要があります。

たとえば、ページが読み込まれたと見なされるときではなく、ページが読み込まれてから 5秒後にスクリーンショットを撮る方法を探しています。

NodeJSアプリケーションからChrome Headlessを次のように呼び出しています。

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

コマンドラインスイッチを使用する代わりに、ノードからのAPIを使用してこれを実現できるnpmライブラリが存在する可能性があることはわかっていますが、安定性が心配です（Chromeチームは、すべての内部APIを定期的に破るのが好きです）。

TL; DR

とにかく、スクリーンショットを撮る前に、Chrome Headlessをページの読み込み後数秒間待機させる方法はありますか？

google-chrome screenshot

— うちはマダラ
ソース

3

David Schnurrは、ここで必要なことを行うnodejsスクリプトを共有しました。nodejs index.js --url="http://www.eff.org" --delay=50005秒の遅延で実行します。

— VlastimilOvčáčík

6

私は同じものを探していました。私が見つけたのはグーグル操り人形師です。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();

})();

— ビンネタス
ソース

2019年3月：UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead

— 4253wyerg4e

2

以下のようVlastimilOvčáčíkの状態、デビッドSchnurrが書かれており、上の上に、この正確な目的のためにnodeJSスクリプトを共有中。

スクリプトはプラグアンドプレイで、いくつかの依存関係を除いたものでなければなりません。

セットアップは次のとおりです。

Gitリポジトリを複製します。
git clone https://github.com/schnerd/chrome-headless-screenshots.git
依存関係をインストールします。
npm install chrome-remote-interface minimist
スクリプトを実行する
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
ソース