PhantomJS 빠른 시작 튜토리얼(서버 측 JavaScript API WebKit)_javascript 기술

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에서 매개변수를 전달하는 방법은 무엇입니까? 아래와 같이:

코드 복사 코드는 다음과 같습니다.

phantomjs 예제/arguments.js foo bar baz

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);

HAR 출력 및 YSlow 기반 성능 분석에 이 기능을 사용하는 방법에 대한 자세한 내용은

네트워크 모니터링 페이지를 참조하세요.