Headless Chrome/Firefox testing in NodeJS with Selenium and Xvfb

July 13, 2013 – 8:14 pm Tags: , , ,

The other day I wanted to run a bunch of tests with a browser in a NodeJS environment. Having been spoiled by how easy it was to do in a Rails setup using Capybara, I thought it would be easy considering how everything cool is easy to do with Node!

Well, I thought wrong. It’s easy once you have everything set up but setting it up isn’t so straightforward, and you have a whole bunch of alternatives, too.

You have PhantomJS, CasperJS, SpookyJS, ZombieJS, and then there’s Selenium and all that. What is the way to go?

Why not PhantomJS?

If you wanted to use PhantomJS to automate a browser, then that’s relatively easy. However, trying to get it working so you can use Node to build a bunch of tests isn’t.

That is however not what I’m here to talk about. I’m just going to mention why I didn’t use PhantomJS: Separate executables.

The best way to run Phantom in a Node script as far as I can tell was with CasperJS, which in turn is its own executable, similar to Phantom itself. This in turn makes it annoying with some other things I wanted to do. If this it not a factor for you, then by all means go with Casper which seems like a quite reasonable approach.

Do note, that since phantomjs supports Selenium’s webdriver, you can use the JS code shown in the last step with phantomjs by simply using the following command instead of running Selenium:

phantomjs --webdriver=4444

Onwards with Selenium

To save you the trouble I went through with this, I'll just give you a quick summary to follow!

What you're going to need:

  • Java - for Selenium
  • Xvfb - virtual framebuffer, it lets you pretend you have a display when you don't
  • Browser of your choice, Firefox, Chrome and Chromium seem to work at least

Step 1: Java

If you don't have Java yet, install it. On Ubuntu,

sudo apt-get install default-jre or sudo apt-get install openjdk-6-jre

Step 2: Xvfb

Easy peasy,

sudo apt-get install xvfb

To run Xvfb,

Xvfb :1 -screen 5 1024x768x8

Make a note of which display you tell it to use, you need to remember to export that in order for your browser of choice to start.

In this case, the display I set is :1.5

Step 3: Browser

Selenium can drive Firefox out of the box. If you want to use Chrome, you need ChromeDriver

If you install ChromeDriver, make sure it's executable from your shell before proceeding. Eg. using chromedriver should launch it.

You can test whether the browser works by running it, but be sure to export the display you configured Xvfb to use before:

export DISPLAY=:1.5

If you get a message about Xvfb missing something called RANDR, you can ignore it.

Step 4: Selenium

Go to Selenium's website and download the latest "Selenium Server".

Before launching the JAR, make sure to export the display you configured Xvfb to use:

export DISPLAY=:1.5

java -jar selenium-server-standalone-n.n.n.jar

Step 5: Use it from Node

And finally, we just need to install the Selenium node module,

npm install selenium-webdriver

Now you are ready to use Selenium from Node!

For more information and usage examples for the selenium module, check out WebDriverJS wiki

Do you want to level-up your JavaScript skills and improve the quality of the code you write? Let me show you how unit tests help you achieve that

Sign up for my newsletter and I'll show you...

  • How tests build a safety net, which can help eliminate more than 2x the bugs - without spending huge amounts of time writing them
  • How to easily write your first JavaScript unit test with Mocha, even if you have ZERO prior experience
  • A technique that makes writing tests easy - many developers never learn this!
  • And I'll even tell you my biggest testing mistake so you can avoid it yourself, which has even caused customer data loss

We will never sell your information or spam you, ever.

Share this:
  1. 2 Responses to “Headless Chrome/Firefox testing in NodeJS with Selenium and Xvfb”

  2. Unfortunately my experience with Selenium shown it as unstable platform. As opposite I can point phantomjs, which I use intensively and which is stable and fast (I have above 1k tests).

    By Projektowanie wnętrz on Nov 23, 2013

  3. Selenium is not always super stable, but it’s currently the best tool for the job. PhantomJS can be used to run tests quickly when you’re doing dev work, but even if all your tests pass in PhantomJS, they might not pass in a real browser :)

    By Jani Hartikainen on Nov 23, 2013

Post a Comment

You can use some HTML (a, em, strong, etc.). If you want to post code, use <pre lang="PHP">code here</pre> (you can replace PHP with the language you are posting)