PhantomJS와 CasperJS 사용법

프론트앤드 개발을 하거나 웹자동화에 관심이 있는 분이라면 PhantomJS와 CasperJS를 많이 들어봤을 것입니다.
저도 이번에 크롤링 공부를 하면서 알게되어 잊어버리지 않기위해 간단하게 정리를 하려고 합니다.

PhantomJS (팬텀JS)

팬텀JS는 화면이 없는 브라우저라고 보면 됩니다. 화면이 없는 브라우저를 어따가 써먹지? 라고 생각할 수도 있겠지만 웹프로그램으로 웹자동화를 개발하기에는 더없이 편리한 기능을 제공하고 있습니다. 입력상자에 값을 입력한다던가 마우스로 버튼을 클릭한다던가 특정 값을 확인한다던가 하는 일련의 작업(이벤트)들을 커맨드라인의 명령어나 javascript코드로 처리를 할 수가 있습니다.

예를들면 학교홈페이지에 로그인을 하여 공지사항 페이지로 이동하고 학생들에게만 공지한 공지사항 정보를 발췌하여 리스트에 보여주는 일련의 작업들을 PhantomJS를 통해 웹자동화로 구현하여 처리를 할 수가 있게 됩니다.

물론 이런 기능 말고도 웹 화면을 캡쳐하거나 WebApp을 테스트 하는 등.. 다양한 용도로 사용되는것이 PhantomJS 입니다.

설치

설치는 npm으로 간단하게 설치를 할 수 있습니다. 로컬에 설치를 해도 되지만 일반적으로 Global로 설치를 많이 합니다.

$ npm install -g phantomjs

정상적으로 잘 설치가 되었는지 확인하기 위해서 설치버전을 검색해 봅니다.

$ phantomjs -v
2.1.1

리눅스(CentOS)를 사용한다면 한글폰트의 사용을 위해 아래의 폰트관련 패키지를 별도로 설치해 주어야 합니다.

$ sudo yum install freetype
$ sudo yum install fontconfig

CasperJS (캐스퍼JS)

CasperJS는 PhantomJS나 SlimerJS를 좀더 쉽고 편하게 사용하기 위한 기능들을 모아놓은 라이브러리라고 보시면 됩니다. 그래서 CasperJS를 사용하기 위해서는 PhantomJS나 SlimerJS가 먼저 설치가 되어 있어야 합니다.

CasperJS는 start()명령어와 run() 명령어 사이의 명령어를 순서대로 처리합니다. 다른 javascript와 마찬가지로 비동기로 처리가 기본이지만 then() 명령어를 사용하면 동기화 처리가 가능하여 위의 명령어가 끝나야지만 다음 명령어를 수행하게 됩니다.

사용에 대한 자세한 설명은 해당 CasperJS 홈페이지를 참조하시면 됩니다.

설치

CasperJS의 설치도 npm으로 간단하게 설치를 할 수 있습니다. 로컬에 설치를 해도 되지만 일반적으로 Global로 설치를 많이 합니다.

$ npm install -g casperjs

예제 프로그램

아래와 같이 몇가지 예제코드를 찾아서 공유 합니다.

CasperJS를 사용하여 Google 검색 결과 캡쳐

//CasperJS 객체 생성
var casper = require('casper').create();

// CasperJS처리 시작
casper.start();

// 화면 사이즈 설정
casper.viewport(1400, 800);

// UserAgent 설정
casper.userAgent('User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36');

// 강아지로 검색
var text = encodeURIComponent("강아지");
casper.open('https://www.google.co.kr/search?q=' + text);

// 화면 캡쳐---- (¦4)
casper.then(function(){
  this.capture('google-capture.png',{
    top:0, left:0, width: 1400, height: 800
  });
});

// 실행개시
casper.run();

페이스북에 로그인해서 이미지들 URL 가져오기

var fs = require('fs')

var casper = require('casper').create({
    pageSettings: {
        loadImages: false, // 이미지 로딩은 하지 않음
        loadPlugins: false, // 플러그인 로딩은 하지 않음
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
    }
});

//Facebook 열기
casper.start().thenOpen("https://facebook.com", function() {
    console.log("Facebook website opened");
});

//Facebook 로그인
casper.then(function(){
    console.log("해당 id와 pw로 로그인 합니다.");
    this.evaluate(function(){
        document.getElementById("email").value="your_id";
            document.getElementById("pass").value="your_password";
            document.getElementById("loginbutton").children[0].click();
    });
});

//스크린샷 찍고 페이지 저장하기
casper.then(function(){
    console.log("6초 후에 AfterLogin.png 으로 저장됩니다.");
    this.wait(6000, function(){
      this.capture('AfterLogin.png');
      fs.write("./hello.html", this.getHTML(), "w")
    });
});

//이미지 주소 받아오기
casper.then(function(){
    var images = this.evaluate(function(){
        var facebookImages = document.getElementsByTagName('img');
        var allSrc = [];
        for(var i = 0; i < facebookImages.length; i++) {
            if(facebookImages[i].height >= 100 && facebookImages[i].width >= 100)
                allSrc.push(facebookImages[i].src);
        }
        return JSON.stringify(allSrc);
    });
    console.log(images);
})

casper.run();