Testing tools for the Frontend

Ashok Modi

Software Engineer - CARD.com

Write code


Developer experience


Ask questions any time

Not in presentation

Unit Testing - why?
  • Not an area I know about particularly well for the frontend
  • If you do, would love to hear you talk right after :)

Few tools

  • Jasmine (used by Angular folks - we use it on our Cordova App)
  • Mocha (used by ReactJS folks)


Lots of things can happen in the frontend
  • Changes to JS that break things
  • Performance Regressions
  • CSS Changes that are unexpected
We need same testing abilities as backend
We have the tools

Browser Tools


  • Test IE, Safari, Firefox, etc. from your machine
  • Not really scriptable


  • Test IE, Safari, Firefox, etc.
  • Requires setup
  • Can be complex (esp with different OS)
  • Scriptable
  • Hosted Options (BrowserStack, SauceLabs, AppliTools)


Headless Browser based on Webkit (Chrome)
  • Can be easy to install
  • Scriptable
npm -g install phantomjs-prebuilt


Headless Browser based on Gecko (Firefox)
  • Not fully headless
  • Scriptable
  • Focus on PhantomJS for this talk

Functional Testing

How did I end up on the admin panel when I clicked on search?
  • AKA Acceptance Testing
  • Scripts to test actions in browser
  • Get away from sitting for hours testing every page


Casper allows for scripted actions to be tested. Fully works with PhantomJS
npm -g install casperjs
casperjs test path/to/file.js


casper.test.begin('Site has 10 blog posts', 1, function suite(test) {
  casper.start("http://btmash.com", function() {
    test.assertTitle("BTMash | Blob of contradictions", "Correct title");
  casper.then(function() {
    test.assertEval(function() {
      return __utils__.findAll("article.node-article").length >= 10;
    }, "Blog has 10 or more blog posts on home page");

  casper.run(function() {


(Small) list of tools to use for functional testing with Selenium. Can also work with PhantomJS
  • Behat / Mink (PHP)
  • Selenium Webdriver (Python)
  • Capybara (Ruby/Rails)
  • WebdriverIO (Javascript)

Performance Testing

Why does the site feel so slow? We're only using jQuery, Angular, React, and Backbone
  • Frontend can be 70% of user page load experience
  • Mobile rulesets slightly different from desktop

By hand

Page Speed Insights CLI

npm -g install psi
psi URL (--strategy=mobile) (--threshold=70)


  • Phantomas provides extensive data about how your website is performing
  • Uses PhantomJS
  • Output is a bit...verbose
npm -g install phantomas
phantomas URL (--options)


# default task

# Generate Report
grunt phantomas:default

# Generate Report + Screenshot
grunt phantomas:screenshot

# Assert tests
grunt phantomas:requests

Regression Testing

Why is the background on production ultramarine? It used to be periwinkle
  • It is really easy to mess up CSS
  • It is especially easy in certain CMSes (hi Color module!)
  • We can try to prevent this


  • Takes screenshots of 2 environments
  • Creates visual diffs of screenshots between environments
  • Ruby wrapper to CasperJS, PhantomJS, imagemagick written by BBC
  • REALLY easy to use (uses YAML for configuration)
  • Can also check historical snapshots
  • More info
This is what wraith screenshot diff looks like
# install wraith
gem install wraith

# Run wraith config
wraith capture configs/file.yaml

# View results in browser
open shots/gallery.html

# Use history (if set up that way)
wraith history configs/historical.yaml


How to automate?

  • Use a continuous integration tool
    • Jenkins
  • Git hooks
  • Workflow
    • Commit code to git
    • Execute the aforementioned CLI commands



Thank you!