follow me icons

Monday, September 27, 2010

Adding Screenshot in cucumber html report

Cucumber has provided us a nice way to generate an HTML test report. We can simply run cucumber using the "-f html -out filename" to output the test result into the nicely formatted html report. It would be nice, however, to also automatically embed the failed scenario screenshot into the report as well. This is very useful if you want to run cucumber test in Hudson where you don't monitor how the test run and the log report is sometime not enough to determine whether the error is from the code or from a server error.

In the previous post about screenshot capture using capybara and webdriver, I have put the code on how to capture the screenshot by utilising the "After" hook method in cucumber. This time we will use the after hook as well as the at_exit method.


After do |scenario|

#need to write as a byte instead of IP#puts
if scenario.failed?
name = scenario.name.gsub!(' ', '').gsub!(/[\?\.\&=\-\/\\\(\),\'\"\|]/, '')
File.open("./build/publish/screenshots/#{name}.jpeg", 'wb') do |f|
f.write(Base64.decode64(page.driver.browser.screenshot_as(:base64)))
end
raise "lessthanimg src='screenshots/#{name}.jpeg' /greaterthan"
end
end


Notice that I have to deliberately raise an error in the code so that the img src code is thrown into the html report. Using the usual ruby "puts" will only print it to the console and not the report. I use the scenario.name for the file name and I have to replace the special characters into empty string to create a valid file name.

The other issues that I encountered is that cucumber actually converts "<" and ">" into "&lt" and "&gt". Therefore I have to replace it with "lessthanimg" and "/greaterthan".

That is why I have the "at_exit" code which is to replace the "lessthanimg" and "greaterthan" tags into "<" and ">".


at_exit do
ARGV.each do |a|
if a =~ /\.htm(l)?/
file = File.open(a, 'r')
new_file = ""
while (line = file.gets)
if line.match(/\lessthan/) and line.match(/greaterthan\<\/pre\>/)
new_file = new_file + line.gsub!(/\lessthan/, "<").gsub!(/greaterthan\<\/pre\>/, ">")
else
new_file = new_file + line
end
end
file.close

File.open(a, "w") do |f|
f.write(new_file)
end
end
end
end
I am sure that there should be an easier way to do this. But for now, I can only find this solution. Please feel free to add comments if someone has found an easier and more elegant way for this.

4 comments:

  1. Hi

    It shows the screenshot in html output but after that it shows this message as well


    f.write(Base64.decode64(page.driver.browser.screenshot_as(:base64)))
    end
    raise "lessthanimg src='support/patches/screenshots/#{name}.jpeg' /greaterthan"
    end
    end

    Suggest anything.

    Thanks
    M

    ReplyDelete
  2. Hi Muhammad,

    I get that one as well and ignore it. I need to raise the error message to embed the screen shot into the html report. Let me know if you can find a better way to do it.

    BA

    ReplyDelete
  3. Hi Ban,

    I want to take screenshot in HTML output after each scenario either pass or fail.

    Is it possible I can take screenshot after each line of a scenario.

    Thanks
    M

    ReplyDelete
  4. You can use the AfterStep Cucumber hook instead of the AfterDo Steps. If you want to capture the screenshot after every steps regardless the steps fail or not then you just need to delete the "scenario.failed?" statement and it will take the screenshot after every steps.

    To find more information about cucumber hooks please go to this site:

    https://github.com/aslakhellesoy/cucumber/wiki/Hooks

    ReplyDelete