Using CasperJS to test Picturefill Aug. 1st, 2014 Chris Ruppel

Using CasperJS to test Picturefill

August 1st, 2014

In the ten years I’ve been building websites professionally, I can’t count the number of times I have crafted something with all of the care and attention it deserved, manually testing and double-checking in each browser before and after deployment, only to wait a few weeks before hearing that it’s broken along with the latest round of features that was released. How can we stop this heartbreak from happening?

A tool that would check our work as we develop would be great. It should check on other parts of the site as well, so that we don’t break existing features when we add new ones. And if it were possible to write the tests in a language we’re familiar with, that decreases the time spent setting the tests up.

Enter CasperJS, a functional testing tool for the frontend. It is built upon JavaScript, the language we’re already using to power the web. It’s easy to learn and just as versatile as the browser itself.

Using CasperJS

If you’re already familiar with jQuery, Casper won’t be hard for you to pick up. The syntax isn’t too different, and Casper performs concrete actions in a very similar way to jQuery. However, instead of manipulating DOM elements to create an interface, we’re going to test that interface and verify that the website behaves exactly as we expect it to.

There are installation instructions and basic examples on the CasperJS website, so once you’re familiar with those, come back to jump right into the Test module of CasperJS. All of our examples in this series will be using the Casper 1.1.0 test syntax.

Basic components of a Casper test

These are the basic components of a CasperJS test file:

  • test suite declaration: includes a test name, number of tests, and the suite() itself.
  • functional steps: all of the code inside the suite() function. Includes steps to perform actions on the website, and test assertions to verify if conditions match expectations.
  • run tests: the command which runs all the tests and generates the final report.

We can use this basic pattern to manipulate and test any interface, whether it’s the UI of a website or the API of an integrated service.

Testing responsive images with CasperJS

Responsive images are a normal part of websites nowadays because they allow lesser devices to save bandwidth and energy by downloading smaller media, while greater devices can opt for higher-resolution assets that match their rich displays. Therefore it’s important to know if your solution is working as intended, and also to have a warning system if another feature’s code begins to interfere with the responsive images code, so you can prevent errors from making it to your live site.

In order to demonstrate what we’re trying to achieve, perhaps it’s best to look at the results first. When all of the tests are run successfully, this Casper test produces the following output:

The image depicts console output displaying five successful Casper JS tests. The tests report that the picture element is found, it contains two source elements, and that the correct image source was seen at various viewport dimensions. The test concludes by reporting: PASS 5 tests executed in 1.568 seconds, 5 passed, 0 failed, 0 dubious, 0 skipped.

Walking through the test

There are five tests which must all pass for that final green line to show up with your triumphant PASS. Here are the five tests written out in plain english:

  1. Is there a <picture> element anywhere on the page?
  2. Are there two <source> elements inside a <picture> element?
  3. At a viewport size of 320×480, is the medium.jpg displayed?
  4. At a viewport size of 960×640, is the large.jpg displayed?
  5. At a viewport size of 1280×1024, is the extralarge.jpg displayed?

Unless all five individual tests pass, the overall Testing Picturefill test will not report a pass. So, once again in plain english, here is the series of steps that Casper will complete in order to test Picturefill:

  1. Open the demo URL
  2. Look for a <picture> element
  3. Look for two <source> elements inside a <picture> element
  4. Resize the browser viewport to 320×480
  5. Read the src attribute on the <img> inside <picture> to see if it contains ‘medium.jpg’
  6. Resize the browser viewport to 960×640
  7. Read the src attribute on the <img> inside <picture> to see if it contains ‘large.jpg’
  8. Resize the browser viewport to 1280×1024
  9. Read the src attribute on the <img> inside <picture> to see if it contains ‘extralarge.jpg’
  10. Finish test

Example script

The sample Picturefill test has inline comments for every action that is taken, so you can understand why each line is necessary. There are also links to the API documentation, so you can find more information about the commands used.

If you want to fork the code, here’s a gist.

Video walkthrough

If the code isn’t enough and you’d like to see it in action, I’ve recorded a screencast to demonstrate the testing process. It includes a walkthrough of the Casper code, a test run that passes, then we will change the test in order to intentionally break it, and show how to read a failed test and get it passing again.

Further reading

If you enjoyed this article, move on to Part 2 of our CasperJS series: Testing custom JavaScript code. You can also follow me on twitter to receive new articles as I publish them. Thanks for stopping by!

Part 2: Testing JS code with CasperJS