Getting Started With PhantomJS

When I first heard the name PhantomJS, I thought it was another Javascript framework or library, like AngularJS or NodeJS. I came to know how different it was once I studied more about it. In this blog, we are going to dive into what PhantomJS is and its many possibilities.

What is PhantomJS?

Phantomjs.org, the official PhantomJS website, describes it as “A headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.”

In simple words, we can say that PhantomJS is a browser without a GUI, but with the JavaScript API built in. The execution of PhantomJS happens at the command prompt. Using PhantomJS, we can load a web-URL, manipulate DOM, take screenshots, read/write files, and perform many more useful things. It can be easily integrated into Continuous Integration (CI) tools and can help us in website headless testing.

PhantomJS is an open source and free software and is distributed under the BSD license. Its first version was released in April 2011.

Use Cases

Page Automation: We can use PhantomJS to load and manipulate a web page, and to perform operations like DOM manipulation, clicking on buttons, etc. We can also include jQuery on a web page using page.include JS, which allows us to automate all interactions with a web page without having to open a browser.

Screen Capture: PhantomJS can be used to take screenshots of web pages. It can also capture the screen on display of SVG files, images, and Canvas elements. These screenshots can be rendered in different formats like PDF, JPEG, PNG, and GIF.

Network Monitoring: With the help of PhantomJS, we can monitor the network and validate the behavior and performance of a particular webpage. It is suitable to analyze network behavior and performance. We can hook into PhantomJS during a request-response cycle and collect data about the website. This data can then be reformatted, which allows us to check the performance of a webpage.

Headless Web Testing: PhantomJS is not a testing library, but many other popular testing libraries can run on top of it. PhantomJS test runners are available for pretty much every testing library you might want to use, including Mocha, Jasmine, and Qunit. It can run tests cases and show the result on the command line.

Features

Multi-Platform: It is available on all major operating systems like Windows, Mac OS X, Linux, and other Unix.

Execute the program using the following command: C:\> phantomjs TakeScreenShot.js

It will take few seconds to execute and generate a PDF file in the same directory where your JS file is stored.

Output:

Explanation:

The ‘require(“webpage”).create()’ command creates a webpage object. Using this object, we can open and manipulate a webpage. In the code shown, we used a webpage object to open the http://phantomjs.org website and then used the render function to take a screenshot and render it into a PDF format.

In the above program, we are opening Google’s home page and taking a screenshot of it. Then, we are using the ‘this.evaluate()’ function to perform a certain event on webpage; in this example, we are clicking the “I’m Feeling Lucky” button. Inside the ‘evaluate()’ function, we can perform any type of action, like DOM manipulation or fire an event, like button click. The function will finish by taking a screenshot of the current state of the webpage. So after execution of this program, you will get two .PNG screenshots of the webpage’s different states.

Execute the above program:

The output:

Before execution

and after execution.

Summary

In this post, we got to know about PhantomJS and its use cases and features, and explored some practical examples of how to use it. There are a lot of other possibilities, but they are difficult to cover in a single post. For example, PhantomJS provides many modules like WebPage, FileSystem, System, and WebServer. It also provides various objects and methods. In addition to this, you also get an example directory with the installation package, which contains a good number of examples of different use cases of PhantomJS. I recommend exploring the many possibilities offered by PhantomJS.

Sumit Gupta

Sumit Gupta is a Technical Lead at 3Pillar Global, working out of our office in Noida, India. He has experience with Microsoft technologies including AngularJS, Node.js and Bot Framework, and has expertise in building and working with high-performance teams delivering enterprise products. He loves to write blogs and is passionate about exploring trending technologies. His current areas of interest are the Internet of Things (IoT), Artificial Intelligence and micro service/ serverless design. He loves driving, traveling to new places, watching movies and playing table-tennis.