1

我被要求在我们网站的 javascript 部分实施验证测试。我一直在考虑使用 selenium WebDriver。我们要测试的一件事是 UI：检查它是否“看起来”不错（必须对齐的东西是对齐的，框在正确的位置）。

目前，我发现的唯一选择是使用 Selenium 拍摄快照，然后将其与预先手动拍摄的测试快照进行比较，或者手动检查快照。快照比较不是很可维护，因为布局的任何更改都需要重新拍摄所有测试快照，并且手动检查非常耗时。

有谁知道实现这一目标的任何方式（在 Selenium 或其他方式中）？

4

2 回答 2

3

这不是很好，但在某种程度上可以做到。

对于定位，您可以使用 WebElement 的getLocation()（Java 文档，但相同的方法存在于所有 Selenium 绑定中）。请注意，大多数浏览器的呈现方式略有不同，因此在使用旧版 IE 时不要期望像素完美。此外，当没有找到 CSS 中定义的第一个字体并使用了替代字体时，位置可能会略有不同。不要严重依赖这种方法。但是，如果您能够使您的测试健全并且您的环境稳定，它就会起作用。

对于对齐，我编写了一个简单的 Java 方法来WebDriver断言一个元素在视觉上位于另一个元素的内部。

不应该有误报，但是在内部元素在视觉上位于内部但其（不可见）实际边框“向外窥视”的情况下可能会出现一些误报。但是，根据我的实际经验，我没有遇到过这个问题，因为好的网站表现良好并且不需要这样的黑客:)。尽管如此，它还是有点骇人听闻，而且 Selenium 并不是为这种类型的工作而设计的，因此实施更复杂的检查可能会更加困难。

public static void assertContains(WebElement outerElem, WebElement innerElem) {
    // get borders of outer element
    Point outerLoc = outerElem.getLocation();
    Dimension outerDim = outerElem.getSize();
    int outerLeftX = outerLoc.getX();
    int outerRightX = outerLeftX + outerDim.getWidth();
    int outerTopY = outerLoc.getY();
    int outerBottomY = outerTopY + outerDim.getHeight();

    // get borders of inner element
    Point innerLoc = innerElem.getLocation();
    Dimension innerDim = innerElem.getSize();
    int innerLeftX = innerLoc.getX();
    int innerRightX = innerLeftX + innerDim.getWidth();
    int innerTopY = innerLoc.getY();
    int innerBottomY = innerTopY + innerDim.getHeight();

    // assures the inner borders don't cross the outer borders
    final String errorMsg = "ughh, some error message";
    final boolean contains = (outerLeftX <= innerLeftX)
            && (innerRightX <= outerRightX)
            && (outerTopY <= innerTopY)
            && (innerBottomY <= outerBottomY);
    assertTrue(errorMsg, contains);
}
于 2012-06-27T22:45:11.400 回答
2

如果您使用术语验证的含义：“测试我们已经构建了正确的东西”，我会说自动化几乎是不可能的。如果不是让一些人真正使用它，您将如何判断它是否看起来令人愉悦或易于使用？

这种视觉检查也是人类擅长的。如果您在开发网站时使用该网站，您会很容易注意到布局等是否有问题。

对于功能自动化测试是个好主意。

于 2012-06-27T16:32:09.917 回答