테스트 사이트 - 개발 중인 베타 버전입니다

웹에서 불가능한것을 가능하게 하기

· 11년 전 · 1774 · 1
사용자가 보고 있는 브라우저 화면을 캡쳐해서 서버로 전송해서 확인하는 것.
네이버나 다음 메일에서 다른 컨텐츠 다 빼버리고 리스트만 골라서 로그인 없이 바로 내 웹페이지에서 볼 수 있는 것.
일반 링크가 아닌 자바스크립트 클릭만으로 나오는 DOM 부분의 원하는 내용을 긁어 와서 붙여넣는 것.
내 웹페이지에서 쓴 글을 네이버 카페, 다음 블로그 등에 동시에 올릴 수 있는 것.

위 항목은 현재 HTML5도 마찬가지로 일반적인 웹의 환경(ActiveX 제외)에서는 불가능합니다.
node.js 가 나오고 전세계의 개발자들이 그 기반하에 여러가지 오픈 모듈(npm)을 만들었는데 그 중에서
요즘 제 뒷통수를 강하게 때린 webdriverJS 모듈을 소개합니다.

사전 지식은 리눅스, 유닉스 기반하에 node.js를 어느정도 컨트롤 할 줄 알고 npm이 뭔지 알 정도면 됩니다.

Camilo Tapia란 외쿡 개발자가 만든 npm 모듈로서 기반은 node.js + Java Selenium + 자바스크립트
로 구성되어 있습니다.

브라우저 테스팅 툴인 Java Selenium이 설치가 되어 있어야 하며 리눅스나 유닉스에서는 standalone 버젼이
있으므로 걍 jar 파일만 실행 하면 됩니다. (자세한 사용법은 하단 URL 참고 )

작동 원리는 Java Selenium 서버에 node.js가 통신을 해서 Java Selenium과 연동을 통해 브라우저를 띄우고
wire protocol bindings으로 클릭, 캡쳐, submit 등등  브라우저 자체를 컨트롤 할 수 있습니다.

예를 들어 클라이언트 웹브라우저에서 자체 홈페이지에 들어오면 로딩하는 동시에 socket.io를 이용해서
클라이언트 pc의 URL을 node.js 서버로 전송하고 node.js에서는 Selenium 통해 브라우저를 실행시키고
Selenium 캡쳐 기능을 실행하면 서버에 이미지가 저장됩니다.

이 외에도 로그인 전용 페이지의 특정 영역을 가져와서 클라이언트에 보여주고 등등
webdriverJS GIT 홈페이지에 들어가셔서 지원하는 기능을 확인하시면 정말 활용할 수 있는 방법이 무궁 무진합니다.

해당 서버 소스는 네이버 자동 띄어쓰기 기능 자체를 서버로 해서 사용자 pc에서 입력한 한글을 webdriverJS 서버
에서 자동으로 브라우저가 실행되어 띄어쓰기된 결과값을 클라이언트에 리턴해주는 소스입니다.

-------------------------------------------------------------------------------------------------------
var client = require("webdriverjs").remote({desiredCapabilities:{browserName:"chrome",handlesAlerts:true}});
var now = require("now");
var express = require('express');

var app = express.createServer();
app.listen(7878);

var everyone = now.initialize(app);
client.init() ;
client.url("http://s.lab.naver.com/autospacing/");

var prContent = "";

everyone.now.callList = function(reqTxt){
client.url("http://s.lab.naver.com/autospacing/?query="+reqTxt);
client.submitForm("#search_form");
client.execute("return document.getElementsByClassName('wrap_spacing2')[0].innerHTML",function(result){everyone.now.returnPostHTML(result.value);
 });
}
-------------------------------------------------------------------------------------------------------

서버상에서 브라우저를 맘대로 컨트롤 하고 그 결과값이나 동작 입맛에 맛게 가져오는 것.. 엄청난 강점일 거 같습니다.

node.js 자체도 나름 강력한 부분이 있지만 더 큰 강점은 npm에 있나봅니다. 집단 지성의 강점
한 번 활용해 보시면 재밌습니다.

참고 URL은 https://github.com/Camme/webdriverjs 입니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

좋은 정보 감사합니다.

게시글 목록

번호 제목
26560
24588
31642
31638
31633
31630
31625
19452
6719
6718
6717
6715
27797
30907
30904
6714
6713
27791
19450
6712
6711
6709
6708
27790
19447
6706
6703
6702
6701
6697
6692
27783
6691
6687
6685
6683
6682
19446
27770
19445
27768
6681
6675
6674
19444
6672
6671
27761
6670
30900
24585
6660
6655
6653
31624
6651
31623
31621
19443
6650
31620
31619
31612
31611
27746
31605
6648
20781
31603
31600
6645
6643
6642
6640
20777
31597
6637
19442
31594
31591
31589
31586
31584
20758
19440
31575
31567
20747
6636
31563
31552
27743
24579
6630
6628
6620
6617
27732
24577
6616