Web应用程序的样式和布局的回归测试 [英] Regression Testing for Styling and Layout of Web Apps

问题描述

我意识到这是一个非平凡的任务，但是有什么方法来回归测试的web应用程序的样式和呈现的布局吗？我发现它直接的单位测试和回归测试功能，服务器端和客户端。然而，我遇到的一个令人沮丧的问题是CSS修改，以修复一个布局问题，打破布局和样式在不同的页面。我知道如何检测这些的唯一方法是手动查看应用程序中的每个页面，并将其与我自己的期望进行比较，但显然，当应用程序可以有几十页的时候，这可能是繁重和昂贵的。有没有任何研究使用图像处理或其他技术来自动检测这些问题？

I realise this is a non-trivial task, but is there any way to regression test the styling and rendered layout of a web application? I've found it straight-forward to unittest and regression test functionality, both server-side and client-side. 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的宝石是，你可以使用它来捕获浏览器的屏幕捕获。然后使用此处所述的技术（ http：// www .bryancook.net / 2009/10 / find-differences-between-images-c.html ），您可以突出显示之前快照之间的差异。

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 here (http://www.bryancook.net/2009/10/find-differences-between-images-c.html) 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是一个非常有趣的选择，因为它是跨平台和跨浏览器，意味着你可以捕获不同浏览器的屏幕。您可以使用此技术来比较版本之间的快照或在浏览器之间进行比较。

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屋！