วิธีจับภาพหน้าจอของหน้าเว็บ N วินาทีหลังจากโหลดหน้าเว็บด้วย Chrome Headless แล้ว


15

ฉันต้องการสร้างภาพหน้าจอของหน้าเว็บด้วย Chrome Headless และเราเห็นทั้งสองอย่างแล้ว --screenshot และ --virtual-time-budget สลับไปที่การจับภาพหน้าจอและ จำกัด การรอโหลดของเบราว์เซอร์

ฉันมีองค์ประกอบบนหน้าเว็บที่รอให้ DOMContentLoaded แสดงผลและเราต้องการจับภาพเหล่านั้นด้วย

ฉันกำลังมองหาวิธีถ่ายภาพหน้าจอพูด 5 วินาที หลังจาก โหลดหน้าเว็บแทนสิทธิ์เมื่อพิจารณาว่าโหลดแล้ว

เรากำลังโทรหา Chrome Headless จากแอปพลิเคชัน NodeJS ของเราดังนี้:

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

เรารู้ว่ามีไลบรารี npm ที่เป็นไปได้ที่สามารถทำได้โดยใช้ API จากโหนดแทนที่จะใช้สวิตช์บรรทัดคำสั่ง แต่เรากังวลเกี่ยวกับความเสถียร (ทีมงาน Chrome ชอบที่จะทำลาย API ภายในทั้งหมดของพวกเขาเป็นประจำ)

TL; DR

มีวิธีใดที่จะทำให้ Chrome ไม่ต้องรอสักครู่หลังจากโหลดหน้าเว็บก่อนที่จะถ่ายภาพหน้าจอ


3
David Schnurr แบ่งปันสคริปต์ nodejs ที่ทำในสิ่งที่คุณต้องการ ที่นี่ . วิ่ง nodejs index.js --url="http://www.eff.org" --delay=5000 เป็นเวลา 5 วินาทีล่าช้า
Vlastimil Ovčáčík

คำตอบ:


4

ฉันกำลังมองหาสิ่งเดียวกัน สิ่งที่ฉันพบคือ Google puppeteer 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();

})();

1

เช่น Vlastimil Ovčáčík สหรัฐฯ David Schnurr ได้เขียนและแบ่งปันสคริปต์ 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
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.