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?


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

Câu trả lời:


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();

})();

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:

  1. Nhân bản kho lưu trữ Git.
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. Cài đặt phụ thuộc:
    npm install chrome-remote-interface minimist
  3. 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
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.