It’s not actually that hard to automate browser testing! Let’s dive in. We won’t use any obscure or (relatively speaking) bleeding-edge technologies here; just the basics. We’re trying to strip out all the fancy names and get to a nice, minimal, testing setup.
The first question to answer is this: what do we use to test with? You’ve probably heard of Capybara, QUnit, Jasmine, Mocha, Karma, Protractor, WebDriver, Selenium, etc., but which does what? Let’s sort it out.
Regular old JS, do-it-all testing.
Candidates: QUnit, Jasmine, Mocha
If you want to assert that 2+2 is 4 using your fancy new addition framework, these are the usual suspects. QUnit is very old but tried-and-true (jQuery uses it); Jasmine is newer; and Mocha is the newest. From what I’ve heard Mocha has better asynchronous support than Jasmine, so when in doubt, I just use that.
Make the browser work automatically
What they’re good for: Automating web browsing
Yes, Virginia, there is only one actual browser automator, and that’s Selenium! I spent years (well, hours) googling this before I realized what was going on.
WebdriverJS (update: now WebdriverIO, thank goodness), WebDriverJS (I wish I was joking), Nightwatch.js
*Update: WebdriverJS is now WebdriverIO (still lower-case D). Its main claim to fame is requiring slightly less typing. Should you use it?
It’s not by the Selenium people as far as I know, but it’s been around for a while so I’d feel safe using it.
Cooking it up
Now that we’ve got that sorted out, our path is pretty simple, and we’ll need all three. What we’ll do is:
- Start Selenium in the background; it can automatically spin up Firefox, IE, and Chrome windows on its own like magic.
- Install WebDriverJS so we can talk to Selenium (https://code.google.com/p/selenium/wiki/WebDriverJs)
- Create tests in Mocha that use the WebDriverJS library to automate the browser.
Here we get the best of every world. Selenium, a well tested browser automator, handles making Firefox do spooky automatic clicking. We use the official WebDriverJS to talk to Selenium, and we put our tests, just like any other test, in a standard Mocha example – no need to have some separate, slightly-different-syntax not-invented-here framework just to do our E2E testing.
While I could write a tutorial that would rapidly go out of date, I think it would be better to just link to the latest up to date tutorials and make some notes.
Prerequisites: node, npm, java
- Start by installing Mocha and get the basic test running.
- Download the Selenium server.
- Install WebDriverJs (selenium-webdriver) so you can use Selenium in Node.
- Download and include the proper Selenium drivers for Firefox/IE/Chrome
- Run Selenium with Java, making sure to specify the drivers you downloaded in the previous step.
- Replace the basic test you wrote in Mocha with this one: https://code.google.com/p/selenium/wiki/WebDriverJs#Writing_Tests
- That’s it!
Some caveats I ran into:
- First, while mocha understands being installed locally and globally (npm install vs npm install -g), selenium-webdriver only understands being installed locally.
- Downloading the drivers for FF/IE/Chrome is a bit of a pain since the web links redirect to different places.
Other than that though, just use the standard instructions for Mocha/Selenium/WebDriverJs. No need to remember anything else from a random blog post (AKA, this one).
The only tricky part about autotesting your web browser is deciding what to use. Using Mocha + Selenium with WebDriverJS is a nice, commonly supported combination that’s minimal.
Adding things like Capybara, Nightwatch, and Protractor is nice, but frankly, you’ve got to install Selenium anyway, and you’re probably already using Mocha or something similar for your browser testing. All those new, fancy-name frameworks are doing is adding a bunch of syntactic sugar and extra dependencies. Alternatively, there are plenty of tutorials for setting this up, that require all sorts of caveats and weird tricks to remember. Who needs that?