PhantomJS  Is a WebKit-based server-side JavaScript API. It fully supports the web without browser support. It is fast and natively supports various Web standards. DOM processing, CSS selector, JSON, Canvas, and SVG. Phantom JS can be used to Page Automation ， Network monitoring ， Webpage screenshots And Interface-free testing And so on.

I. installation

Installation package download address: http://phantomjs.org/download.html Including Windows ，Mac OS, Linux version, you can download and decompress the corresponding version by yourself (for easy use, you can set environment variables for phantomjs), which has an example folder, which contains a lot of written code for use. This article assumes that phantomjs has been installed and environment variables have been set.

Two, 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

Output: Hello, world!

The first line prints out the string at the terminal, and the second line phantom.exit exits.  
It is very important to call phantom.exit in this script, otherwise Phantom JS will never stop at all.

Script parameters - Script Arguments

How do Phantomjs pass parameters? As follows:

phantomjs examples/arguments.js foo bar baz

Among them, foo, bar and Baz are the parameters to be transferred. How to obtain 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

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

The following script takes the simplest use of the sample page object, which loads example.com and saves it as a picture, example.png.

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

Because of this feature, Phantom JS can be used. Webpage screenshots Intercept snapshots of some content, such as saving web pages, SVG into pictures, PDF, etc. This function is very powerful.

Next, the 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 the script on the command line:

phantomjs loadspeed.js http://www.google.com

It outputs something like the following:

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

Code Operations - Code Evaluation

To compute JavaScript or CoffeeScript in the context of a Web page, use the evaluation () method. The code runs in a "sandbox" and has no way to read any JavaScript objects and variables outside the context of the page it belongs to. Evaluation () returns an object, but it is limited to simple objects and cannot contain methods or closures.

Here's an example to show the page title:

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

DOM Operation - DOM Manipulation

Because scripts are like running on a Web browser, standard DOM scripts and CSS selectors work well. This makes Phantom JS suitable for supporting a variety of Page Automation Tasks .

The following useragent.js reads the textContent attribute of the element whose id is 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 the user agent.

Using JQuery and other class 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

When a page requests a resource from a remote server, both requests and responses can be tracked through onResourceRequested and onResourceReceived callbacks. Example netlog.js :

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

PhantomJs: http://phantomjs.org/

GitHub: https://github.com/ariya/phantomjs/wiki/Quick-Start