web-dev-qa-db-ja.com

Chrome Headless？

Chromeヘッドレス）でページのスクリーンショットを作成したいのですが、両方の--screenshot そしてその --virtual-time-budgetスクリーンショットを撮り、ブラウザの読み込み時間の待機を制限するためのスイッチ。

ただし、DOMContentLoadedがレンダリングされるのを待つ要素がページにあり、それらも取得したいと考えています。

スクリーンショットを撮る方法を探しています。たとえば、5秒afterロードされたと見なされたときではなく、ページがロードされます。

次のように、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ページレスの数秒後にスクリーンショットを撮る前にヘッドレスで待機するようにする方法はありますか？

google-chromescreenshot
16
Madara's Ghost

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

})();
6
Vincnetas

VlastimilOvčáčík が述べているように、David Schnurrは Medium でこの正確な目的のためにnodeJSスクリプトを作成して共有しています。

スクリプトは、いくつかの依存関係を除いて、プラグアンドプレイである必要があります。

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

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