如何在Selenium C#中给截取的网页截图添加当前页面URL？

目前有两种成熟可靠的落地方案，可根据你的项目环境选择：

方案1：截图后叠加绘制URL（推荐，无页面侵入） #

核心逻辑是先通过Selenium拿到原始截图，再用.NET内置的图像处理能力把URL文本绘制到截图固定位置，不会修改页面原有DOM，稳定性最高。
需依赖NuGet包：Selenium.WebDriver、System.Drawing.Common（.NET Framework自带，.NET Core/.NET 5+ 需手动安装）

示例代码如下：

using OpenQA.Selenium;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public void TakeScreenshotWithUrl(IWebDriver driver, string saveFilePath)
{
    // 1. 获取Selenium原始截图
    Screenshot rawScreenshot = ((ITakesScreenshot)driver).GetScreenshot();
    
    using var memoryStream = new MemoryStream(rawScreenshot.AsByteArray);
    using var bitmap = new Bitmap(memoryStream);
    using var graphics = Graphics.FromImage(bitmap);

    // 2. 自定义文本样式，可按需调整字体、大小、颜色
    var textFont = new Font("微软雅黑", 12, FontStyle.Regular);
    var textBrush = new SolidBrush(Color.Black);
    // 半透明白色背景，避免URL和页面内容混叠看不清
    var backgroundBrush = new SolidBrush(Color.FromArgb(180, Color.White));
    string urlContent = $"页面URL：{driver.Url}";

    // 计算文本尺寸，预留内边距
    SizeF textSize = graphics.MeasureString(urlContent, textFont);
    const float padding = 6;
    var backgroundArea = new RectangleF(0, 0, textSize.Width + padding * 2, textSize.Height + padding * 2);

    // 3. 绘制背景和URL文本，默认放在截图左上角
    graphics.FillRectangle(backgroundBrush, backgroundArea);
    graphics.DrawString(urlContent, textFont, textBrush, padding, padding);

    // 4. 保存处理后的截图
    bitmap.Save(saveFilePath, ImageFormat.Png);
}

方案2：注入临时DOM元素展示URL后截图 #

适合不想引入图像处理依赖、需要跨平台部署的场景，核心逻辑是临时在页面插入URL展示元素，截图完成后立即删除元素恢复页面原状。
无需额外依赖Selenium之外的NuGet包。

示例代码如下：

using OpenQA.Selenium;

public void TakeScreenshotWithInjectedUrl(IWebDriver driver, string saveFilePath)
{
    const string TEMP_BANNER_ID = "auto_test_url_banner";
    try
    {
        // 注入固定定位的URL展示横幅
        string injectScript = $@"
            const urlBanner = document.createElement('div');
            urlBanner.id = '{TEMP_BANNER_ID}';
            urlBanner.innerText = '页面URL：' + window.location.href;
            urlBanner.style.cssText = 'position:fixed;top:0;left:0;width:100%;background:rgba(255,255,255,0.9);color:#000;padding:8px 15px;font-size:14px;z-index:999999;font-family:微软雅黑;box-sizing:border-box;';
            document.body.appendChild(urlBanner);
            // 给页面顶部预留空间，避免横幅遮挡原有页面内容，不需要可删除下一行
            document.body.style.paddingTop = urlBanner.offsetHeight + 'px';
        ";
        ((IJavaScriptExecutor)driver).ExecuteScript(injectScript);

        // 执行截图
        Screenshot screenshot = ((ITakesScreenshot)driver).GetScreenshot();
        screenshot.SaveAsFile(saveFilePath, ScreenshotImageFormat.Png);
    }
    finally
    {
        // 清理注入的元素，恢复页面原始状态
        string clearScript = $@"
            const banner = document.getElementById('{TEMP_BANNER_ID}');
            if(banner) {{
                banner.remove();
                document.body.style.paddingTop = '0';
            }}
        ";
        ((IJavaScriptExecutor)driver).ExecuteScript(clearScript);
    }
}

注意事项 #

• 方案1在Linux/macOS环境下运行时，需要先安装系统依赖：Linux执行apt install libgdiplus，macOS执行brew install mono-libgdiplus
• 可以根据需求调整URL的绘制/注入位置，比如放在截图底部避免遮挡页面核心内容
• 文本的字体、大小、背景透明度都可以根据测试页面的风格自行调整，保证URL可读性即可

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