css - Web 应用程序样式和布局的回归测试

Question

我意识到这是一项非常重要的任务，但是有没有办法对 Web 应用程序的样式和渲染布局进行回归测试？

我发现服务器端和客户端的单元测试和回归测试功能都很简单。

但是，我遇到的一个令人沮丧的问题是为修复一个布局问题而进行的 CSS 更改会破坏不同页面上的布局和样式。我知道如何检测这些的唯一方法是手动查看应用程序中的每个页面，并将其与我自己的期望进行比较，但显然当应用程序可以有几十个页面时，这可能会很麻烦且代价高昂。是否有研究使用图像处理或其他技术来自动检测此类问题？

Answer 1

实际上，Selenium 隐藏的瑰宝之一是您可以使用它来获取浏览器的屏幕截图。然后使用 Find differences between images using C# 中描述的技术，您可以突出显示之前快照之间的差异。

这个例子展示了如何抓取主页的屏幕截图，然后创建一个差异图像。通过一些额外的修改，您可以使用相同的技术来计算不同的像素。

[Test]
public void CompareHomePageToPrevious()
{
    string fileName = Path.Combine(Environment.CurrentDirectory, "homepage.bmp");
    var selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://mywebsite");
    selenium.Start();
    selenium.Open("/");
    selenium.CaptureEntirePageScreenshot(fileName, "");

    // Load current and previous captures
    var current  = new Bitmap(filename);
    var previous = new Bitmap(_previousHomepageImage);

    // Find all pixels that are the same and make them pink
    Bitmap diff = ImageTool.GetDifferenceImage(current,previous,Color.Pink);
    diff.MakeTransparent(Color.Pink);

    // Save the image for viewing
    // or count the number of different
}

Selenium 是一个非常有趣的选择，因为它是跨平台和跨浏览器的，这意味着您可以捕获不同浏览器的屏幕。您可以使用此技术来比较构建之间的快照或浏览器之间的比较。