Bagaimana cara mengambil tangkapan layar halaman N detik setelah halaman dimuat dengan Chrome Headless?

16

Saya ingin membuat tangkapan layar halaman dengan Chrome Headless, dan kami telah melihat tombol --screenshotdan --virtual-time-budgetuntuk mengambil tangkapan layar dan membatasi waktu tunggu browser untuk memuat.

Namun saya memiliki elemen pada halaman yang menunggu DOMContentLoaded untuk di-render, dan kami juga ingin menangkapnya.

Saya mencari cara untuk mengambil tangkapan layar, katakanlah, 5 detik setelah halaman dimuat, alih-alih tepat ketika itu dianggap dimuat.

Kami memanggil Chrome Headless dari aplikasi NodeJS kami seperti:

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

Kami tahu bahwa ada beberapa pustaka npm yang dapat mencapai hal ini menggunakan API dari node, alih-alih menggunakan sakelar baris perintah, tetapi kami khawatir tentang stabilitas (tim Chrome suka memutus semua API internal mereka secara teratur).

TL; DR

Apakah ada cara untuk membuat Chrome Headless menunggu beberapa detik setelah pemuatan halaman sebelum mengambil tangkapan layar?

google-chrome screenshot Madara Uchiha
sumber
3
David Schnurr membagikan skrip nodejs yang melakukan apa yang Anda inginkan di sini . Jalankan nodejs index.js --url="http://www.eff.org" --delay=5000selama 5 detik penundaan.
Vlastimil Ovčáčík

Jawaban:

6

Saya mencari hal yang sama. Apa yang saya temukan adalah dalang google. https://github.com/GoogleChrome/puppeteer

Ada banyak contoh, tetapi pada dasarnya Anda dapat melakukan apa yang saya lakukan.

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

Seperti yang dinyatakan Vlastimil Ovčáčík , David Schnurr telah menulis dan berbagi skrip nodeJS untuk tujuan yang tepat ini di Medium .

Script harus plug and play, minus beberapa dependensi.

Setup adalah seperti itu:

  1. Klon tempat penyimpanan Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Instal dependensi:
    npm install chrome-remote-interface minimist
  3. Jalankan skrip
    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
v firstName
sumber