Embed screenshots in your HTML output

Cucumber's HTML output is fantastic. But I began to wonder if there was a way to embed the screenshots I was capturing separately. Turns out there is, and it's incredibly simple to do.

You have failed me test. Now say "Cheeeeeese!"

Screenshots are invaluable in the diagnosis of a test failure. Often a quick look at a screenshot is sufficient to know exactly why a test has failed, saving you the time of looking back through log files or manually retesting the failure in the event of an unhelpful test output such as 'Unable to capture snippet for eval'. For a long time I used to capture the screenshots in a dedicated folder within my framework. But this made adding screenshots a little cumbersome when emailing results, and I found myself constantly adding entries in my todo list to research embedding them in the HTML output of a Cucumber run, but I kept putting it off as I assumed it would be awkward or time consuming. I was really wrong, and it is really useful.

Sometimes, a screenshot is worth a thousand log files. Tweet this post

Remember I told it you it was simple to implement?

Just paste the following code snippet into your hooks.rb (or env.rb if you're not using a separate hooks file) and you're done. You'll now notice a small 'screenshot' link underneath failed tests in your HTML output. Just click the link to expand the screenshot, and again to collapse it.

If this post helped you, please share it. If you have any questions, or use another method to manage your screenshots, please comment below or tweet me.