3

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)?

Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50
LeeWay
  • 793
  • 3
  • 16
  • 28
  • 1
    Not sure I fully understand. You have the ability to save the images where ever you like....how are you saving them now? (Please show us the code). – Arran Aug 29 '13 at 14:07
  • 2
    The images are saved in a file: `bitmap.Save(filename + ".jpg", ImageFormat.Jpeg);` using this suggestions [C# - Capture screenshot of active window](http://stackoverflow.com/questions/1163761/c-sharp-capture-screenshot-of-active-window). I would like to save these images (`bitmap`) directly into the report (it's autogenerated by SpecRun). – LeeWay Aug 29 '13 at 14:17

3 Answers3

13

(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);
        }
    }
Gaspar Nagy
  • 4,422
  • 30
  • 42
  • 1
    Thanks for the code. For some reason, the report generated only shows the path in the html file. Any idea why? – Shambu Jul 15 '14 at 14:17
  • This won't work in a multi-threaded test run, any tips on making that work? – BradLaney May 20 '16 at 19:29
  • This wasn't working for me until I tried Specflow+. Thanks for your answer but, if a feature is only available in the paid version, then please let us know about it. – Fabio Milheiro Oct 28 '16 at 13:47
  • That said, such a transparent feature virtually impossible to debug is, in my opinion, badly designed. I got this working but I will start chasing getting this working with better output using custom execution reports which is also supported only in the paid version. Anyway, thanks for taking the time to provide an answer. – Fabio Milheiro Oct 28 '16 at 13:48
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.

Navin
  • 273
  • 3
  • 15
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");
Michał Dutkowski
  • 21
  • 3