11

我意识到这是一项非常重要的任务，但是有没有办法对 Web 应用程序的样式和渲染布局进行回归测试？

我发现对服务器端和客户端的单元测试和回归测试功能很简单。

但是，我遇到的一个令人沮丧的问题是，为了解决一个布局问题而进行的 CSS 更改会破坏不同页面上的布局和样式。我知道如何检测这些的唯一方法是手动查看应用程序中的每个页面，并将其与我自己的预期进行比较，但显然，当应用程序可能有几十个页面时，这可能会很麻烦而且成本很高。是否有使用图像处理或其他技术自动检测此类问题的研究？

4

5 回答 5

2

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

于 2011-03-01T03:43:52.890 回答
2

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

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

于 2015-01-21T12:13:37.823 回答
1

我想您可以为您的 Web 应用程序中的每个页面生成一个“理想”的照片以用作参考。

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

你甚至可以让它告诉它，如果页面不同，另一个页面实际上比示例“更好”，并使用“其他”作为下一次运行的示例。

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

于 2011-02-28T15:51:56.710 回答
0

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

于 2013-01-22T20:44:08.817 回答
0

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

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

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

于 2013-03-18T14:51:54.227 回答