我意识到这是一项非常重要的任务，但有没有办法对 Web 应用程序的样式和渲染布局进行回归测试？
我发现服务器端和客户端的单元测试和回归测试功能都很简单。
但是，我遇到的一个令人沮丧的问题是，为了解决一个布局问题而进行的 CSS 更改会破坏不同页面上的布局和样式。我知道如何检测这些的唯一方法是手动查看应用程序中的每个页面，并将其与我自己的期望进行比较，但显然，当应用程序可能有几十个页面时，这可能会很麻烦而且成本很高。是否有任何研究使用图像处理或其他技术来自动检测此类问题？
【问题讨论】：
标签： css unit-testing regression-testing
实际上，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 是一个非常有趣的选择，因为它是跨平台和跨浏览器的，这意味着您可以捕获不同浏览器的屏幕。您可以使用此技术来比较构建之间的快照或在浏览器之间进行比较。
【讨论】：
有一种方法可以使用 Galen 框架测试 Web 应用程序的布局。这个工具有自己的语言，非常容易学习和理解。它是基于 Selenium 的，如果您想在不同的浏览器中测试您的应用程序，您可以在 Selenium Grid (Sauce Labs) 中运行测试。
此工具获取页面上指定元素的位置并检查它们之间的相对关系。
示例：如果您想检查菜单窗格是否位于标题下方并延伸到浏览器的宽度并且高度为 50 像素，您可以这样做：
menu
below: header 5px
width: 100% of screen/width
height: 50px
此工具还可用于测试响应式设计。
您可以在官方网站http://galenframework.com找到完整的文档。
最好的部分是您甚至可以创建 Java 测试。 Galen JavaScript API 也与 GitHub 上的示例项目一起提供。
同样，一次编写的测试可用于应用程序生命周期的多个阶段。
【讨论】：
我想您可以为您的网络应用程序中的每个页面生成一个“理想”的照片以用作参考。
然后在 CSS 更新后为每个页面生成一个新镜头，并与之前的页面进行比较。如果您确保始终保持相同的分辨率等，则应该可以进行 1:1 比较。
你甚至可以让它告诉它，如果页面不同，另一个页面实际上比示例“更好”，并使用“其他”作为下一次运行的示例。
这样，当您修复某些问题时，您可以看到一个页面的差异，并将其标记为更好，然后在另一个页面上修复错误，同时确保您不会退回您尝试修复的错误第一名。
【讨论】：
您应该查看Web Consistency Testing 作为进行回归测试的一种方法。
【讨论】：
如果您使用 Ruby 进行开发，请查看 rspec-page-regression gem。这是一个RSpec 插件，可让您将请求的页面快照与预期图像进行比较。它适用于Poltergeist，这是一个使用PhantomJS 并支持渲染页面快照的Capybara 驱动程序。
Rspec-page-regression 提供了一个 RSPec 匹配器，可让您执行以下操作
context "user page" do
before(:each) do
visit user_path
end
it { page.should match_expected }
context "popup help" do
before(:each) do
click_button "Help"
end
it { page.should match_expected }
end
end
并且它提供了一种管理期望图像的机制。
免责声明：我是 gem 的作者。
【讨论】：