Testing progressively enhanced features with Capybara

Question

I'm using Capybara to test features on a progressively enhanced website. Let's say my feature is to navigate around a hierarchy of locations. The non-javascript version involves getting a new version of the page when we click around on different locations. The enhanced javascript version opens up hidden elements, or loads up new information via Ajax.

I start by writing a test for the non javascript version, which looks something like this:

When I visit the page for "UK"
And I click "London"
Then I should see the information for "London"

Using the default mechanize driver, the test fails, I develop the feature, then the test passes.

I then create an identical test for the javascript version, flagged up with @javascript. It runs the test with the javascript driver, and that test passes because the feature has been implemented. (It's running through the non-js flow). However, I want the javascript version of the test to fail at this point because the feature has not yet been enhanced with Javascript.

So I'm looking for a good strategy for determining whether or not a whole new page has come from the server, and making sure both versions of the feature work. (I plan on integrating this with pushState so testing for a changed URL won't do)

Answer 1

I'm interested to hear other peoples opinions on this - I'm not convinced Cucumber is the right tool for the job, since you're describing features from the perspective of user interaction, and it sounds like your implementation of progressive enhancement will result in essentially the same user interaction.

That aside, I think you may want to consider building in some kind of testing hook to the page itself to help with this. Hard to say what without knowing your exact situation, but maybe one of:

• The script-enhanced version of the page could add some element to the DOM, indicating that the enhancements are active, or indicating that the data came from an AJAX request rather than page load.
• You could generate a random page identifier (from the server) on every load (e.g. new GUID), embed this into the DOM and assert that it hasn't changed after the interaction (on the enhanced version). This would be a very simple way of achieving your stated goal ("determining whether or not a whole new page has come from the server")

Answer 2

Why does your javascript "enhanced" version work the same as your non-enhanced? Your cucumber tests using @javascript should be testing to ensure the enhancements work.

For instance, * if the javascript opens a modal dialog instead of following a link to a new page, test for that. * if the javascript submits a form and updates a value, test for that.

These tests would fail if run without javascript support.