PhantomJS Quick Start Tutorial (WebKit for the server-side JavaScript API)

PhantomJS is a server-side JavaScript API based on WebKit. It fully supports the web without browser support, and it is fast and natively supports a variety of web standards: DOM processing, CSS selector, JSON, Canvas, and SVG. PhantomJS can be used for page automation, network monitoring, web screenshots, and interfaceless testing.

PhantomJs official website:/
GitHub:/ariya/phantomjs/wiki/Quick-Start

1. Installation

Installation package download address:/, including Windows, Mac OS, and Linux versions, select the corresponding version and download and decompress (for convenience, you can set environment variables for phantomjs yourself), which comes with an example folder, which contains a lot of already written code for use. This article assumes that phantomjs has been installed and environment variables have been set.

2. Use

Hello， World！

Create a new text file containing the following two lines of script:

('Hello, world!');
();

Save the file as , and execute it:

phantomjs

The output result is: Hello, world!

The first line will print out the string in the terminal, and the second line will exit the run.
Calling in this script is very important, otherwise PhantomJS will not stop at all.

Script Arguments – Script Arguments

How to pass parameters in Phantomjs? As shown below:

Among them, foo, bar, and baz are the parameters to be passed. How to get it:

var system = require('system');
if ( === 1) {
 ('Try to pass some args when invoking this script!');
} else {
 (function (arg, i) {
   (i + ': ' + arg);
 });
}
();

It will output:

0: foo
1: bar
2: baz

Page Loading – Page Loading

By creating a web page object, a web page can be loaded, analyzed and rendered.

The following script will give the example page object the easiest usage, it loads and saves it as an image, .

var page = require('webpage').create();
('', function () {
 ('');
 ();
});

Due to its feature, PhantomJS can be used to take screenshots of web pages and take snapshots of some content, such as saving web pages, SVG into pictures, PDFs, etc. This function is very awesome.

The next script loads a special URL (don't forget the http protocol) and measures the time it takes to load the page.

var page = require('webpage').create(),
 system = require('system'),
 t, address;

if ( === 1) {
 ('Usage:  <some URL>');
 ();
}

t = ();
address = [1];
(address, function (status) {
 if (status !== 'success') {
  ('FAIL to load the address');
 } else {
  t = () - t;
  ('Loading time ' + t + ' msec');
 }
 ();
});

Run the script on the command line:

phantomjs
It outputs something like the following:

Loading Loading time 719 msec

Code Operations – Code Evaluation

To operate JavaScript or CoffeeScript in the context of a web page, use the evaluate() method. The code is run in a "sandbox" and it has no way to read any JavaScript objects and variables outside the context of the page it belongs to. evaluate() returns an object, however it is limited to simple objects and cannot contain methods or closures.

This has an example to display the page title:

var page = require('webpage').create();
(url, function (status) {
 var title = (function () {
  return ;
 });
 ('Page title is ' + title);
});

Any console information from a web page and including from the internal code of evaluate() will not be displayed by default. To override this behavior, use the onConsoleMessage callback function, the previous example can be rewritten as:

var page = require('webpage').create();
 = function (msg) {
 ('Page title is ' + msg);
};
(url, function (status) {
 (function () {
  ();
 });
});

DOM Operation – DOM Manipulation

Since the script seems to be running on a web browser, standard DOM scripts and CSS selectors work well. This makes PhantomJS suitable for supporting a variety of page automation tasks.

The following will read the textContent property of the element with id of myagent:

var page = require('webpage').create();
('The default user agent is ' + );
 = 'SpecialAgent';
('', function (status) {
 if (status !== 'success') {
  ('Unable to access network');
 } else {
  var ua = (function () {
   return ('myagent').textContent;
  });
  (ua);
 }
 ();
});

The above example also provides a way to customize user agent.

Use JQuery and other class libraries:

var page = require('webpage').create();
('', function() {
 ("/ajax/libs/jquery/1.6.1/", function() {
  (function() {
   $("button").click();
  });
  ()
 });
});

Network Requests and Responses

When requesting a page from a remote server, both the request and the response can be traced through the onResourceRequested and onResourceReceived callback methods. Example ：

var page = require('webpage').create();
 = function (request) {
 ('Request ' + (request, undefined, 4));
};
 = function (response) {
 ('Receive ' + (response, undefined, 4));
};
(url);

For more information on how to use this feature for HAR output and YSlow-based performance analysis, seeNetwork monitoring page 。