如何测试正确呈现的内容?

时间:2009-11-16 12:53:24

标签: user-interface testing testing-strategies

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

例如(2D示例):

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

如何知道正确放置阴影或呈现正确的颜色/轮廓?或者,当一个人在一个方向上旋转时,3D效果是否正确呈现?其他的事情可能是艺术这个词被重新调整大小,如何衡量它的“正确性”?

2 个答案:

答案 0 :(得分:3)

有几种方法:

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

答案 1 :(得分: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%精确,但编码工作要多得多。