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

Answer 2

有一种方法可以使用 Galen Framework 测试 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 上的示例项目一起使用。

同样，编写一次的测试可以在应用程序生命周期的多个阶段使用。

Answer 3

我想您可以生成网络应用程序中每个页面的“理想”镜头以用作参考。

然后在 CSS 更新后生成每个页面的新镜头，并与之前的页面进行比较。如果您确保始终保持相同的分辨率等，则 1:1 比较应该没问题。

您甚至可以这样做，以便您可以告诉它，如果页面不同，则另一个页面实际上比示例“更好”，并且使用“其他”作为接下来运行的示例。

这样，当您修复某些内容时，您可以看到一个页面的差异，并将其标记为更好，然后修复另一个页面上的错误，同时确保您不会回归最初尝试修复的错误。

Answer 4

您应该查看网络一致性测试作为进行回归测试的方法。

Answer 5

如果您使用 Ruby 进行开发，请查看 rspec-page-regression宝石。它是一个 RSpec 插件，可让您将请求的页面快照与预期图像进行比较。它与 Poltergeist 配合使用，这是一个 Capybara 驱动程序，使用 PhantomJS 并支持渲染页面快照。

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

，并且它提供了一种管理期望图像的机制。

免责声明：我是宝石的作者。