Webrat matchers for HTML validation in Cucumber

Recently here at Webbynode we had a demand for validating HTML without going as far as driving a browser. We have an internal library that generates HTML after compiling HAML templates. To fulfill our BDD needs, we wanted a simple, straightforward way to validate HTML tags without the need of a full blown browser driving engine, since we don’t have an HTTP server running while testing this library.

We found out that Webrat’s Matchers and HaveTagMatcher classes was all we needed. Combined to a couple of custom Cucumber steps, here’s how simple it became to validate our HTML tags:

In order to make those steps work, here’s what we needed. First, requiring Webrat and including its matchers into our Cucumber world:

Note that we have added a new method as well, called response_body. That’s where Webrat will expect your HTML body to be, so in our HTML generating component we just assign the @body variable:

View code Gist here

And, finally we created a couple of custom steps to make dead simple to match HTML tags:

This way, you have matchers for any tag, just using things like “I should see a div with id: content, name: content, class: bordered, content: Your profile have been saved”. Note that content is a special key within Webrat matchers, and it will imply the following HTML chunk:


<div id="content" name="content" class="bordered">
Your profile have been saved
</div>


Do you know any other interesting custom steps for Cucumber? Share them in the comments!

Update: I have narrowed the former two cucumber steps to only one. I had an “a vs. an” issue with regexp but Jim provided some feedback on his comment and I applied it. Thanks, Jim!