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

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

已邀请:

5 个回复

赐黄

实际上，Selenium隐藏的宝石之一就是你可以使用它来获取浏览器的屏幕截图。然后使用此处描述的技术（http://www.bryancook.net/2009/10/find-differences-between-images-c.html），您可以突出显示先前快照之间的差异。此示例显示如何抓取主页的屏幕截图，然后创建差异图像。通过一些额外的修补，您可以使用相同的技术来计算不同的像素。

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

眠皇

我想你可以在你的网络应用程序中生成每个页面的“理想”镜头，以作为参考。然后在css更新后生成每个页面的新镜头，并与之前的页面进行比较。如果您确保始终保持相同的分辨率等，那么1：1的比较应该没问题。您甚至可以这样做，以便您可以告诉它，如果页面不同，则其他页面实际上比示例“更好”，并使用“其他”作为下一次运行的示例。这样，当您修复某些内容时，您可以看到一个页面的差异，并将其标记为更好，然后在另一个页面上修复错误，同时确保您不会在第一时间内修复您尝试修复的错误。

亲奋漏

有一种方法可以使用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中的示例项目一起使用。同样，一次编写的测试可以在应用程序生命周期的多个阶段使用。

坛沤疲撑拆

如果您正在使用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

它提供了一种管理期望图像的机制。免责声明：我是宝石的作者。

哭木算

您应该查看Web一致性测试作为进行回归测试的方法。我们使用这些技术为Mogotest提供支持，Mogotest是一种用于进行自动视觉回归和跨浏览器测试的托管服务。自这个答案发布以来的几年里，我已经关闭了Mogotest服务。这里提到的是一个历史文物，表明这些技术被用于生产系统而不仅仅是学术饲料。

要回复问题请先登录或注册

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

5 个回复

发起人

regression_testing

问题状态

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

与内容相关的链接

5 个回复

发起人

regression_testing

问题状态