Insert screenshots in SpecRun/SpecFlow test execution reports

Question

I'm using SpecFlow with Selenium WebDriver and SpecRun as test runner to create and execute automated test cases and I'm looking for a solution to insert screenshots in the test execution report.

I wrote a method to create screenshots after every Assert function. The images are saved to a specific location, but when I make the result analysis I have to follow the report and the images as well. It would be nice to have them in the same location (precisely in the report html).

Is there any way to perform this (something similar to Console outputs)?

Answer 1

(reposting from https://groups.google.com/forum/#!topic/specrun/8-G0TgOBUbY)

Yes, this is possible. You have to do the following steps:

1. save the screenshot to the output folder (this is the current working folder where the tests are running).
2. Write out a file line to the console from the test: Console.WriteLine("file:///C:\fullpath-of-the-file.png");
3. Make sure that the generated images are also saved on the build server as artifacts

During the report generation, SpecRun scans the test output for such file URLs and convert them to anchor tags with relative path, so that these will work wherever you distribute your report file (as long as the images are next to it). You can of course tup the images to a subfolder as well.

Here is a code snippet that works with Selenium WebDriver. This also saves the HTML source together with the screenshot.

    [AfterScenario]
    public void AfterWebTest()
    {
        if (ScenarioContext.Current.TestError != null)
        {
            TakeScreenshot(cachedWebDriver);
        }
    }

    private void TakeScreenshot(IWebDriver driver)
    {
        try
        {
            string fileNameBase = string.Format("error_{0}_{1}_{2}",
                                                FeatureContext.Current.FeatureInfo.Title.ToIdentifier(),
                                                ScenarioContext.Current.ScenarioInfo.Title.ToIdentifier(),
                                                DateTime.Now.ToString("yyyyMMdd_HHmmss"));

            var artifactDirectory = Path.Combine(Directory.GetCurrentDirectory(), "testresults");
            if (!Directory.Exists(artifactDirectory))
                Directory.CreateDirectory(artifactDirectory);

            string pageSource = driver.PageSource;
            string sourceFilePath = Path.Combine(artifactDirectory, fileNameBase + "_source.html");
            File.WriteAllText(sourceFilePath, pageSource, Encoding.UTF8);
            Console.WriteLine("Page source: {0}", new Uri(sourceFilePath));

            ITakesScreenshot takesScreenshot = driver as ITakesScreenshot;

            if (takesScreenshot != null)
            {
                var screenshot = takesScreenshot.GetScreenshot();

                string screenshotFilePath = Path.Combine(artifactDirectory, fileNameBase + "_screenshot.png");

                screenshot.SaveAsFile(screenshotFilePath, ImageFormat.Png);

                Console.WriteLine("Screenshot: {0}", new Uri(screenshotFilePath));
            }
        }
        catch(Exception ex)
        {
            Console.WriteLine("Error while taking screenshot: {0}", ex);
        }
    }

Answer 2

I encountered today exactly the same problem

using the Screenshot method with "[" sign was destroying the template additionally I had to use ' and " respectively for template to work, and in My case the final template code looked :

<pre class="log">@Raw(FormatTechMessages(traceEvent.TechMessages.TrimEnd()).Replace("SCREENSHOTXX", "<img width=50% src='").Replace("XXSCREENSHOT", "'>"))</pre>

And the code in class:

Console.WriteLine($"SCREENSHOTXX {tempFileName} XXSCREENSHOT");

Answer 3

Even though this post is 3 years old it did help me and I have found how to embed the image directly into the HTML report instead of just showing as link, eliminating the need to open the image one by one from the report.

I thought this will be useful to others as well. This is done by updating the default report template. Please refer to "Including Screenshots" section at Tutorial:-Customising-Reports. I followed the same but I had few issues. I fixed them by fixing the line in Report template as <pre class="log">@Raw(FormatTechMessages(traceEvent.TechMessages.TrimEnd()).Replace("SCREENSHOT[ <a href=","<img width=100% src=").Replace("</a> ]SCREENSHOT", "</img>"))</pre>

I have updated the width of the the image to 100% as this will fit the image within the cell.

Hope fully this helps.