Wie erstelle ich einen Screenshot einer Seite N Sekunden nach dem Laden der Seite mit Chrome Headless?

16

Ich möchte mit Chrome Headless einen Screenshot von einer Seite machen. Wir haben sowohl --screenshotden --virtual-time-budgetSchalter als auch den Schalter zum Erstellen eines Screenshots und zum Begrenzen der Wartezeit des Browsers auf die Ladezeit gesehen.

Ich habe jedoch Elemente auf der Seite, die darauf warten, dass DOMContentLoaded gerendert wird, und wir möchten diese auch erfassen.

Ich suche nach einer Möglichkeit, einen Screenshot zu machen, zum Beispiel 5 Sekunden nach dem Laden der Seite, anstatt nach der richtigen, wenn sie als geladen betrachtet wird.

Wir rufen Chrome Headless aus unserer NodeJS-Anwendung folgendermaßen auf:

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

Wir wissen, dass es mögliche npm-Bibliotheken gibt, die dies mithilfe einer API von Node erreichen können, anstatt Befehlszeilenoptionen zu verwenden. Wir sind jedoch besorgt über die Stabilität (das Chrome-Team unterbricht regelmäßig alle internen APIs).

TL; DR

Gibt es eine Möglichkeit, Chrome Headless nach dem Laden der Seite einige Sekunden warten zu lassen, bevor ein Screenshot erstellt wird?

google-chrome screenshot Madara Uchiha
quelle
3
David Schnurr hat das nodejs-Skript geteilt, das das tut, was Sie hier wollen . Führen nodejs index.js --url="http://www.eff.org" --delay=5000für 5 Sekunden Verzögerung.
Vlastimil Ovčáčík

Antworten:

6

Ich habe dasselbe gesucht. Was ich gefunden habe, ist Google Puppenspieler. https://github.com/GoogleChrome/puppeteer

Es gibt viele Beispiele, aber im Grunde können Sie das tun, was ich getan habe.

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
quelle
März 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead
4253wyerg4e
2

Wie Vlastimil Ovčáčík feststellt , hat David Schnurr ein nodeJS-Skript für genau diesen Zweck auf Medium geschrieben und freigegeben .

Das Skript sollte Plug-and-Play sein, abzüglich einiger Abhängigkeiten.

Das Setup ist wie folgt:

  1. Klonen Sie das Git-Repository.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Abhängigkeiten installieren:
    npm install chrome-remote-interface minimist
  3. Führen Sie das Skript aus
    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 Vorname
quelle