在 SpecRun/SpecFlow 测试执行报告中插入屏幕截图答案

【问题标题】：Insert screenshots in SpecRun/SpecFlow test execution reports在 SpecRun/SpecFlow 测试执行报告中插入屏幕截图
【发布时间】：2013-09-02 00:04:50
【问题描述】：

我使用 SpecFlow 与 Selenium WebDriver 和 SpecRun 作为测试运行程序来创建和执行自动化测试用例，我正在寻找在测试执行报告中插入屏幕截图的解决方案。

我写了一个在每个Assert 函数之后创建屏幕截图的方法。图像被保存到特定位置，但是当我进行结果分析时，我必须同时关注报告和图像。将它们放在同一个位置会很好（准确地在报告 html 中）。

有没有办法执行此操作（类似于控制台输出）？

【问题讨论】：

不确定我是否完全理解。您可以将图像保存在您喜欢的任何地方....您现在如何保存它们？（请向我们展示代码）。
图像保存在文件中：bitmap.Save(filename + ".jpg", ImageFormat.Jpeg); 使用此建议 C# - Capture screenshot of active window。我想将这些图像 (bitmap) 直接保存到报告中（由 SpecRun 自动生成）。

标签： c# selenium specflow test-reporting specrun

【解决方案1】：

（转自https://groups.google.com/forum/#!topic/specrun/8-G0TgOBUbY）

是的，这是可能的。您必须执行以下步骤：

将屏幕截图保存到输出文件夹（这是运行测试的当前工作文件夹）。
从测试中向控制台写出一行文件：Console.WriteLine("file:///C:\fullpath-of-the-file.png");
确保生成的图像也作为工件保存在构建服务器上

在报告生成期间，SpecRun 扫描测试输出以查找此类文件 URL，并将它们转换为具有相对路径的锚标记，以便无论您在何处分发报告文件（只要图像在它旁边），这些标记都可以工作。当然，您也可以将图像添加到子文件夹中。

这是一个与 Selenium WebDriver 一起工作的代码 sn-p。这也将 HTML 源代码与屏幕截图一起保存。

    [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);
        }
    }

【讨论】：

感谢您的代码。由于某种原因，生成的报告仅显示 html 文件中的路径。知道为什么吗？
这在多线程测试运行中不起作用，有什么提示吗？
在我尝试 Specflow+ 之前，这对我不起作用。感谢您的回答，但如果某项功能仅在付费版本中可用，请告知我们。
也就是说，在我看来，这样一个几乎无法调试的透明功能设计得很糟糕。我得到了这个工作，但我将开始使用自定义执行报告来追求更好的输出，这也仅在付费版本中受支持。无论如何，感谢您花时间提供答案。

【解决方案2】：

尽管这篇文章已有 3 年的历史，但它确实对我有所帮助，而且我发现了如何将图像直接嵌入 HTML 报告中，而不是仅仅显示为链接，从而无需从报告中一一打开图像。

我认为这对其他人也有用。这是通过更新默认报告模板来完成的。请参阅Tutorial:-Customising-Reports 的“包括截图”部分。我也遵循同样的方法，但几乎没有问题。我通过将报告模板中的行修复为 <pre class="log">@Raw(FormatTechMessages(traceEvent.TechMessages.TrimEnd()).Replace("SCREENSHOT[ <a href=","<img width=100% src=").Replace("</a> ]SCREENSHOT", "</img>"))</pre>

我已将图像的宽度更新为 100%，因为这将适合单元格内的图像。

希望这会有所帮助。

【讨论】：

太棒了，谢谢。批准的答案肯定有效，但我真的很想嵌入图像。

【解决方案3】：

我今天遇到了完全相同的问题

使用带有“[”符号的 Screenshot 方法会破坏模板，另外我必须分别使用 ' 和

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

以及类中的代码：

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

【讨论】：