如何测试正确渲染的东西？答案

【问题标题】：How to test something rendered correctly?如何测试正确渲染的东西？
【发布时间】：2009-11-16 12:53:23
【问题描述】：

如何测试应用程序是否正确呈现某些内容？

例如（2D 示例）：

Microsoft Word 2007 http://img32.imageshack.us/img32/6197/37841144.png

如何知道阴影放置正确或渲染了正确的颜色/轮廓？或者，当一个方向旋转时，3D 效果是否正确渲染？其他情况可能是，如果重新调整艺术字的大小，如何衡量其“正确性”？

【问题讨论】：

直观但系统化？
是的，视觉上但系统化

标签： user-interface testing testing-strategies

【解决方案1】：

有几种方法：

如果它实际上非常精确地指定了应该渲染什么以及以何种方式渲染，那么您可以将像素与参考渲染进行比较。
对于 SVG 之类的东西，它并没有那么明确地指定。这里通常的方法是使用参考渲染并手动比较它们。您可以轻松地叠加两者，从另一个中减去一个并以这种方式发现明显的差异。不过，这不是一个自动过程。
您可以查看代表绘制图像的数据，而不是直接查看屏幕上的图像。绘制的是（在您的示例中）矢量图形。这意味着有几种形状应该具有明确定义的属性、形状和颜色，您可以简单地将形状数据与参考进行比较。这类事情可以自动完成。我认为 Google 使用类似的方法来比较 Chrome 的渲染与网页的参考渲染；他们不比较像素数据，他们比较更高级别的数据，浏览器将呈现什么以及如何呈现。

【讨论】：

在第 3 种测试方法中，您是否将其与被视为正确渲染的内容进行对比？这不是增加了主观性的因素吗？另外如果没有可以参考的渲染怎么办，唯一的选择是方法3吗？
第三个实际上是查看将用于渲染所见内容的数据结构。因此，您只是将比较与另一个抽象层进行比较。您会比较阴影形状实际上位于正确的位置等。当然，您需要知道什么是“正确的”。但否则，无论如何，您将很难将图像分类为正确或不正确的输出。是的，参考效果图实际上有时是手工绘制的。它们必须与您正在测试的规范准确无误。

【解决方案2】：

有两种方式：图像和基于渲染的一种。

图像方式：您必须找到一种将图像渲染到内部像素缓冲区的方法（这样您就可以“无头”运行测试，即不会弹出实际的 UI）。

然后选择几个像素并确保它们的颜色正确。在您的示例中，选择文本周围的几个白色像素以确保渲染不会泄漏。像assertThatRectangleIs(area, color) 这样的辅助方法将有助于覆盖一些基础。这个想法是选择特定区域（如H的左侧垂直条）并且不要太挑剔。

基于渲染的方式假设您的 gfx 库有效。所以你要做的就是用这样的东西来模拟实际的渲染代码：

public class MockGC extends GC {
    List<Op> ops = new ArrayList<Op> ();
    void drawLine (int x1, int y1, int x2, int y2) {
        ops.add(new Line(x1, y1, x2, y2, copyGC (gc)));
    }
}

因此您只需将命令和所有相关选项保存在易于比较的数据结构中。甚至：

public class MockGC extends GC {
    StringBuilder buffer = new StringBuilder ();

    void drawLine (int x1, int y1, int x2, int y2) {
        buffer.append("line "+x1+","+y1+" - "+x2+","+y2+", color="+foreground()+"\n");
    }
}

稍后，您可以验证是否已发出正确的渲染命令以及是否使用了 GC（颜色、字体、渲染提示）。

后一种方式更快且 100% 精确，但编码工作量更大。

【讨论】：

你能扩展你的第二种方法吗？
你想知道什么？这很简单：只需将命令和所有相关选项保存在一个易于检查的结构中。