페이지에 Chrome 헤드리스가로드 된 후 N 초 후에 페이지의 스크린 샷을 만드는 방법은 무엇입니까?

16

Chrome Headless를 사용하여 페이지의 스크린 샷을 만들고 싶습니다. 스크린 샷 을 찍고 브라우저의로드 대기 시간을 제한하는 스위치 --screenshot와 --virtual-time-budget스위치를 모두 확인했습니다 .

그러나 페이지에 DOMContentLoaded가 렌더링 될 때까지 기다리는 요소가 있으며 그 요소도 캡처하려고합니다.

페이지가로드 된 후 바로로드되는 대신 페이지가로드 된 후 5 초 동안 스크린 샷을 찍는 방법을 찾고 있습니다 .

NodeJS 애플리케이션에서 다음과 같이 Chrome Headless를 호출합니다.

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

명령 줄 스위치를 사용하는 대신 노드에서 API를 사용하여이 작업을 수행 할 수있는 npm 라이브러리가 있지만 안정성에 대해 우려하고 있습니다 (Chrome 팀은 모든 내부 API를 정기적으로 중단하는 것을 좋아합니다).

TL; DR

어쨌든 페이지를로드 한 후 몇 초 후에 Chrome 헤드리스를 기다려 스크린 샷을 만들 수 있습니까?

google-chrome screenshot

— 마다 라의 유령
소스

3

David Schnurr는 여기서 원하는 것을 수행하는 nodejs 스크립트를 공유했습니다 . nodejs index.js --url="http://www.eff.org" --delay=50005 초 동안 실행 합니다.

— Vlastimil Ovčáčík

6

나는 똑같은 것을 찾고 있었다. 내가 찾은 것은 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();

})();

— 빈트 네타 스
소스

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

— 4253wyerg4e

2

으로 일러스트 Vlastimil Ovčáčík의 상태, 데이비드 Schnurr이 작성했습니다과에 이상이 정확한 목적을 위해 nodeJS 스크립트를 공유 매체 .

스크립트는 플러그 앤 플레이 방식으로 일부 종속성을 뺀 것이어야합니다.

설정은 다음과 같습니다.

Git 리포지토리를 복제하십시오.
git clone https://github.com/schnerd/chrome-headless-screenshots.git
종속성을 설치하십시오.
npm install chrome-remote-interface minimist
스크립트를 실행
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
소스