What is the best way to test in headless browsers? JavaScript testing frameworks such as PhantomJS, Selenium and many others are fighting a colossal war. Who is the winner if the battle is already finished? And if not, who is the underdog?
–Carl J. Nagle
Now what are headless browsers? Executed using command line interfaces or network communications, headless browsers provide automated control of a web page in an environment similar to popular web browsers. Now let’s cut to the chase:
Tug Of War:
Selenium is an open source automation tool and definitely a great JavaScript automated testing framework which supports all operating systems and browsers such as Mozilla, Safari, Firefox, and IE. In addition, it runs multiple tests and supports programming languages such as Java, C#, Ruby, and Python.
PhantomJS can be termed as yet another powerful tool for testing. It supports varied web standards and it is scriptable with JavaScript API which permits webpage capturing, pages manipulation, access to file system and page settings.
Get the fresh #PhantomJS 1.9.7: https://t.co/cGNEhX913P
— PhantomJS (@PhantomJS) January 28, 2014
On a bright note, it is important to understand that both differ because they have different goals. In fact if you are able to understand this, it is enough to realize the significance of each of these tools. The game of objectives – PhantomJS tracks the problems on a priority basis. For instance when your web application is an email client and your engineer breaks the ‘signin’, PhantomJS saves a lot of time by detecting such problems like sign-in. This helps in understanding the errors if any before there is any launch of functionalities on other web browsers.
Selenium
Many people would go with Selenium as it stands as an ideal choice when you need a specific JavaScript engine and also when your site uses peculiar browser detection. And being easier in development, Selenium bags some brownie points.
Download Selenium Server. It is distributed as a single jar file, which you can run simply:
java -jar selenium-server-standalone-2.28.0.jar
As soon as you execute this command, it boots up a server to which your testing code will connect later on. Please note that you will need to run Selenium Server every time when you run your tests.
PhantomJS
PhantomJS runs good as it has no dependencies and runs on the command-line. It easily gets into the development workflow such as in GIT pre-commit hook or testing stage on the integration server.
// Simple JavaScript example
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});
And then there’s lots you can do with PhantomJS. The CasperJS project makes good use of the PhantomJS API and if you already have Node.js installed it’s a quick and easy way to play with some of the PhantomJS capabilities. CasperJS, aside from requiring NodeJS, only drives PhantomJS.
CasperJS
Another silent contender in this war is CasperJS. CasperJS is an open source navigation scripting & testing utility written in JavaScript for the PhantomJS WebKit headless browser and SlimerJS (Gecko). Casper eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks. Yes it is an improvement to PhantomJS
CasperJS -minimal scraping script
Fire up your favorite editor, create and save a sample.js file like below:
var casper = require('casper').create();
casper.start('http://casperjs.org/', function() {
this.echo(this.getTitle());
});
casper.thenOpen('http://phantomjs.org', function() {
this.echo(this.getTitle());
});
casper.run();
Run it:
$ casperjs sample.js
You should get something like this:
$ casperjs sample.js
CasperJS, a navigation scripting and testing utility for PhantomJS
CSS Testing with PhantomCSS, PhantomJS, CasperJS and Grunt http://t.co/pvH0VCIXli
— CasperJS (@casperjs_org) April 4, 2015
PhantomJS : Headless WebKit with JavaScript API
Many professional developers and testers believe that writing CasperJS scripts is just more fun. CasperJS allows you to write your tests in CoffeeScript or JavaScript and if you can’t figure out how to do what you want in CasperJS you can do it in JavaScript or CoffeeScript. CasperJS is quick, light-weight, and easy to set up. While CasperJS doesn’t have as many options and adoptions as Selenium has, there are great open-source tools to help you to try out some really cool things with it. Hence, CasperJS cannot withstand alone.
Digging PhantomJS More:
What makes PhantomJS a good choice?
- Headless website testing – You can run functional tests along with the frameworks like QUnit, Jasmine, Mocha, Capybara, WebDriver etc.
- Screen capture – One can programmatically capture varied web content such as Canvas and SVG. You can develop web site screenshots along with thumbnail preview.
- Page automation – Now, just access and manipulate your webpages with the frameworks and standards like DOM API, or any with libraries such as jQuery.
- Network monitoring – You can automate performance analysis with the help of Jenkins and YSlow. And also, you can monitor page loading and export as all standard HAR files.
Advantages of PhantomJS coding
- The development can be very easier. While developing the UI, you can write the code by selecting the HTML element wherever you wanted.
- As PhantomJS uses Qt Web kit, the developed browser exactly looks like a real browser.
- Manual testing is very easier with the help of PhantomJS Applications.
- Available on major operating systems: Windows, Mac OS X, Linux, and other Unices.
- Pure headless on Linux, ideal for continuous integration systems. It also runs on Amazon EC2, Heroku, and Iron.io.
We made some major updates to @saucelabs, specifically for automated testing in CI/CD environments. Learn more: http://t.co/uZGBLEw2cA
— Sauce Labs (@saucelabs) June 11, 2015
Since PhantomJS runs perfectly on the command-line, it is suitable as the first layer of smoke testing, whether as part of development workflow and/or in a continuous integration server. Selenium targets multiple browsers and hence it is very useful to ensure cross-browser consistency and carry out extensive testing across different operating systems.
Conclusively, PhantomJS is level headed and targeted browser. As a matter of fact, tests here run in less than 1/3rd the time. Since it is an automated suite, it is fine even if you cannot see the tests running. You can rather take screen shots to check the tests. While CasperJS merely adds to the beauty of what PhantomJS is, one must admit that CasperJS/PhantomJS(born in 2011) together have done a commendable job for challenging something as powerful and well-established as Selenium(born in 2004).
Rachit Agarwal
