Làm cách nào để chụp ảnh màn hình của trang N giây sau khi trang được tải bằng Chrome Headless?

16

Tôi muốn tạo ảnh chụp màn hình của một trang bằng Chrome Headless và chúng tôi đã thấy cả công tắc --screenshotvà công --virtual-time-budgettắc để chụp ảnh màn hình và giới hạn thời gian chờ của trình duyệt.

Tôi có các yếu tố trên trang tuy nhiên phải chờ DOMContentLoaded kết xuất và chúng tôi cũng muốn nắm bắt các yếu tố đó.

Tôi đang tìm cách chụp ảnh màn hình, giả sử, 5 giây sau khi trang được tải, thay vì đúng khi nó được xem là đã tải.

Chúng tôi đang gọi Chrome Headless từ ứng dụng NodeJS của chúng tôi như vậy:

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

Chúng tôi biết rằng có những thư viện npm có thể đạt được điều này bằng cách sử dụng API từ nút, thay vì sử dụng các công tắc dòng lệnh, nhưng chúng tôi lo ngại về tính ổn định (nhóm Chrome thích thường xuyên phá vỡ tất cả các API nội bộ của họ).

TL; DR

Có cách nào để khiến Chrome Headless đợi vài giây sau khi tải trang trước khi chụp ảnh màn hình không?

google-chrome screenshot

— tên nhân vật của người ta đó
nguồn

3

David Schnurr đã chia sẻ kịch bản nodejs thực hiện những gì bạn muốn ở đây . Chạy nodejs index.js --url="http://www.eff.org" --delay=5000chậm 5 giây.

— Vlastimil Ovčáčík

6

Tôi đã tìm kiếm điều tương tự. Những gì tôi tìm thấy là google con rối. https://github.com/GoogleChrom/puppeteer

Có rất nhiều ví dụ, nhưng về cơ bản bạn có thể làm những gì tôi đã làm.

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
nguồn

Tháng 3 năm 2019:UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead

— 4253wyerg4e

2

Như Vlastimil Ovčáčík tuyên bố, David Schnurr đã viết và chia sẻ một tập lệnh nodeJS cho mục đích chính xác này trên Phương tiện .

Kịch bản nên được cắm và phát, trừ một số phụ thuộc.

Thiết lập là như vậy:

Nhân bản kho lưu trữ Git.
git clone https://github.com/schnerd/chrome-headless-screenshots.git
Cài đặt phụ thuộc:
npm install chrome-remote-interface minimist
Chạy kịch bản
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 FirstName
nguồn