Screenshots with Mocha-PhantomJS

Today I wondered whether you can take screenshots in your mocha-phantomjs tests. Within 15 minutes I found out that my colleagues at Reaktor had already solved the problem in their own fork. So I took a look and with some help got screenshots working in the open-source application I'm working on for the Board of Education in Finland. Then I made a pull request and now I'm telling you how to make screenshots work.

So, in your test code, write a helper for generating a screenshot on demand:

function takeScreenshot() {
  if (window.callPhantom) {
    var date = new Date()
    var filename = "target/screenshots/" + date.getTime()
    console.log("Taking screenshot " + filename)
    callPhantom({'screenshot': filename})
  }
}

In this function you decide where to put the screenshots and how to name them. In my case, I'm putting them undertarget/screenshots.

If you want to generate a screenshot for each test failure you just add the following into your test code.

  afterEach(function () {
    if (this.currentTest.state == 'failed') {
      takeScreenshot()
    }
  })

And next time you run your mocha-phantomjs tests, KABOOM, you have screenshots. Good times!

Update: A couple of days later, version 3.5.2 with screenshot support was released!