Web应用程序样式和布局的回归测试 [英] Regression testing for styling and layout of web applications

问题描述

我意识到这是一项艰巨的任务，但是有没有一种方法可以对Web应用程序的样式和呈现的布局进行回归测试？

I realise this is a non-trivial task, but is there a way to regression test the styling and rendered layout of a web application?

我发现可以轻松实现单元化测试和回归测试功能，包括服务器端和客户端。

I've found it straightforward to unit test and regression test functionality, both server-side and client-side.

但是，我遇到的一个令人沮丧的问题是对CSS所做的更改，以解决一个会破坏布局和在其他页面上进行样式设置。我知道如何检测到这些错误的唯一方法是手动查看应用程序中的每个页面，并将其与我自己的期望进行比较，但是显然，当应用程序可以包含数十个页面时，这可能既麻烦又昂贵。有没有研究使用图像处理或其他技术来自动检测这类问题？

However, a frustrating issue I've run into are CSS changes made to fix one layout issue that break the layout and styling on a different page. The only way I know how to detect these is to manually view every page in an application, and compare it with my own expectations, but obviously this can be burdensome and expensive when an application can have dozens of pages. Has there been any research using image processing or other techniques to detect these kinds of problems automatically?

推荐答案

实际上，其中一个隐藏的问题Selenium的瑰宝是您可以使用它来捕获浏览器的屏幕截图。然后使用 查找差异中描述的技术在使用C＃ 的图像之间，您可以突出显示先前快照之间的差异。

Actually, one of the hidden gems of Selenium is that you can use it to take screen captures of the browser. Then using a technique as described in Find differences between images using C#, you can highlight the differences between previous snapshots.

此示例显示了如何获取首页的屏幕截图，然后创建差异图像。稍加修改，您就可以使用相同的技术来计算不同的像素。

This example shows how to grab a screenshot of the homepage and then create a difference image. With a little extra tinkering, you can use the same technique to count the pixels that are different.

[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 is a really interesting choice because it's cross-platform and cross-browser, meaning that you can capture screens of different browsers. You can use this technique to compare snapshots between builds or to compare between browsers.

这篇关于Web应用程序样式和布局的回归测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！