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
- A PhantomJS distribution for Windows, you can get the latest version in the download area of the official website here.
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.
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\binNote: 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.jsAnd 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 :
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
Wait till is executed see the success message, and open the bin folder again.
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 !
