如何使用C#与Selenium WebDriver实现图片对比以优化测试？

嘿，这个需求我在自动化测试里经常碰到，用C#结合Selenium做图片对比来判断是否继续执行后续流程，完全是可行的。下面我给你分享几个实操性强的方案，附带代码示例，你直接改改就能用：

方案一：用.NET原生System.Drawing类做像素级对比 #

这个方案不用额外加第三方库，适合简单的对比场景。核心思路就是先通过Selenium拿到两张截图（比如基准图和当前页面/元素截图），然后逐像素对比，还能设置误差容忍度。

先写Selenium截图的代码：

// 引用必要命名空间
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System.Drawing;

// 初始化Driver并截图
IWebDriver driver = new ChromeDriver();
driver.Navigate().GoToUrl("你的目标页面URL");

// 固定窗口尺寸，避免截图大小不一致
driver.Manage().Window.Size = new Size(1920, 1080);

// 全页截图（也可以定位元素后用元素的GetScreenshot方法）
Screenshot fullPageScreenshot = ((ITakesScreenshot)driver).GetScreenshot();
fullPageScreenshot.SaveAsFile(@"C:\test\current_screenshot.png", ScreenshotImageFormat.Png);

// 加载本地的基准图
Bitmap baselineBitmap = new Bitmap(@"C:\test\baseline_screenshot.png");
Bitmap currentBitmap = new Bitmap(@"C:\test\current_screenshot.png");

然后是对比逻辑：

bool AreImagesEqual(Bitmap img1, Bitmap img2)
{
    // 尺寸不一样直接返回不一致
    if (img1.Size != img2.Size)
        return false;

    // 允许少量像素差异（比如页面微小的动态变化）
    int pixelDifferenceCount = 0;
    int maxAllowedDifferences = 10;

    for (int x = 0; x < img1.Width; x++)
    {
        for (int y = 0; y < img1.Height; y++)
        {
            Color pixel1 = img1.GetPixel(x, y);
            Color pixel2 = img2.GetPixel(x, y);

            if (pixel1.R != pixel2.R || pixel1.G != pixel2.G || pixel1.B != pixel2.B)
            {
                pixelDifferenceCount++;
                if (pixelDifferenceCount > maxAllowedDifferences)
                    return false;
            }
        }
    }

    return pixelDifferenceCount <= maxAllowedDifferences;
}

// 调用对比方法，判断是否继续执行
bool isMatch = AreImagesEqual(baselineBitmap, currentBitmap);
if (isMatch)
{
    Console.WriteLine("两张图片一致，继续执行后续测试操作");
    // 这里写你的后续逻辑：点击按钮、填写表单等
}
else
{
    Console.WriteLine("两张图片不一致，终止流程或记录异常");
    // 可以抛出异常、截图保存差异图或者写入日志
}

方案二：用ImageSharp库做高效对比（推荐） #

如果图片比较大，逐像素对比效率太低，或者需要更灵活的对比规则，推荐用ImageSharp这个.NET图像处理库，性能更好，API也更简洁。

首先通过NuGet安装：Install-Package SixLabors.ImageSharp

然后是代码示例：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;

bool CompareImagesWithImageSharp(string baselinePath, string currentPath, float threshold = 0.01f)
{
    using (Image<Rgba32> baseline = Image.Load<Rgba32>(baselinePath))
    using (Image<Rgba32> current = Image.Load<Rgba32>(currentPath))
    {
        // 先检查尺寸是否一致
        if (baseline.Width != current.Width || baseline.Height != current.Height)
            return false;

        float totalPixels = baseline.Width * baseline.Height;
        float differentPixels = 0;

        // 按行对比像素，比逐像素遍历更高效
        for (int y = 0; y < baseline.Height; y++)
        {
            Span<Rgba32> baselineRow = baseline.GetPixelRowSpan(y);
            Span<Rgba32> currentRow = current.GetPixelRowSpan(y);

            for (int x = 0; x < baseline.Width; x++)
            {
                if (!baselineRow[x].Equals(currentRow[x]))
                {
                    differentPixels++;
                }
            }
        }

        // 计算差异比例，小于阈值则认为一致
        float differenceRatio = differentPixels / totalPixels;
        return differenceRatio <= threshold;
    }
}

// 调用方法
bool isMatch = CompareImagesWithImageSharp(@"C:\test\baseline_screenshot.png", @"C:\test\current_screenshot.png");
if (isMatch)
{
    // 继续后续测试流程
}

几个关键注意事项 #

• 截图一致性：一定要固定浏览器窗口尺寸，避免因为窗口大小不同导致截图差异。
• 动态元素处理：如果页面有加载动画、广告这类动态元素，要等元素完全稳定后再截图，比如用Selenium的显式等待：

  WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
  wait.Until(d => d.FindElement(By.Id("stable-element-id")).Displayed);
  

• 基准图维护：基准图要在页面稳定、无干扰的状态下生成，页面迭代后记得及时更新基准图。

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