[Puppeteer] 페이지 클릭 및 입력 이벤트[Puppeteer] 페이지 클릭 및 입력 이벤트

Posted at 2019. 5. 10. 18:31 | Posted in Node.js/Puppeteer





■ 페이지의 특정 영역 클릭 이벤트




퍼펫티어에서 클릭 이벤트는 해당 앨리먼트를 셀렉터 값을 설정하고 click( ) 메서드로 실행시키기만 하면 된다.



# 소스 코드

 tommorrow_weather.js

const puppeteer = require( "puppeteer" );


puppeteer.launch({

headless : false

}).then(async browser => {


const page = await browser.newPage();

await page.goto( "https://weather.naver.com/", { waitUntil : "networkidle2" } );


page.waitForNavigation( ), // 해당 페이지의 탐색이 완료되면 클릭 이벤트를 실행

page.click( "div.weather_info > div.w_map > ul.tab > li:nth-child(4) > a" ); // 클릭이벤트를 실행

});




# 출력 결과

 $ node tomorrow_weather.js 









■ 페이지의 특정 영역에 값 입력 하기




#01. input 박스에 값 입력하기



위 예제에서는 click( 앨리먼트 ) 를 지정하여 손쉽게 클릭 이벤트를 진행 할 수 있었다.


입력도 이와 마찬기자로 type( ) 메서드에 앨리먼트의 셀렉터 주소와 입력 값을 지정해 주는것으로 손쉽게 진행할 수 있다.




# 소스 코드

 twitter_login.js

const puppeteer = require( "puppeteer" );


puppeteer.launch({

headless : false

}).then(async browser => {


const page = await browser.newPage();

await page.goto("https://twitter.com/login?lang=ko", { waitUntil : "networkidle2" } );

// 트위터 아이디 값 입력

await page.type( "div.clearfix:nth-child(2) > input", "트위터 아이디" );

// 트위터 패스워드 패스워드 값 입력

await page.type( "div.clearfix:nth-child(3)> input", "트위터 패스워드" );

// 트위터 로그인 버튼 클릭

await page.click( "button.submit" );

});




# 출력 결과

 $ node twitter_login.js







#02. 키보드로 직접 입력하는것과 같은 이벤트


이전에 page.type(엘리먼트, 입력값)과 같은 형태로 input 타입에 값을 입력 할 수 있었다.


그렇지만 직접 키보드를 입력해야 하는 것과 같은 자연스러운 입력이 필요한 경우가 존재하기에 추가적으로 작업을 더 해보려고 한다.



# 소스 코드

 facebook_login.js

const puppeteer = require( "puppeteer" );


puppeteer.launch({

headless : false

}).then(async browser => {


const page = await browser.newPage();

await page.goto( "https://www.facebook.com/", { waitUntil : "networkidle2" } );

// 페이지가 전부 로드된 이후 작업 실행

await page.waitForNavigation( );

// 페이스북 이메일 입력 부분 클릭

await page.click( "input#email" );

// 페이스북 아이디를 키보드로 입력한다.

await page.keyboard.type( "페이스북 이메일 주소" );

// TAB 버튼을 클릭하여 바로 옆에있는 패스워드 입력 영역으로 커서를 이동시킨다.

await page.keyboard.press( "Tab" );

// 페이스북 패스워드를 키보드로 입력한다.

// 이때 자연스러운 입력을 버튼을 하나씩 입력할때마다  DELAY를 통한 시간차가 있게끔 설정한다.

await page.keyboard.type( "페이스북 패스워드", { delay : 100 } ); // 시간은 밀리세컨드(ms) 단위로 계산된다.

// TAB 버튼을 클릭하여 좌측에 존재하는 로그인 버튼이 선택되게 한다.

await page.keyboard.press( "Tab" );

// ENTER 키를 클릭하여 로그인한다.

await page.keyboard.press( "Enter" );

});





# 출력 결과

 $ node facebook_login.js






위와같이 트위터와 페이스북에 손쉽게 로그인 할 수 있었다.


그렇지만 보안이 중요한 사이트의 경우 키보드의 물리 입력을 감지하거나 하는 형식으로


작업을 진행하는 경우가 존재하는데, 이 경우 위와같은 입력 및 클릭방법은 전혀 도움이 되지 못한다.


그러한 경우는 아래 글을 참고하자.








■ 키보드 보안을 우회하기 위한 방법




원문 : https://2cpu.co.kr/bbs/board.php?bo_table=QnA&wr_id=591362












Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기