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

Question

我意识到这是一个非常重要的任务,但有没有办法回归测试Web应用程序的样式和渲染布局？我发现它可以直接进行单元测试和回归测试功能,包括服务器端和客户端.然而,我遇到的一个令人沮丧的问题是CSS更改,修复了一个布局问题,打破了不同页面上的布局和样式.我知道如何检测这些内容的唯一方法是手动查看应用程序中的每个页面,并将其与我自己的期望进行比较,但显然当应用程序可以包含数十页时,这可能会非常繁琐且昂贵.是否有任何研究使用图像处理或其他技术自动检测这些类型的问题？

Answer 1

实际上，Selenium 的隐藏瑰宝之一是您可以使用它来捕获浏览器的屏幕截图。然后，使用使用 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 是一个非常有趣的选择，因为它是跨平台和跨浏览器的，这意味着您可以捕获不同浏览器的屏幕。您可以使用此技术来比较构建之间的快照或浏览器之间的比较。