I am executing my automation scenarios using SpecFlow with Visual Studio.
I want to Embed a custom image to the HTML report which was generated by SpecFlow. That image is a screenshot i am taking whenever scenario is failed in Hooks.
Please help me out.
This is what i am seeing in the html report - enter image description here
Take a look at the SeleniumWebTest sample project here. This sample project shows how to include a screenshot in your report. While the example is Selenium-based, the same principles apply to other frameworks.
A more in-depth explanation of how this works can be found here under "Including Screenshots". Essentially, you need to abuse the console and use it to output your images' file paths.
Any data written to the console is available in your report (this is how the trace details are received by the report). You will need to parse the data written to the console and strip out the file path you want to embed. Make sure that you strip the image path completely so that you don't output the file path as part of the other trace information received from the console.
Edit: I've since discovered that there seems to be an issue with the template in the sample project. The following section in the template is bugged:
class="log">@Raw(FormatTechMessages(traceEvent.TechMessages.TrimEnd()).Replace("SCREENSHOT[ <a href="http://specflow.org/plus/documentation/,-/" data-page=",-"<img width='1000' src=").Replace("</a> ]SCREENSHOT", "</img>"))</pre>
This is because the console no longer seems to be formatting the file as a hyperlink, so the replacement string is never found. Updating this line in ReportTemplate.cshtml seems to have done the trick:
<pre class="log">@Raw(FormatTechMessages(traceEvent.TechMessages.TrimEnd()).Replace("SCREENSHOT[ ", "<img width='1000' src=\"").Replace(" ]SCREENSHOT", "\"</img>"))</pre>
As the console is no longer formatting the file as a hyperlink, you only need to replace the padding (in this case the "SCREENSHOT[]SCREENSHOT") from the string and instead enclose the path with the <IMG> tag. You also need to add the quotes around the file path.
