Cucumber embed for screenshots not linking to screenshot

Question

Cross-posted from the Cukes Google Group:

I have experimented with a number of methods of saving screenshots, but settled on the method that is built into watir-webdriver. No matter which method I have used, I am not able to successfully embed a link to this image in the Cucumber HTML report.

In c:\ruby\cucumber\project_name\features\support\hooks.rb, I'm using:

After do |scenario|
   if scenario.failed?
      @browser.driver.save_screenshot("screenshot.png")
      embed("screenshot.png", "image/png")
   end
end

A link with text "Screenshot" IS added to the report, but the URL is the project directory path ("c:\ruby\cucumber\project_name") rather than a direct link to the file ("c:\ruby\cucumber\project_name\screenshot.png"). I have tried a number of different image formats and direct paths using Dir.pwd with the same results each time.

What am I missing?

Thanks

Windows XP Ruby 1.8.7 watir-webdriver (0.2.4) cucumber (0.10.3)

Answer 1

Aslak:

Try this:

After do |scenario|
  if scenario.failed?
    encoded_img = @browser.driver.screenshot_as(:base64)
    embed("data:image/png;base64,#{encoded_img}",'image/png')
  end
end

Aslak

Adam:

Aslak was able to see the embedded image in the file that I emailed him, while I was still unable to do so in IE 8. I tried it out in Firefox 3.6 and the image appears as expected. The problem may have originally been with the embedding method itself (or rather, my use of it), but using Aslak's base64 solution it only fails to work in the Internet Explorer browser.

Aslak:

I believe Base64-encoding of images in HTML pages [1] works in all decent browsers (sorry, IE is not one of them). However, it should work in IE: http://dean.edwards.name/weblog/2005/06/base64-ie/ (but maybe they broke it in IE8, or maybe it only works with gifs, or maybe IE needs a special kind of base64 encoding, or maybe you should just ditch IE)

If being able to read cucumber html reports with screenshots in IE is really important to you, you could always write each image to disk:

 png = @browser.driver.screenshot_as(:png)
 path = (0..16).to_a.map{|a| rand(16).to_s(16)}.join + '.png' # Or use some GUID library to make a unique filename - scenario names are not  guaranteed to be unique.
 File.open(path, 'wb') {|io| io.write(png)}
 embed(path, 'image/png')

Obviously you have to make sure the relative path you pass to embed is right (depending on where you write the html itself)

[1] http://en.wikipedia.org/wiki/Data_URI_scheme

HTH, Aslak