无额外依赖下，如何用Playwright .NET测试页面图片？

针对你的需求，以下是Playwright for .NET中无需额外依赖的图片测试方案，以demoqa的broken页面为例：

1. 检查<img>标签的src字段是否正确 #

直接定位图片元素，获取其src属性并与预期值对比，这是最基础的验证方式：

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync();
await page.GotoAsync("https://demoqa.com/broken");

// 定位目标图片元素（示例为页面中的正常图片）
var targetImg = page.Locator("img[alt='Toolsqa image']");
// 获取实际src属性值
var actualSrc = await targetImg.GetAttributeAsync("src");

// 断言：对比相对路径或绝对路径
// 若需验证绝对路径，可结合page.Url拼接相对路径
var expectedAbsoluteSrc = new Uri(new Uri(page.Url), "/images/Toolsqa.jpg").ToString();
Assert.AreEqual(expectedAbsoluteSrc, actualSrc);

2. 验证图片是否成功加载 #

通过DOM API判断图片是否真实加载完成（加载失败的图片naturalWidth会为0）：

await targetImg.WaitForAsync(new LocatorWaitForOptions { State = WaitForSelectorState.Attached });
// 执行JS获取图片的naturalWidth属性
var naturalWidth = await targetImg.EvaluateAsync<int>("img => img.naturalWidth");
// 加载成功的图片宽度大于0
Assert.IsTrue(naturalWidth > 0, "图片加载失败");

针对broken页面中的损坏图片，此断言会触发失败，正好符合测试需求。

3. 内置视觉对比（无需额外依赖） #

Playwright .NET自带Snapshot Assertions功能，可对页面或单个图片元素做视觉校验，无需引入第三方图片对比库：

using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true });
// 初始化上下文时可配置视觉对比相关参数
var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
    ViewportSize = new ViewportSize { Width = 1920, Height = 1080 }, // 固定分辨率避免差异
});
var page = await context.NewPageAsync();
await page.GotoAsync("https://demoqa.com/broken");

// 对整个页面做视觉对比（首次运行生成基准图，后续对比）
await page.AssertThat().ScreenshotAsync().MatchesSnapshot("broken-page-baseline.png");

// 仅对单个图片元素做视觉对比
await targetImg.AssertThat().ScreenshotAsync().MatchesSnapshot("valid-image-baseline.png");

首次运行会在项目目录生成基准截图，后续测试会自动与基准图对比，差异超过默认阈值（可配置）时断言失败。注意需保持测试环境一致（浏览器版本、系统分辨率等），避免无意义的差异。

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