How to use PhantomJS in windows with the command prompt

How to use PhantomJS in windows with the command prompt

PhantomJS is a headless WebKit scriptable with a JavaScript API multiplatform, available on major operating systems as: Windows, Mac OS X, Linux, and other Unices. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS by itself has many features as website testing, it allow you to run functional tests with frameworks such as Jasmine, QUnit, Mocha, Capybara, WebDriver, and many others. It allow you to create screen captures, website automatization, manipulation of the document and network monitoring etc.

In this article we'll learn how to manipulate PhantomJS from the command line in Windows and test basic features as screenshots, PDF generation etc.

Requirements

Note: there's no installation process as you'll get .zip file with two folder, examples and bin (which contains phantomjs.exe).

How does PhantomJS works

Imagine a simple web browser like Google Chrome, ready? Now remove the Graphic User Interface (GUI) and you'll get a headless browser, that's basically PhantomJS. They're great for automating and testing web pages programmatically and PhantomJS is one of the best available headless browsers.

Start using PhantomJS from cmd.exe

After the extraction of the download .zip file you'll get 2 folders : examples and bin. In Bin is located the executable of PhantomJS.

PhantomJS

First, open the windows terminal cmd.exe and navigate to the bin path of phantomJS executing the following command:

# In this example, the bin folder is located in the desktop
# Obviously, provide your own path
cd C:\Users\sdkca\Desktop\phantomjs-2.1.1-windows\bin

Note: you can simply create an environment variable pointing to the location of Phantomjs.exe and the execute it from wherever you are in the console.

Now that you're located in the path of PhantomJS you'll be able to execute commands easily with phantomjs.

To manipulate phantomjs you'll use mainly Javascript, to execute a phantomjs command it expects the path of a JS file as first parameter.

phantomjs myjsfile.js

And that's all ! Now you only need to learn how to write suitable javascript for phantomJS.

For your first exercise, we'll take a screenshot of Our Code World website. Create a screenshot.js file in the same location of the phantomjs executable :

PhantomJS first script

And include the following code in the screenshot.js file:

var page = require('webpage').create();
var websiteAddress = 'http://ourcodeworld.com/';
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1680, height: 1050 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 1680, height: 1050 };

// Open website
page.open(websiteAddress, function(status) {
    // Show some message in the console
    console.log("Status:  " + status);
    console.log("Loaded:  " + page.url);

    page.render('ourcodeworld.png');
    phantom.exit();
});

Finally execute the following command in the command prompt :

phantomjs screenshot.js

Success message screenshot

Wait till is executed see the success message, and open the bin folder again.

Screenshot

Our Screenshot of the website has been created, awesome and really easy isn't ?.

Known windows issues

If the data is not transferred correctly, check if the network works as expected.

Specifically on Windows, the default proxy setting may cause a massive network latency. The workaround is to disable proxy completely, e.g. by launching PhantomJS with --proxy-type=none command-line argument.

Conclusion

Now that you know how does PhantomJS basically works, you'll be able to understand the documentation and discover all the awesome features that PhantomJS has to offer.

As always, we encourage you to check out the documentation to learn how to generate even PDF's, remote debuggin etc. Have fun !

This could interest you

Become a more social person