[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절[Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절

Posted at 2020. 5. 29. 15:23 | Posted in Node.js/Puppeteer




■ 퍼펫티어 창 크기 조절하기





퍼펫티어를 이용한 작업을 진행하다 보면


화면에 표시되는 영역의 크기가 작아서 답답한 경우가 발생한다.






브라우저의 크기를 아무리 늘려도 출력되는 페이지의 크기는 변화가 없다.


실제 서비스하는경우는 headless : true로 설정하여 보이지 않게 하고 작업을 진행하겠지만.


서비스 개발중에는 종종 답답한 경우가 발생한다. 


setViewport( ) 설정을 통해 이런 답답한 점을 해결해보자.




# 소스코드

 puppeteer.viewport.js

const puppeteer = require("puppeteer");


puppeteer.launch({

      headless : false // 헤드리스모드의 사용여부를 묻는다.

    , devtools : false // 개발자 모드의 사용여부를 묻는다.

    , slowMo : 0            // 지정된 시간(ms)까지 Puppeteer 작업속도를 느리게 한다.


}).then(async browser => {


    const page = await browser.newPage();


    await page.setViewport({

          width : 1280               // 페이지 너비

        , height : 720                // 페이지 높이

        , deviceScaleFactor : 1     // 기기 배율 요소를 지정 DPR( Device Pixel Resolution )

        , isMobile : false            // 모바일

        , hasTouch : false           // 터치 이벤트 발생여부

        , isLandscape : false        //

    });


    await page.goto( "https://github.com/puppeteer/puppeteer/blob/master/docs/api.md", { waitUntil : "networkidle2" } );

});





# 출력 결과

 $ node puppeteer.viewport.js



위와같이 출력화면이 브라우저 가득 커져서 나오는 것을 확인 할 수 있다.








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기