PhantomJS Quick Start Tutorial (Server-side JavaScript API WebKit)_javascript skills

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

PhantomJs official website: http://phantomjs.org/
GitHub:https://github.com/ariya/phantomjs/wiki/Quick-Start

1. Installation

Installation package download address: http://phantomjs.org/download.html, including Windows, Mac OS, and Linux versions. You can choose the corresponding version to download and decompress (for convenience, you can Set environment variables for phantomjs), which has an example folder with 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:

console.log('Hello, world!');
phantom.exit();

Save the file as hello.js and execute it:

phantomjs hello.js

The output result is: Hello, world!

The first line will print out the string in the terminal, and the second line phantom.exit will exit the operation.
It is very important to call phantom.exit in this script, otherwise PhantomJS will not stop at all.

Script Arguments – Script Arguments

How to pass parameters in Phantomjs? As shown below:

Copy code The code is as follows:

phantomjs examples/arguments.js foo bar baz

Foo, bar, baz are the parameters to be passed. How to get them:

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

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 uses the example page object in its simplest form. It loads example.com and saves it as an image, example.png .

var page = require('webpage').create();
page.open('http://example.com', function () {
 page.render('example.png');
 phantom.exit();
});

Due to this feature of it, PhantomJS can be used to take screenshots of web pages and take snapshots of some content, such as saving web pages and SVGs as images, PDFs, etc. This function is awesome.

The next loadspeed.js 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 (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();
});

Run this script from the command line:

phantomjs loadspeed.js http://www.google.com
It outputs something like:

Loading http://www.google.com Loading time 719 msec

Code Evaluation – Code Evaluation

To evaluate JavaScript or CoffeeScript in the context of a web page, use the evaluate() method. The code runs in a "sandbox" and has no way of reading 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.

Here is an example to display the page title:

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

Any console information from the web page and including code from 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();
page.onConsoleMessage = function (msg) {
 console.log('Page title is ' + msg);
};
page.open(url, function (status) {
 page.evaluate(function () {
  console.log(document.title);
 });
});

DOM Manipulation – DOM Manipulation

Since the script runs as if it were a web browser, standard DOM scripts and CSS selectors work fine. This makes PhantomJS suitable for supporting a variety of page automation tasks.

The following useragent.js will read the textContent attribute of the element with the id myagent:

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

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

Use JQuery and other libraries:

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

Network requests and responses – Network Requests and Responses

When a page requests a resource from a remote server, both the request and the response can be tracked through the onResourceRequested and onResourceReceived callback methods. Example 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);

For more information on how to use this feature for HAR output and YSlow-based performance analysis, please refer to the Network Monitoring Page .