PhantomJS quick start tutorial (WebKit for JavaScript APIs on the server side) and phantomjswebkit

PhantomJS quick start tutorial (WebKit for JavaScript APIs on the server side) and phantomjswebkit

PhantomJS is a WebKit-based server-side JavaScript API. It fully supports the web without the support of the browser. It is fast and native supports various Web standards: DOM processing, CSS selector, JSON, Canvas, and SVG. PhantomJS can be used for page automation, network monitoring, webpage screenshots, and non-interface tests.

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

I. Installation

Installation Package: http://phantomjs.org/download.html, including Windows, Mac OS, Linux version, you can choose the corresponding version to download and unzip (For ease of use, you can set environment variables for phantomjs), which contains a example folder, there are a lot of written code for use. This document assumes that phantomjs has been installed and environment variables have been set.

Ii. Use

Hello, World!

Create a text file containing the following two lines of scripts:

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

Save the file as hello. js and execute it:

Phantomjs hello. js

Output result: Hello, world!

The first line prints the string on the terminal, and the second line phantom. exit exits.
It is very important to call phantom. exit in this script. Otherwise, PhantomJS will not stop at all.

Script Parameters-Script Arguments

How does Phantomjs PASS Parameters? As follows:

Copy codeThe Code is as follows:
Phantomjs examples/arguments. js foo bar baz

Foo, bar, and baz are the parameters to be passed. How can we 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 webpage object, a webpage can be loaded, analyzed, and rendered.

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

Thanks to this feature, PhantomJS can be used to take screenshots of webpages and take snapshots of some content, such as saving webpages and SVG as images and PDF files. This feature is awesome.

The next loadspeed. js script loads a special URL (do not forget the http protocol) and measures the time when the page is loaded.

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 operation-Code Evaluation

To perform operations on JavaScript or CoffeeScript in the context of a webpage, use the evaluate () method. The code runs in a "sandbox" and cannot read any JavaScript objects and variables beyond the context of the page to which the Code belongs. Evaluate () returns an object, but it is only limited to simple objects and cannot contain methods or closures.

Here is an example to show the webpage 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 the evaluate () is not displayed by default. To override this behavior, use the onConsoleMessage callback function. The previous example can be rewritten:

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 operation-DOM Manipulation

Since the script runs on a Web browser, the standard DOM script and CSS selector work well. This makes PhantomJS suitable for supporting various page automation tasks.

The following useragent. js will read 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 preceding example also provides a Custom user agent method.

Use 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-Network Requests and Responses

When a page requests a resource from a remote server, the request and response can be traced 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 about how to use this feature for HAR output and YSlow-based performance analysis, see the network monitoring page.