[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

Active X 및 해킹보안 관련 프로그램이 설치되는 사이트에서 사용할 시스템을 하나 꾸려놓고 있습니다.

외부에서도 사용가능하게 원격접속도 가능하도록 하고 있습니다.

그렇게 사용중에 한가지 문제가 발생했습니다.

몇몇 사이트의 경우( 인터넷 등기소 등..) 하드웨어 키보드가 아닌 경우 키보드 입력을 막도록 처리되어 있어서

VNC혹은 RDC등의 원격솔루션으로 접속하면 키보드 입력을 할 수 없습니다.

이런 상황에서는 일반적인 가상키보드도 작동을 하지 않습니다.

이런 상황에서 사용할 수 있는 방법을 여러가지 알아보았습니다.

1. 하드웨어단에서 원격지원을 할 수 있는 컴퓨터 사용( iLO, iDRAC, iRMC, vPro, iKVM ... )

2. 네트워크를 통해서 키보드 입력을 받아 USB 키보드를 흉내내는 하드웨어(이후 설명)

3. USB over IP를 지원하는 소프트웨어 혹은 하드웨어 사용(이후 다시 구분설명).

4. USB HID 드라이버를 설치하는 가상키보드 설치(문제가 있어 사용이 안됨)

1번 방법의 경우 가장 비용이 많이 들지만 편의성은 가장 좋은(일부의 경우) 방법입니다.

iLO advanced라면 뭐 웹 브라우져로 접속해서 사용 가능할테니 편의성에서 압도적이라고 생각됩니다.

2cpu.com을 찾다보니 일반 PC에도 연결할 수 있는 Lantronix Spider, Spider Duo가 있던데 일단 가격에 보류했습니다.

제 경우에는 vPro를 통해서 접속이 가능한데 아쉬운 점이라면 사용을 하기 위한 접속 프로그램이 플랫폼을 가린다는 점입니다.(윈도우 전용)

2번 방법은 라즈베리파이 제로계열 혹은 아두이노를 통하면 USB Gadget 모드로 USB 키보드가 연결 된 것으로 흉내낼 수 있습니다. 

이렇게 하면 네트워크로 연결된 라즈베리파이에 입력할 키보드문자를 알려주고 해당 문자를 에뮬레이트 한 USB 키보드에 보내주면 작동됩니다. 

가격은 저렴한데 원격으로 접속하고 이를 처리할 프로그램을 잘 만들어놓은게 있는지 모르겠습니다.

3번 방법은 USB over IP 라고 검색하면 여러가지 나오고 실제 2cpu에서도 검색이 되는 방법입니다.

다시 이 방법을 나누면 하드웨어적인 방법과 소프트웨어적인 방법이 있는데요.

하드웨어적인 방법은 IP network를 통해 USB 포트를 연장하는 방식입니다. AnywhereUSB 같은 것들이 있습니다. 일단 가격부담으로 패스.

소프트웨어적인 방법은 하드웨어적인 방법과 논리적으로는 같은데요 한쪽 컴퓨터 USB 장치를 네트워크를 통해 다른쪽 컴퓨터의 USB 장치로 보이게끔 하는 겁니다. USB/IP로 검색하면 오픈소스 프로젝트가 있고 이걸 잘 꾸민 VirtualHere, FlexiHub, USB Redirector 같은 부류의 소프트웨어가 많이 있습니다. 

장점으로는 USB를 그대로 인식시키는 것이라서 가령 공인인증서를 보관하는 보안토큰도 이를 통하면 네트워크를 넘어서 인식시키고 사용하는 것이 가능합니다.

단점으로는 내가 접속할 클라이언트에 USB공유를 위한 서버프로그램을 관리자 권한으로 실행해 줘야만 합니다.

4번 방법인 소프트웨어로는 가상키보드가 있는데요 우연히 알게되었으나 가상키보드 중 USB HID 드라이버를 설치하고 작동하는 가상키보드가 있다는 사실을 알았습니다. 

볼트 가상키보드 라는 것인데 설치를 하면 실제 USB 키보드 드라이버도 설치를 합니다.

한가지 문제점은 이 프로그램이 관리자권한으로 작동해서 원격접속을 한 상황(VNC, RDC)에서는 화면에 뜬 가상키보드 키를 클릭해도 클릭인식을 못해서 실제 키보드 입력을 할 수 없었습니다. 이건 개발사에 문의를 하면 수정가능할지 모르겠네요. 결국 이렇게되면 제가 겪었던 물리적 키보드 인식 불가와 거의 동일한 상황입니다.