PhantomJS는 WebKit 기반의 서버측 JavaScript API입니다. 브라우저 지원 없이 웹을 완벽하게 지원하며, 빠르고 기본적으로 DOM 처리, CSS 선택기, JSON, Canvas, SVG 등 다양한 웹 표준을 지원합니다. PhantomJS는 페이지 자동화, 네트워크 모니터링, 웹 페이지 스크린샷, 인터페이스 없는 테스트 등에 사용할 수 있습니다.
PhantomJs 공식 홈페이지: http://phantomjs.org/
GitHub:https://github.com/ariya/phantomjs/wiki/빠른 시작
1. 설치
설치 패키지 다운로드 주소: http://phantomjs.org/download.html, Windows, Mac OS, Linux 버전을 포함하여 다운로드하고 압축을 풀 수 있습니다(편의상). 이미 작성된 코드가 많이 포함된 예제 폴더가 있는 phantomjs에 대한 환경 변수를 설정할 수 있습니다. 이 글에서는 phantomjs가 설치되어 있고 환경 변수가 설정되어 있다고 가정합니다.
2. 사용
안녕하세요, 월드!
다음 두 줄의 스크립트가 포함된 새 텍스트 파일을 만듭니다.
console.log('Hello, world!'); phantom.exit();
hello.js로 파일을 저장하고 실행하세요.
phantomjs hello.js
출력 결과는 다음과 같습니다: Hello, world!
첫 번째 줄은 터미널의 문자열을 인쇄하고 두 번째 줄은 phantom.exit 작업을 종료합니다.
이 스크립트에서 phantom.exit를 호출하는 것이 매우 중요합니다. 그렇지 않으면 PhantomJS가 전혀 중지되지 않습니다.
스크립트 인수 - 스크립트 인수
Phantomjs에서 매개변수를 전달하는 방법은 무엇입니까? 아래와 같이:
Foo, bar, baz는 전달되는 매개변수입니다. 가져오는 방법:
var system = require('system'); if (system.args.length === 1) { console.log('Try to pass some args when invoking this script!'); } else { system.args.forEach(function (arg, i) { console.log(i + ': ' + arg); }); } phantom.exit();
다음과 같이 출력됩니다.
0: foo
1: 바
2: 바즈
페이지 로딩 – 페이지 로딩
웹페이지 개체를 생성하면 웹페이지를 로드, 분석 및 렌더링할 수 있습니다.
다음 스크립트는 가장 간단한 형식의 예제 페이지 개체를 사용하여 example.com을 로드하고 example.png라는 이미지로 저장합니다.
var page = require('webpage').create(); page.open('http://example.com', function () { page.render('example.png'); phantom.exit(); });
이 기능으로 인해 PhantomJS를 사용하여 웹 페이지의 스크린샷을 찍고 웹 페이지 및 SVG를 이미지, PDF 등으로 저장하는 등 일부 콘텐츠의 스냅샷을 찍을 수 있습니다. 이 기능은 정말 훌륭합니다.
다음 loadspeed.js 스크립트는 특수 URL(http 프로토콜을 잊지 마세요)을 로드하고 페이지를 로드하는 데 걸리는 시간을 측정합니다.
var page = require('webpage').create(), system = require('system'), t, address; if (system.args.length === 1) { console.log('Usage: loadspeed.js <some URL>'); phantom.exit(); } 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('Loading time ' + t + ' msec'); } phantom.exit(); });
명령줄에서 다음 스크립트를 실행하세요.
phantomjs loadspeed.js http://www.google.com
다음과 같이 출력됩니다.
http://www.google.com 로딩 로딩 시간 719밀리초
코드 평가 - 코드 평가
웹페이지의 맥락에서 JavaScript 또는 CoffeeScript를 평가하려면 평가() 메서드를 사용하세요. 코드는 "샌드박스"에서 실행되며 해당 코드가 속한 페이지 컨텍스트 외부의 JavaScript 개체 및 변수를 읽을 수 있는 방법이 없습니다. 평가()는 객체를 반환하지만 단순한 객체로 제한되며 메서드나 클로저를 포함할 수 없습니다.
페이지 제목을 표시하는 예는 다음과 같습니다.
var page = require('webpage').create(); page.open(url, function (status) { var title = page.evaluate(function () { return document.title; }); console.log('Page title is ' + title); });
웹 페이지의 콘솔 정보와 평가()의 코드를 포함하는 모든 콘솔 정보는 기본적으로 표시되지 않습니다. 이 동작을 재정의하려면 onConsoleMessage 콜백 함수를 사용하세요. 이전 예제는 다음과 같이 다시 작성할 수 있습니다.
var page = require('webpage').create(); page.onConsoleMessage = function (msg) { console.log('Page title is ' + msg); }; page.open(url, function (status) { page.evaluate(function () { console.log(document.title); }); });
DOM 조작 - DOM 조작
스크립트가 웹 브라우저처럼 실행되므로 표준 DOM 스크립트와 CSS 선택기가 잘 작동합니다. 이로 인해 PhantomJS는 다양한 페이지 자동화 작업을 지원하는 데 적합합니다.다음 useragent.js는 ID가 myagent인 요소의 textContent 속성을 읽습니다.
var page = require('webpage').create(); console.log('The default user agent is ' + page.settings.userAgent); page.settings.userAgent = 'SpecialAgent'; page.open('http://www.httpuseragent.org', function (status) { if (status !== 'success') { console.log('Unable to access network'); } else { var ua = page.evaluate(function () { return document.getElementById('myagent').textContent; }); console.log(ua); } phantom.exit(); });
JQuery 및 기타 라이브러리 사용:
var page = require('webpage').create(); page.open('http://www.sample.com', function() { page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() { page.evaluate(function() { $("button").click(); }); phantom.exit() }); });
페이지가 원격 서버에 리소스를 요청하면 onResourceRequested 및 onResourceReceived 콜백 메서드를 통해 요청과 응답을 모두 추적할 수 있습니다. 예
netlog.js:
var page = require('webpage').create(); page.onResourceRequested = function (request) { console.log('Request ' + JSON.stringify(request, undefined, 4)); }; page.onResourceReceived = function (response) { console.log('Receive ' + JSON.stringify(response, undefined, 4)); }; page.open(url);
네트워크 모니터링 페이지를 참조하세요.