[Puppeteer] evaluate() 함수에 변수 전달하기

참고 : https://code-examples.net/ko/q/2bf409f

■ evaluate( ) 함수에 변수 전달하기

이전 [Puppeteer] 퍼펫티어를 이용한 CRAWLING 작업 포스팅에서

티스토리 로그인을 하는 예제를 조금 수정하여 작업을 진행한다.

해당 포스팅에서는 자바스크립트의 코드를 사용 할 수 있게 해주는

evaluate( ) 함수가 존재하고,

해당 evaluate( ) 함수에 변수값을 사용하는데 있어 아래와 같이 사용 한 경우 에러가 발생하였다.

puppeteer_evaluate.js

const puppeteer = require("puppeteer"); // 사용시 인위적인 딜레이를 주기위한 함수 function delay( timeout ) { return new Promise(( resolve ) => { setTimeout( resolve, timeout ); }); } puppeteer.launch( { headless : true } ).then(async browser => { const page = await browser.newPage(); await page.goto( "http://magic.wickedmiso.com/manage/", { waitUntil : "networkidle2" } ); let magicId = "tistoryId";      // 티스토리 아이디 let magicPw = "tistoryPw";    // 티스토리 패스워드 await page.evaluate(() => {         document.getElementById( "loginId" ).value = magicId;         document.getElementById( "loginPw" ).value = magicPw; }); await delay(3000);         // 로그인 SUBMIT 기능 const elementHandle = await page.waitFor( "input" ); await elementHandle.press( "Enter" ); await delay(5000);         /* 로그인이후 방문 기록 데이터를 콘솔에 띄워본다. */ const emToDay = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(1) > dd" );         const txtToDay = await page.evaluate( emToDay => emToDay.textContent, emToDay );         console.log("-. 오늘 방문자 수", txtToDay);      const emYesterDay = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(2) > dd" );         const txtYesterDay = await page.evaluate( emYesterDay => emYesterDay.textContent, emYesterDay );         console.log("-. 어제 방문자 수", txtYesterDay); const emCumulativ = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(3) > dd" );         const txtCumulativ = await page.evaluate( emCumulativ => emCumulativ.textContent, emCumulativ );         console.log("-. 누적 방문자 수", txtCumulativ); });

# 에러 출력

evaluate( ) 함수 이기 때문에 해당 함수내에 값을 전달할려면

다른 함수들과 마찬가지로 전달할 값을 오버라이딩 해서 매개변수값을 전달해 주어야 한다.

puppeteer_evaluate.js

const puppeteer = require("puppeteer"); // 사용시 인위적인 딜레이를 주기위한 함수 function delay( timeout ) { return new Promise(( resolve ) => { setTimeout( resolve, timeout ); }); } puppeteer.launch( { headless : false } ).then(async browser => { const page = await browser.newPage(); await page.goto( "http://magic.wickedmiso.com/manage/", { waitUntil : "networkidle2" } ); let magicId = "tistoryId";      // 티스토리 아이디 let magicPw = "tistoryPw";    // 티스토리 패스워드                 // 함수내에 매개변수를 지정해준다.      await page.evaluate(( { magicId, magicPw } ) => {         document.getElementById( "loginId" ).value = magicId;         document.getElementById( "loginPw" ).value = magicPw; // document.getElementsByClassName( "btn_login" ).disabled = false; }, { magicId, magicPw } ); await delay(3000);         // 로그인 SUBMIT 기능 const elementHandle = await page.waitFor( "input" ); await elementHandle.press( "Enter" ); await delay(5000);         /* 로그인이후 방문 기록 데이터를 콘솔에 띄워본다. */ const emToDay = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(1) > dd" );         const txtToDay = await page.evaluate( emToDay => emToDay.textContent, emToDay );         console.log("-. 오늘 방문자 수", txtToDay);      const emYesterDay = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(2) > dd" );         const txtYesterDay = await page.evaluate( emYesterDay => emYesterDay.textContent, emYesterDay );         console.log("-. 어제 방문자 수", txtYesterDay); const emCumulativ = await page.waitFor( "div.box_blog > dl.count_visitor:nth-child(3) > dd" );         const txtCumulativ = await page.evaluate( emCumulativ => emCumulativ.textContent, emCumulativ );         console.log("-. 누적 방문자 수", txtCumulativ); });

위 코드를 실행시켜보면.

이제 위와 같은 에러가 나타나지 않는것을 확인 할 수 있다.

출력결과는 아래와 같다.

# 실행 결과

다시한번 evaluate( )는 함수임을 기억하자.

---

# 참고

티스토리의 아이디, 패스워드 입력창의 경우

키보드 입력으로 판단되지 않았기 때문에.

로그인 버튼이 활성화 되지 않은 것을 확인 되었다.

이때는 Puppeteer의 키보드 입력과 같은 이벤트를 발생시켜서 처리할 수 있게끔 작업을 진행해 주어야 한다.