Sayfanın ekran görüntüsü nasıl alınır? Sayfa Chrome Headless ile yüklendikten birkaç saniye sonra?

15

Bir sayfanın Chrome Headless ile ekran görüntüsünü oluşturmak istiyorum ve ekran görüntüsünü almanın ve tarayıcının yükleme süresini beklemesinin sınırlandırılması için hem anahtarları hem --screenshotde --virtual-time-budgetanahtarları gördük .

Ancak sayfada DOMContentLoaded öğesinin oluşturulmasını bekleyecek öğelere sahibim ve bunları da yakalamak istiyoruz.

Sayfa yüklendikten 5 saniye sonra , yüklendiği düşünüldüğünde , ekran görüntüsünü almanın bir yolunu arıyorum .

Şu şekilde NodeJS uygulamamızdan Chrome Headless'ı arıyoruz:

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

Komut satırı anahtarları kullanmak yerine, düğümden bir API kullanarak bunu başarabilecek npm kitaplıkları olduğunu biliyoruz, ancak istikrar konusunda endişeliyiz (Chrome ekibi tüm dahili API'lerini düzenli olarak bozmayı sever).

TL; DR

Chrome Headless'ın ekran görüntüsünü almadan önce sayfa yüklendikten birkaç saniye sonra beklemesini sağlamak için yine de var mı?

google-chrome screenshot

— Madara Uchiha
kaynak

3

David Schnurr, burada istediğinizi yapan nodejs betiğini paylaştı . nodejs index.js --url="http://www.eff.org" --delay=50005 saniye gecikme için çalıştırın .

— Vlastimil Ovčáčík

6

Ben de aynı şeyi arıyordum. Bulduğum şey google puppeteer. https://github.com/GoogleChrome/puppeteer

Çok fazla örnek var, fakat temelde yaptığım şeyi yapabilirsiniz.

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
kaynak

Mar 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead

— 4253wyerg4e

1

As Vlastimil Ovčáčík devletler David Schnurr yazılı ve bu kesin bir amaç üzerinde bir nodeJS senaryoyu paylaştı Orta .

Betik tak ve çalıştır olmalı, eksi bazı bağımlılıklar.

Kurulum böyle:

Git posta klonunu kopyala.
git clone https://github.com/schnerd/chrome-headless-screenshots.git
Bağımlılıkları yükle:
npm install chrome-remote-interface minimist
Komut dosyasını çalıştırın
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

— var firstName
kaynak