Getting Started

Exclusive offer: get 50% off this eBook here
Getting Started with PhantomJS

Getting Started with PhantomJS — Save 50%

Harness the strength and capabilities of PhantomJS to interact with the web and perform website testing with a headless browser based on WebKit

$17.99    $9.00
by Aries Beltran | November 2013 | Open Source Web Development

In this article, Aries Beltran, the author of the book "Getting Started with PhantomJS", has discussed in detail about PhantomJS.

(For more resources related to this topic, see here.)

PhantomJS is a new solution that provides headless testing of web applications. It is also a tool for dynamically capturing and rendering pages as images. It allows you to programmatically manipulate page content to control and change it to different forms. It can scrape websites and save important information to files. It will also provide you network-level information of your page and site resources. These are just a few of the functions that PhantomJS can do for us. It provides a fresh and a whole new way for web designers, testers, and developers to perform and create browser-based solutions.

PhantomJS uses QtWebKit as its core browser capability and uses the WebKit JavaScript engine for script interpretation and execution. Anything and everything that you can do in a WebKit-based browser (such as Chrome, Safari, and Opera browser) you can do with PhantomJS. It's more than just a browser because it supports web standards, such as CSS selector, DOM manipulation, JSON, HTML5 Canvas, and SVG; moreover, you can do some cool stuff such as performing file system I/O, accessing system environment variables, or even instantiating your own implementation of a web server daemon.

Downloading PhantomJS

Before we go through the features of PhantomJS, first we need to get our copy of the PhantomJS binaries. Typically, PhantomJS provides downloadable releases of binaries that are precompiled and packaged. You can choose from Linux, Mac OS X, and Windows precompiled packages. To download a copy, go to http://www.phantomjs.org/download.html.

Download your binaries based on your preference of operating system. After downloading, extract the binaries to any folder you desire. That's it! Your PhantomJS binary is ready to be used.

Add PhantomJS to PATH

Add the /bin folder of PhantomJS into your $PATH OS to make it easier when calling PhantomJS main binary. This allows us to call the binary anywhere without specifying the full path.

We will be using the Mac OS X version of PhantomJS throughout this book for running code examples. Don't worry if you are working on a different platform; the instructions are the same on all platforms.

Quick PhantomJS install on Mac OS X

As an alternative to downloading the precompiled binary, we can install PhantomJS using brew:

brew update && brew install phantomjs

For more information about brew, visit http://brew.sh/.

Building PhantomJS from source

You may also want to build your own binaries by compiling PhantomJS from source. Sources are hosted in the Github server at https://github.com/ariya/phantomjs.

Before you start downloading sources, you will need these tools installed on your workspace:

OS

Required development tools

Windows

Visual Studio 2010 or 2008

(Express edition)

git

 

Mac OS X

Xcode

git

Ubuntu/

RHEL/

CentOS

Linux

gcc

gcc-c++

make

git

openssl-devel

freetype-devel

fontconfig-devel

 

The PhantomJS team is always trying to find the optimal way to build the sources, and the build instructions are frequently modified. To build PhantomJS properly, you must follow the steps found here: http://phantomjs.org/build.html.

If you are not planning to hack into PhantomJS code and develop new features, then it is best to download the pre-packaged binaries.

Working with PhantomJS

Now, let's see how PhantomJS's magic works. It is a command-line-based application, so we need to execute it in an OS terminal or console. The PhantomJS package contains a series of files and comes with one main executable file, which is named phantomjs.

Open your terminal and then navigate to your PhantomJS bin folder. In the prompt, execute phantomjs without any arguments.

PhantomJS Windows build

In Windows build, PhantomJS executable can be found in the root folder with the filename phantomjs.exe.

Running PhantomJS without any arguments will give you an interactive prompt that is similar to the JavaScript debug console you could find in any modern browser. In this interactive prompt, we can execute JavaScript code line by line. This functionality is very useful for debugging or testing code before you actually build your script.

Say "Hello Ghost!" to PhantomJS using the interactive prompt. Using console.log will output any type of data to the output console of a JavaScript interpreter.

phantomjs> console.log("Hello Ghost!") Hello Ghost! undefined phantomjs>

See? It is simple. Just like coding any JavaScript. But wait. What is that undefined message just after the Hello Ghost! message? That is not an error. It is just how the interactive mode behaves. Each call is expected to return data just like any ordinary function call and it also automatically outputs the data value to the output stream.

Since the console.log command does not return any value, the message is undefined. If we issue an assignment to a variable command, the following output will be displayed:

phantomjs> name = "Tara" {} phantomjs>

The assignment to a variable will take place and the result of the operation will be displayed. Because it is in the form of a string literal, the undefined message will not be displayed. The interactive mode is similar to a long-running script; any variable or function you define will be loaded into the memory buffer and can be accessed anytime during the session. So, based on our preceding example, the name variable can also be displayed by referencing it.

phantomjs> name = "Tara" "Tara" phantomjs> name "Tara" phantomjs> name + " and Cecil" "Tara and Cecil" phantomjs>

We can even use the variable with another operation as seen in the preceding lines of code. However, any operation's result that is not assigned to a variable will be available only during the execution of the line. The operation that concatenates the name variable with another string literal will be performed, and the resulting string will be displayed in the console but will not be kept in memory.

Objects can also be accessed within the interactive mode, and one of the most commonly used objects is phantom. Try typing phantom in the prompt and you will get the following output:

phantomjs> phantom { "clearCookies": "[Function]", "deleteCookie": "[Function]", "addCookie": "[Function]", "injectJs": "[Function]", "debugExit": "[Function]", "exit": "[Function]", "cookies": [], "cookiesEnabled": true, "version": { "major": 1, "minor": 7, "patch": 0 }, "scriptName": "", "outputEncoding": "UTF-8", "libraryPath": "/Users/Aries/phantomjs/bin", "defaultPageSettings": { "XSSAuditingEnabled": false, "javascriptCanCloseWindows": true, "javascriptCanOpenWindows": true, "javascriptEnabled": true, "loadImages": true, "localToRemoteUrlAccessEnabled": false, "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.7.0 Safari/534.34", "webSecurityEnabled": true }, "args": [] } phantomjs>

Summary

In this article, we have covered the procedures of downloading PhantomJS, how PhantomJS was built using sources hosted in the Github server, and finally we worked with PhantomJS by executing it through the command line.

Resources for Article:


Further resources on this subject:


Getting Started with PhantomJS Harness the strength and capabilities of PhantomJS to interact with the web and perform website testing with a headless browser based on WebKit
Published: November 2013
eBook Price: $17.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Aries Beltran

Aries Beltran is a software developer located in Manila, Philippines. He works as an architect and R&D developer for financial businesses using web and enterprise technologies. He is currently developing new tools to provide real-time insights. He is interested in playing around with cutting-edge HTML5 development and mobile visualization. When he isn't coding, he likes to take photos of his daughter, Tara, who is his favorite model.

Books From Packt


 Learning Ext JS 4
Learning Ext JS 4

Ext JS 4 First Look
Ext JS 4 First Look

 Instant typeahead.js [Instant]
Instant typeahead.js [Instant]

 DWR Java AJAX Applications
DWR Java AJAX Applications

Object-Oriented JavaScript - Second Edition
Object-Oriented JavaScript - Second Edition

 Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

Ext JS 4 Plugin and Extension Development
Ext JS 4 Plugin and Extension Development

Social Data Visualization with HTML5 and JavaScript
Social Data Visualization with HTML5 and JavaScript


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
B
W
W
f
e
v
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software