배경

※여기는 읽어 날려 주셔서 괜찮습니다.

WinActor라는 도구를 아십니까?
RPA (로봇식 프로세스 자동화) 도구로서 매우 편리한 좋은 도구 (같다)입니다.

단지, 사면 높습니다.
연간에 요시요시가 100명이나 날아가는 레벨입니다.

글쎄,이 도구이지만, 우연히 내가 속한 회사는 구입했습니다.
거기서, 어느 웹사이트의 스쿠쇼를 찍고 싶다고 하는 요망이 있어, WinActor를 사용할 수 없는가 하는 이야기가 나와 있었기 때문에 시험한 것입니다.

과연, 흠흠이라고 설명 자료를 읽으면서 생각했습니다.

"puppeteer로 좋은거야?"

물론, 이번 건에 관해서는 puppetter로 할 수 있었다고 하는 것만으로,
puppetter가 더 좋다고 할 생각은 없습니다.

WinActor 쪽이 여러가지로 할 수 있는 폭도 넓을 것 같고, 편리할 것 같은 툴이다-라고 생각했습니다.
사내에서 사용한다면, 쓰러뜨리면 좋다고 생각합니다. (구입하고 있습니다)

다만, 조사는 하지만, 실제로 사용하는 것은 당사가 아니었기 때문에,
「WinActor라는 툴을 구입해 주시면, 희망대로 스쿠쇼를 찍을 것 같아요!
라고 말하기 어렵습니다.

아니, 비용 대비 효과적으로 원을 잡을 수 있다면 좋다고 생각하고, 다른 업무로 WinActor를 쓰러뜨릴 수 있는 여지가 있다면 구입하는 것이 여러가지 행복해지는 것은 아닐까요?
이번 용도만이라면 엄격한 것이 아닐까라고 생각했다고 하는 것뿐입니다.

어쨌든, 그런 이유로, 「시험에 puppeteer라면 어떻게 될까-」라고 시험한 비망록입니다.
스쿠쇼를 찍을 때, 조사해도 확실히 발견되지 않았던 「개인적으로 알고 싶었던 것」을 실고 있습니다.

아, 덧붙여서 결론부터 말하면, puppetter로 할 수 있을 것 같았습니다.

스크린샷

우선은 보통으로 찍어 보겠습니다.
대상 경로에 대해서는 로컬 환경에 맞게 다시 작성하십시오.

export class UsePuppeteer {
    private browser: Browser;

    constructor() {

        // テスト用にheadlessにせず、動作にも遅延をかける
        puppeteer.launch( {
            headless: false,
            slowMo: 10,
            args: [ "--no-sandbox", "--disable-setuid-sandbox" ]
        } )
            .then( ( browserObj ) => {
                this.browser = browserObj;
                return this.test();
            } )
            .catch( ( err ) => {
                throw err;

    }
    async test(): Promise<any> {
        const page = await this.browser.newPage();
        await page.setViewport( {
            width: 1200,
            height: 800
        } );

        await page.goto( "https://blog.qiita.com/", { waitUntil: "domcontentloaded" } );

        await page.screenshot( {
            path: "/Users/hoge/Desktop/test.png"
        } );

        await page.close();
    }
}

찍은 화상은 이하와 같다.

주의 이후의 코드는, 보통으로 찍었을 경우의 코드로부터 변경이 있던 부분만 싣습니다. jpeg로 저장하는 방법 await page.screenshot( { path: "/Users/hoge/Desktop/test.jpg", type: "jpeg", quality: 100 }); 메모 type에서 jpeg를 지정하지 않아도, path로 지정하고 있는 보존 파일명이 jpg라면 jpg로 보존된다. quality를 지정하지 않으면 아마 80이 적용됩니다. (출력되는 파일 사이즈로 본 것만) quality는 png로 저장하려고 할 때 지정하면 오류. UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: options.quality is unsupported for the png screenshots fullPage를 true로 스쿠쇼 await page.screenshot( { path: "/Users/hoge/Desktop/test.png", fullPage: true }); 찍은 화상은 이하와 같다. 미리보기의 검사기는 다음과 같습니다.

메모

fullPage 를 true 로 했을 경우, 폭은 그대로, 높이가 가변이 된다.

PC의 화면 사이즈를 넘는 사이즈로 스쿠쇼

「상기의 fullPage로 할 수 있었기 때문에, 만약이나 최초의 width와 height의 지정을 바꾸면, 대단한 큰 스쿠쇼를 찍을 수 있는 것은?」
라는 곳에서 시작.
음, 결과는 어떻게.

        await page.setViewport( {
            width: 7680,
            height: 4320
        } );

찍은 화상은 이하와 같다.

프리뷰의 인스펙터는 이하와 같다.

메모

PC의 화면에 표시할 수 없는 사이즈에서도 스쿠쇼 할 수 있다.

특정 요소(영역)만 스쿠쇼

        // 描画領域を取得
        const rect = await page.evaluate( () => {
            const rect = document.getElementById( "masthead" ).getBoundingClientRect();
            return {
                x: rect.left,
                y: rect.top,
                width: rect.width,
                height: rect.height
            };
        } );

        await page.screenshot( {
            path: "/Users/hoge/Desktop/test.png",
            clip: rect
        } );

찍은 화상은 이하와 같다.

시도에 img 태그를 지정하지 않고 부모의 header 부분의 요소 크기에 따라 저장했습니다. 메모 특정 영역만 스쿠쇼로 저장하고 싶은 경우는 clip을 사용한다. 특정 요소의 영역을 스쿠쇼로 보존하고 싶은 경우는, getBoundingClientRect() 로 취득한 값을 이용해 어떻게 하면 쉽다.