본문 바로가기
이것저것(독후감같은거)

PhantomJS 란? PhantomJS 설치. 그리고 quick-start (SCREEN CAPTURE , HEADLESS WEBSITE TESTING)

by 혜룐 2015. 11. 10.
phantomJS로 웹사이트 test 또는 화면캡쳐하거나 하는 품질과 관련된 일을 할수 있다.
PhantomJS ([www.phantomjs.org](http://phantomjs.org)) is a headless WebKit scriptable with JavaScript or CoffeeScript. It is used by hundreds of [developers](https://github.com/ariya/phantomjs/wiki/Buzz) and dozens of [organizations](https://github.com/ariya/phantomjs/wiki/Users) for web-related development workflow.
HEADLESS WEBSITE TESTING
SCREEN CAPTURE
PAGE AUTOMATION
NETWORK MONITORING
그럼, linux에 설치 부터 해볼까?
tar 다운로드 ->압축해제 ->압축경로확인 ->심볼릭링크설정 + path 설정 ->phantomJs 버전확인
http://phantomjs.org/download.html 다운로드 링크를 통해, 1.9.2버전을 다운로드 받는다.
1-1) wget으로 받기에, 로컬pc에 다운로드 받고, ftp를 이용해서 내가 원하는 위치에 tar를 받는다.
2) 압축해제
709 tar -xf phantomjs-1.9.2-linux-x86_64.tar.bz2
710 ls -lrt
711 cd phantomjs-1.9.2-linux-x86_64
3) 심볼릭링크 + 확인
심볼릭링크 : ln -s /test/program/phantomjs-1.9.2-linux-x86_64
/test/program/phantomjs
[root@server2-mysql-tpl-master program]# ll | grep phantom
lrwxrwxrwx 1 root root 42 Aug 1 14:25 phantomjs ->/test/program/phantomjs-1.9.2-linux-x86_64
drwxr-xr-x 4 root root 4096 Sep 7 2013 phantomjs-1.9.2-linux-x86_64
-rw-r--r-- 1 root root 13279068 Aug 1 14:22 phantomjs-1.9.2-linux-x86_64.tar.bz2
[root@iaas-dms2-mysql-tpl-master program]# /test/program/phantomjs/bin/phantomjs --version
1.9.2
4) path 설정
733 vim ~/.bash_profile 
734 source ~/.bash_profile 
[root@iaas-dms2-mysql-tpl-master program]# phantomjs --version
1.9.2
->버전이 잘 나오면 확인끝
여기까지 설치관련된 작업은 끝이다.
압축해제된 디렉터리 안에 example 디렉터리 하위에 너무나도 많은 예제들이 있다. 고민하지 말고 돌려보면 된다.
가장 처음 접근하기 쉬운건 screen.js 이다. 특정 웹사이트화면을 캡쳐 해주는 스크립인데, 제일 중요하고 기본이 되는 스크립트다.
5) 스크린샷 또는 pdf 파일에 한글폰트가 없어서 깨진다.
quick start 들어가기 전에 , 당황하지 말고 한글폰트를 /usr/share/fonts/ 에 추가하자. (ftp를 통해서 업로드 했다.)
[root@server2-mysql-tpl-master program]# cd /usr/share/fonts/
[root@server2-mysql-tpl-master fonts]# tree
.
|-- GOTHIC.TTF
|-- batang.ttc
|-- gulim.ttc
`-- window
1 directory, 3 files
C:\Windows\Fonts 중에 기본적인 (굴림, 궁서, 돋움, 고딕, 바탕 )글꼴만 추가 했다.
그럼 시작해볼까?
*
screenPrint.js
1) screenPrint.js라고 파일을 만든다.(example에 있는 스크립트를 참고 하거나, 튜토리얼에 가장 먼저 나오는 예제를 copy해도 된다.)
[root@server2-mysql-tpl-master phantom]# vim screenPrint.js 
var page = require('webpage').create();
page.open('http://www.daum.net/', function() {
page.render('/data/phantom/daumMain.png');
phantom.exit();
});
2) 실행
[root@server2-mysql-tpl-master phantom]# phantomjs screenPrint.js 
3) 확인
/data/phantom/daumMain.png 을 통해, 다음랜딩페이지가 daumMain.png 라는 이미지파일로 결과물이 만들어진것을 확인 할수 있다.
이번에는 다른 예제,
웹페이지를 호출하고 http-wathcer나 피들러를 또는 크롬등 개발자도구를 통해 네트워크를 확인하면 나오는 결과를 받아볼수도 있다.
아래 loadspeed.js는 호출한 페이지가 뜨는 시간을 msec로 받아보는 예제이다.
* loadSpeed.js

1) loadSpeed.js 스크립트를 만든다.
root@server2-mysql-tpl-master script]# vim loadSpeed.js
var page = require('webpage').create(),
system = require('system'),
t, address;
if (system.args.length === 1) {
console.log('Usage: loadspeed.js<some URL>');
phantom.exit();
} else {
//console.log('Start load-speed');
}
t = Date.now();
address = system.args[1];
page.open(address, function(status) {
if (status !== 'success') {
console.log('FAIL to load the address');
} else {
t = Date.now() - t;
console.log(address+' time ' + t + ' msec');
}
phantom.exit();
});
2) 아래처럼 test 해보자.
root@server2-mysql-tpl-master script]# phantomjs loadSpeed.js http://media.daum.net/" target="_blank">http://media.daum.net/" target="_blank">http://media.daum.net/" target="_blank">http://media.daum.net/
http://media.daum.net/" target="_blank">http://media.daum.net/" target="_blank">http://media.daum.net/" target="_blank">http://media.daum.net/ time 1030 msec
[root@server2-mysql-tpl-master script]# phantomjs loadSpeed.js http://www.daum.net" target="_blank">http://www.daum.net" target="_blank">http://www.daum.net" target="_blank">http://www.daum.net
http://www.daum.net" target="_blank">http://www.daum.net" target="_blank">http://www.daum.net" target="_blank">http://www.daum.net time 496 msec

3) 고도화 한번 해볼까?
- 웹페이지리스트를 관리 하는 websiteList.ini 파일을 두고
- loadSpeed.sh 안에서 websiteList.ini 파일을 읽어, loadSpeed.js를 실행시켜보자.
- 그러면, 여러개 링크로 test 할때 유용할것 같다.
4) websiteList.ini
[root@server2-mysql-tpl-master shell]# cat websiteList.ini 
http://www.daum.net" target="_blank">http://www.daum.net" target="_blank">http://www.daum.net" target="_blank">http://www.daum.net
http://media.daum.net/" target="_blank">http://media.daum.net/" target="_blank">http://media.daum.net/" target="_blank">http://media.daum.net/
http://blog.daum.net/

5) loadSpeed.sh
phantomJs 실행은 백그라운드로 한다.
[root@server2-mysql-tpl-master shell]# cat loadSpeed.sh
#!/bin/bash
HOME_DIR="/test/program/phantomjs"
fileLoop() {
while read line
do
#LINK=$(echo $line)
phantomExe $(echo $line)
done<./websiteList.ini
}
phantomExe(){
/test/program/phantomjs/bin/phantomjs $HOME_DIR/script/loadSpeed.js ${1}&
}
main() {
fileLoop
}
main
TODO( 14년도에 이런걸.. 해보려고 했었는데.. 결국 하지 못했군..)
- 웹페이지로딩시간을 적재하고, 평균보다 느린 경우에 screen이미지를 만들어 모니터링하게 되면 매우 유용할것 같다.
- useragent를 설정할수 있는데, 모바일웹의 경우 화면스샷과 페이지로딩으로 품질을 측정하거나 기기별 test 할때 매우 유용할거 같다.
이것도 조만간 스크립트 정리 해서 올려야딩^^