在现代软件开发流程中，自动化测试是确保软件质量的重要环节。Selenium 是一个流行的自动化测试工具，它能够模拟用户在浏览器上的操作，从而验证网页的功能是否正常。本文将介绍如何使用 Selenium 进行网页自动化测试，并结合ImageMagick进行视觉对比，以确保网页更新后的功能和视觉一致性。
ImageMagick是一个功能强大的图像处理库，它提供了丰富的图像处理功能。在本文中，将重点介绍它的比较功能。通过对比网页在不同状态下的截图，可以发现网页更新后可能存在的问题。
Selenium是一个用于自动化网页测试的工具，它可以独立使用，也可以嵌入到脚本中。通过 Selenium，可以模拟用户在浏览器上的操作，验证网页的功能是否正常。
ImageMagick 提供了多种图像处理功能，其中比较功能是在本文中将要使用的关键功能。通过对比网页在不同状态下的截图，可以发现网页更新后可能存在的问题。
VisualSmoke 解决方案是一个示例项目，它展示了如何使用Selenium和 ImageMagick 进行网页自动化测试和视觉对比。这个解决方案包括一个标准的 ASP.NET MVC Razor 2 项目，以及一个测试项目。
在 VisualSmoke.Web.Tests 项目中，设置了一些测试，以确保网页更新后的功能和视觉一致性。以下是测试的主要步骤：
在测试开始之前，需要设置测试环境。这包括设置要访问的 URL、截图的读写目录等。
public void SetupTest()
{
ActiveShots = ConfigurationManager.AppSettings["activeShotsPath"];
ApprovedShots = ConfigurationManager.AppSettings["approvedShotsPath"];
ErroredShots = ConfigurationManager.AppSettings["erroredShotsPath"];
DeltaShots = ConfigurationManager.AppSettings["deltaShotsPath"];
BaseDomain = string.Format("http://{0}/", ConfigurationManager.AppSettings["domain"]);
CompareDomain = string.Format("http://{0}/", ConfigurationManager.AppSettings["compareDomain"]);
PopulateUrls();
selenium = new DefaultSelenium("localhost", 4444, "*chrome", string.Format("http://{0}/", ConfigurationManager.AppSettings["domain"]));
selenium.Start();
verificationErrors = new StringBuilder();
}
从 ApprovedPages.txt 文件中读取要进行截图测试的页面列表。这个文件允许控制哪些页面需要进行测试，而无需为每个页面创建一个单独的测试。
private void PopulateUrls()
{
UrlList = new List();
const string file = "VisualSmoke.Web.Tests.Selenium.ApprovedPages.txt";
using (var tr = GetInputFile(file))
{
string line;
while ((line = tr.ReadLine()) != null)
{
var page = new Page();
page.Name = line;
if (line == "home")
{
page.ApprovedUrl = CompareDomain;
page.ActiveUrl = BaseDomain;
}
else
{
page.ApprovedUrl = CompareDomain + line;
page.ActiveUrl = BaseDomain + line;
}
UrlList.Add(page);
}
}
}
ScreenshotCompareTest 方法将捕获已批准页面的基线，以便进行比较。然后，它将遍历要测试的页面列表，并使用Selenium.CaptureEntirePageScreenshot 方法捕获并保存截图。接着，使用 CompareImage 方法比较捕获的图像与已批准的对应图像。
[Test]
public void ScreenshotCompareTest()
{
if (ConfigurationManager.AppSettings["baseline"] == "true")
{
CaptureApprovedPages();
}
foreach (var url in UrlList)
{
selenium.Open(url.ActiveUrl);
selenium.WaitForPageToLoad("30000");
selenium.CaptureEntirePageScreenshot(CaptureImagePath(url.Name), "");
var result = CompareImage(url.Name);
if (result != CompareResult.Match)
{
if (result == CompareResult.Error)
{
verificationErrors.AppendLine(url.Name + ": " + LastException.Message);
}
else
{
verificationErrors.AppendLine(url.Name + " did not match the approved screenshot. " + string.Format("{0}images/screenshots/delta/{1}.png", UrlList[0].ActiveUrl, url.Name));
}
}
}
}
当环境处于 QA 或业务用户批准的状态时，将 appSetting baseline 设置为 true。这将遍历 UrlList，捕获截图并将其保存到已批准的图像目录中。
private void CaptureApprovedPages()
{
foreach (var url in UrlList)
{
selenium.Open(url.ApprovedUrl);
selenium.CaptureEntirePageScreenshot(ApprovedImagePath(url.Name), "");
}
}
CompareImage 方法是执行 ImageMagick 工作以比较图像的主要方法。如果比较结果超出可接受范围，则将差异保存到 delta 文件夹中，以便在测试失败时由人工进行审查。
private CompareResult CompareImage(string name)
{
var activeImage = new MagickImage(CaptureImagePath(name));
var approvedImage = new MagickImage(ApprovedImagePath(name));
Assert.IsNotNull(activeImage);
Assert.IsNotNull(approvedImage);
var result = CompareResult.NoMatch;
try
{
using (var delta = new MagickImage())
{
var compareResult = activeImage.Compare(approvedImage, Metric.PeakAbsoluteError, delta);
if (compareResult < 0.9)
{
result = CompareResult.Match;
}
else
{
delta.Write(string.Format("{0}\\{1}.png", DeltaShots, name));
}
}
}
catch (Exception ex)
{
result = CompareResult.Error;
LastException = ex;
}
return result;
}