Installing PhantomJS and CasperJS on Ubuntu

Phan­tomJS is a “head­less WebKit script­able with a JavaScript API”, with Casper­JS build­ing on it to give high-lev­el func­tions.

Phan­tomJS is used quite a lot in head­less brows­er test­ing and sim­i­lar tasks. I’ve looked over var­i­ous projects which deal with screen­shots, and it’s been on my TODO-list to add respon­sive screen­shot­ting into my build process. I was kicked into gear read­ing the fol­low­ing tuto­r­i­al which gives a bare­bones script. It also used Casper­JS, which is why the script that I made (based on their script) uses it.

Anoth­er rea­son is because I looked clos­er at Casper­JS and noticed that it (at least in the­o­ry) would also work with anoth­er head­less brows­er using Gecko, Slimer­JS, which means that a future iter­a­tion will the­o­ret­i­cal­ly be able to sup­port both WebKit and Gecko screen­shots. I have not yet test­ed this the­o­ry, which is why Slimer­JS is not touched on in this arti­cle.

Prerequisites

  • Python 2.6 or high­er, which is pre-installed on Ubun­tu
  • Git

Install PhantomJS

Instruc­tions can be found on their page or if you feel con­fi­dent around the ter­mi­nal, fol­low the com­mands below (note, it’s using the ver­sion that’s the most cur­rent of the writ­ing, 1.9.1, so if you want to ensure you have the newest, check the web­page and just replace 1.9.1 with what­ev­er is the cur­rent newest). The one thing you should not do is sudo apt-get install phantomjs, as the ver­sion in the repos­i­to­ries is 1.4, and as we’ve estab­lished, the lat­est ver­sion now is 1.9.

cd ~/Downloads #default folder for downloads, duh

Decide if you need the 64-bit or 32-bit down­load, where the dif­fer­ence in file name is that 64-bit has the suf­fix -x86_64.tar.bz2 and 32-bit has the suf­fix -i686.tar.bz2.

#64-bit, v. 1.9.1
wget http://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-x86_64.tar.bz2

#32-bit, v. 1.9.1
wget http://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-i686.tar.bz2

#Unpack the tarball!
#64-bit, v. 1.9.1
tar -xvf phantomjs-1.9.1-linux-x86_64.tar.bz2

#32-bit, v. 1.9.1
tar -xvf phantomjs-1.9.1-linux-i686.tar.bz2

This is where there are two dif­fer­ent paths to take. The bina­ry bin/phantomjs is ready to use, so you can

  1. Just move it and delete the rest of the files once you clear your Down­load fold­er the next time or
  2. Move the entire fold­er some­where (say the Repos­i­to­ries fold­er) and sym­link the rel­e­vant bina­ry

In case you haven’t caught this nice lit­tle tip before: Write the first few let­ters of the path- or file­name and press tab for auto­com­plete, if you’re not just copy/pasting.

Sidenote, ~/bin vs /usr/local/bin

I like to use the home-fold­er to store things like bina­ries, because it makes it a lot eas­i­er for me to back­up every­thing I need the next time I need to rein­stall, which is why I’m writ­ing this with the assump­tion that you will put the bina­ries in ~/bin. I will then store most source pack­ages under /home/user/repositories. Anoth­er rea­son is that I pre­fer to not need to use sudo on nor­mal com­mands.

If you pre­fer anoth­er way, or need to share pack­ages between sev­er­al users on one com­put­er, you may want to replace ~/bin with /usr/local/bin, and ~/repositories with /usr/local/src, but then you need to ensure that you are prepend­ing the com­mands with sudo, as the /usr/local/ fold­er is owned by root.

Path 1

#If you don't have bin under your home folder, create it
mkdir ~/bin

#64-bit
mv phantomjs-1.9.1-linux-x86_64/bin/phantomjs ~/bin/phantomjs

#32-bit
mv phantomjs-1.9.1-linux-i686/bin/phantomjs ~/bin/phantomjs

Path 2

This will just be shown using the 64-bit, but as always pri­or: replace x86_64 with i686 to instead use the 32-bit one.

#If it does not exist, create ~/repositories
mkdir ~/repositories

#Move it and rename
mv phantomjs-1.9.1-linux-x86_64 ~/repositories/phantomjs

Cre­ate a sym­bol­ic link to your local bin fold­er (cre­at­ing it under your home first, see path 1) ln -sf ~/repositories/phantomjs/bin/phantomjs ~/bin/phantomjs

Test it!

phantomjs --version

If you get an error that it’s not installed, close the ter­mi­nal and open a new one. You might be able to just run the com­mand . ~/.bashrc which reloads the file that appends your /home/user/bin fold­er to your PATH. If you’re still out of luck, google what­ev­er error mes­sage you’re get­ting. It’s always a good prac­tice when you’re run­ning into issues.

Installing CasperJS

Unlike Phan­tomJS, you have to take the “sec­ond path” of cloning the repos­i­to­ry and then sym­link­ing it. The instruc­tions are more or less tak­en from the instal­la­tion infor­ma­tion, with some changes in where to store things.

#If it does not exist, create ~/repositories
mkdir ~/repositories
cd ~/repositories

#clone the repository from the master branch
git clone git://github.com/n1k0/casperjs.git

#Symlink the relevant file into your bin
ln -sf ~/repositories/casperjs/bin/casperjs ~/bin/casperjs

Now test it. Assum­ing every­thing worked, you’ll get a nice helpmes­sage, as well as which Phan­tomJS ver­sion you’re using. casper­js

In case it tells you that it can’t find the file, try run­ning the com­mand python ~/bin/casperjs. That’s what hap­pened when I ran it on my work­ing machine. On the test machine (a vir­tu­al 12.04LTS Ubun­tu) these com­mands worked with­out a hitch.

What I found out was the issue is that some­where in there, the line end­ings had end­ed up screwed up, using DOS line end­ings where it should be using Unix. What worked for me (and is thus a good start for you) is that beau­ti­ful com­mand dos2unix.

sudo apt-get install dos2unix #installs it if it isn't already installed
dos2unix ~/repositories/casperjs/bin/casperjs #Can't be ran on a linked resource
casperjs #Check to make sure you get said helpmessage

Finishing comments

By now you should have both Phan­tomJS and Casper­JS, which will be rel­e­vant in future arti­cles, in par­tic­u­lar on my work­flow.


For the moment comments are not enabled, but feel free to reach out on Twitter.