如何为SpecFlow失败测试在LivingDoc报告中添加PlayWright截图？

问题根源分析 #

你的代码能保存截图但无法在LivingDoc显示，主要有几个核心问题：

• 本地路径访问限制：file://协议指向的本地文件，在LivingDoc以网页形式打开时会被浏览器安全策略拦截，无法加载。
• 文件名重复覆盖：所有失败场景共用同一个Screenshot.png，后续截图会覆盖之前的，导致报告中仅能看到最后一张截图。
• 状态判断不严谨：用字符串比较ScenarioExecutionStatus易出现拼写错误，应该直接使用枚举值。

修正后的代码 #

using System;
using System.IO;
using TechTalk.SpecFlow;
using Microsoft.Playwright;

[Binding]
public class Hooks
{
    private readonly IPage _page;
    private readonly ScenarioContext _scenarioContext;

    public Hooks(IPage page, ScenarioContext scenarioContext)
    {
        _page = page;
        _scenarioContext = scenarioContext;
    }

    [AfterScenario]
    public async Task AfterScenario()
    {
        // 直接用枚举判断失败状态，覆盖所有失败场景
        if (_scenarioContext.ScenarioExecutionStatus == ScenarioExecutionStatus.TestError ||
            _scenarioContext.ScenarioExecutionStatus == ScenarioExecutionStatus.TestFailed)
        {
            // 生成唯一截图文件名，避免覆盖
            string scenarioName = _scenarioContext.ScenarioInfo.Title.Replace(" ", "_").Replace("/", "_");
            string timestamp = DateTime.Now.ToString("yyyyMMddHHmmssfff");
            string screenshotFileName = $"Screenshot_{scenarioName}_{timestamp}.png";
            string screenshotPath = Path.Combine(Directory.GetCurrentDirectory(), "Screenshots", screenshotFileName);

            // 确保截图目录存在
            Directory.CreateDirectory(Path.GetDirectoryName(screenshotPath));

            // 保存截图到指定路径
            await _page.ScreenshotAsync(new PageScreenshotOptions()
            {
                Path = screenshotPath,
                FullPage = true,
            });

            // 将截图转为Base64嵌入报告，绕过本地文件访问限制
            var screenshotBytes = File.ReadAllBytes(screenshotPath);
            string base64Screenshot = Convert.ToBase64String(screenshotBytes);
            Console.WriteLine($"SCREENSHOT[ data:image/png;base64,{base64Screenshot} ]SCREENSHOT");
        }
    }
}

关键修改说明 #

• 枚举判断状态：替换字符串比较为ScenarioExecutionStatus枚举值，同时覆盖TestError和TestFailed两种失败情况，逻辑更严谨。
• 唯一文件名：结合场景名称和时间戳生成文件名，彻底解决截图覆盖问题。
• Base64嵌入截图：将图片转为Base64编码后直接写入报告标记，避免本地路径的访问限制，确保LivingDoc能直接渲染图片。
• 独立目录管理：创建专门的Screenshots目录存放截图，便于后续文件管理。

内容的提问来源于stack exchange，提问作者Jawad_Nazir