Capybara Javascript Debugging

Over the past year or so, I've spent a lot of time writing acceptance tests in Turnip, which is a Business Driven Design test tool that allows business users to read tests in plain English and agree about what the system should be doing. Tests can then be written, using that plain English as a guide, that start a browser in the background and literally log in to the application in question and click and type as a user would.

This uses a tool named Capybara that helps to control the test in question, and "under the hood" during the test, the tool that actually performs all the interaction is named Poltergeist.

The challenge that I sometimes face is that the Javascript on the page that I am testing will work just fine in the browser, but will just not work when run in the testing scenarios. Poltergeist will help by passing along Javascript errors when they happen. The problem comes when those aren't readily apparent. One of the other tricks of the trade is to add Javascript debugging statements into the code and see what's happening. Interestingly enough, those, by default, aren't passed through to the testing apparatus.

How to debug this issue when there seems to be no way to do so? The solution is to use the console.log feature that we are so familiar with in Javascript, but the trick is to use window.console.log instead of just console.log. That correctly finds the window that is being used to render the tests and calls the right logging method.

It's amazing how something so small can take so much time to find and it is such a game changer when trying to debug something that is elusive.