퍼펫티어 request, response ( 작성중 )퍼펫티어 request, response ( 작성중 )
Posted at 2020. 5. 29. 22:38 | Posted in Node.js/Puppeteerconsole.log(await response.url()); console.log(await response.json()); }); |
await page.on("request", request => { |
'Node.js > Puppeteer' 카테고리의 다른 글
| [Puppeteer] 퍼펫티어를 이용해 File Upload 하기 (0) | 2020.05.29 |
|---|---|
| [Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절 (0) | 2020.05.29 |
| [Puppeteer] evaluate() 페이지 데이터 추출 (0) | 2020.05.27 |
| [Puppeteer] evaluate() 함수에 변수 전달하기 (0) | 2019.09.30 |
| [Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑 (0) | 2019.06.20 |
[Puppeteer] 퍼펫티어를 이용해 File Upload 하기[Puppeteer] 퍼펫티어를 이용해 File Upload 하기
Posted at 2020. 5. 29. 21:26 | Posted in Node.js/Puppeteer■ 퍼펫티어를 이용해 파일 업로드하기
퍼펫티어를 통한 사무자동화 작업중 사이트의 파일 업로드를 해야하는 경우가 발생하였다.
문제는 헤드리스 모드( 작업화면이 사용자에게 보이지않는 ) 상황으로 완성품을 만들기위해서는.
업로드 버튼을 누르고 → 파일을 찾고 → 이미지를 업로드 하는 과정을
컴퓨터 화면을 보지 않고 진행을 해야한다는 것이다.
다행이 퍼펫티어에서는 waitForFileChooser( ) 메서드를 통해
해결할 수 있는 방법을 제공한다.
아래 코드를 통해 관련 작업을 진행해 보자.
# 소스코드 - node.js
fileUpload.php |
const puppeteer = require( "puppeteer" ); // 사용시 인위적인 딜레이를 주기위한 함수 function delay( timeout ) { return new Promise(( resolve ) => { setTimeout( resolve, timeout ); }); } puppeteer.launch({ headless : false // 헤드리스모드의 사용여부를 묻는다. , devtools : false // 개발자 모드의 사용여부를 묻는다. , slowMo : 50 // 지정된 시간(ms)만큼 Puppeteer 작업 속도를 낮춘다. }).then(async browser => { const page = await browser.newPage(); await page.goto( "http://localhost/fileUpload.php", { waitUntil : "networkidle2" } ); const [fileChooser] = await Promise.all( [ page.waitForFileChooser( ), page.click( "#upFile" ) // 파일을 올릴 input type = "file" 태그를 지정 ] ); await fileChooser.accept( [ "puppeteer.png" ] ); // 3초간딜레이를 준다. await delay( 3000 ); page.waitForNavigation( ),page.click( "#upBtn" ); // await browser.close( ); }); |
해당 포스팅은 운영중인 어느 사이트가 아닌
업로드 기능을 가진 페이지를 기준으로 테스트를 진행하려 한다.
아래 파일을 업로드할 웹 페이지를 간단히 제작하자.
# 소스코드 - PHP
fileUpload.php |
<?php echo "<pre>"; print_r( $_FILES ); echo "</pre>"; ?> <html> <head> <title>:: Puppeteer 업로드 속성 ::</title> <script type="text/javascript"> function fileUpload() { document.getElementById("upFrm").action = "./fileUpload.php"; document.getElementById("upFrm").submit(); } </script> </head> <body> <form enctype="multipart/form-data" id="upFrm" method="post"> <input type="file" id="upFile" name="upFile" accept="image/*"> <br/><br/> <input type="button" onClick="fileUpload();" id="upBtn" value="업로드"> </form> </body> </html> |
# 출력결과
그럼 위의 이미지와 같이, 지정한 이미지를 자동으로 업로드 해주는 모습을 확인 할 수 있다.
'Node.js > Puppeteer' 카테고리의 다른 글
| 퍼펫티어 request, response ( 작성중 ) (3) | 2020.05.29 |
|---|---|
| [Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절 (0) | 2020.05.29 |
| [Puppeteer] evaluate() 페이지 데이터 추출 (0) | 2020.05.27 |
| [Puppeteer] evaluate() 함수에 변수 전달하기 (0) | 2019.09.30 |
| [Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑 (0) | 2019.06.20 |
[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 |
위와같이 출력화면이 브라우저 가득 커져서 나오는 것을 확인 할 수 있다.
'Node.js > Puppeteer' 카테고리의 다른 글
| 퍼펫티어 request, response ( 작성중 ) (3) | 2020.05.29 |
|---|---|
| [Puppeteer] 퍼펫티어를 이용해 File Upload 하기 (0) | 2020.05.29 |
| [Puppeteer] evaluate() 페이지 데이터 추출 (0) | 2020.05.27 |
| [Puppeteer] evaluate() 함수에 변수 전달하기 (0) | 2019.09.30 |
| [Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑 (0) | 2019.06.20 |
[Puppeteer] evaluate() 페이지 데이터 추출[Puppeteer] evaluate() 페이지 데이터 추출
Posted at 2020. 5. 27. 13:54 | Posted in Node.js/Puppeteer■ evaluate( )를 이용하여 페이지내의 데이터 가져오기
티스토리 블로그에 로그인을 하려면
로컬 스토리지의 tistoryFingerprint 값이 필요하다.
샘플로예제로 위 데이터를 가지고와 보자.
# 소스코드
evaluate_get.js |
const puppeteer = require("puppeteer"); // 사용시 인위적인 딜레이를 주기위한 함수 function delay( timeout ) { return new Promise(( resolve ) => { setTimeout( resolve, timeout ); }); } puppeteer.launch({ headless : false // 헤드리스모드의 사용여부를 묻는다. , devtools : true // 개발자 모드의 사용여부를 묻는다. }).then(async browser => { const page = await browser.newPage(); await page.goto( "https://www.tistory.com/auth/login", { waitUntil : "networkidle2" } ); await page.setRequestInterception(true); const pageGetData = await page.evaluate(() => { const jsonData = { "fingerPrint" : localStorage.getItem( "tistoryFingerprint" ) }; return jsonData; }); console.log( pageGetData.fingerPrint ); }); |
이제 실행해보면 tistoryFingerprint값을 가져올 수 있는 모습을 확인 할 수 있다.
# 출력결과
$ node evaluate_get.js |
'Node.js > Puppeteer' 카테고리의 다른 글
| [Puppeteer] 퍼펫티어를 이용해 File Upload 하기 (0) | 2020.05.29 |
|---|---|
| [Puppeteer] 퍼펫티어 setViewport()를 사용한 창 크기 조절 (0) | 2020.05.29 |
| [Puppeteer] evaluate() 함수에 변수 전달하기 (0) | 2019.09.30 |
| [Puppeteer] Cheerio 모듈을 활용한 데이터 스크랩핑 (0) | 2019.06.20 |
| [Puppeteer] 페이지 클릭 및 입력 이벤트 (0) | 2019.05.10 |
