有没有办法让网页的“外观”测试自动化？

Question

我只有很少的资源在许多项目上执行测试，有数百个不同的网页，最乏味的部分是验证网站的外观和感觉是OK的。特别是HTML元素的布局没有被破坏。

有没有一种方法可以通过不开发高度复杂的AI工具来自动化这种测试？:)

Answer 1

我将在Arran的评论中加入我的投票，虽然你/可以/做得到这一点，但你可能应该/不应该/在这上面花费你的宝贵时间。我基于多年来在许多不同工具中围绕UI自动化所做的工作，这些工具包括Watir、WebDriver、Selenium RC、Visual Studio和Telerik的Test Studio。

当您只是尝试进行功能测试时，UI自动化是非常困难和脆弱的。尝试自动化外观来验证CSS、布局定位、图像外观等是非常脆弱的--即使浏览器之间最小的差异和对UI的最小更改也会让您花费大量时间来更新失败的测试。

是的，这是可能的。但是，通过将您的自动化努力集中在功能上来保持您的理智。将视觉检查留给最快速、最简单的工具:人眼。

更新：请务必阅读来自解码器的响应。他/她是绝对正确的。已经有了一些重要的(早就应该有的！)该领域的进展。您需要评估这些工具是否合适。

Answer 2

虽然这个问题已经有两年的历史了，但我认为这个领域已经有了一个巨大的飞跃，这证明了一个更新的答案是正确的。

有许多工具可以让您对web/移动应用程序执行自动化可视化测试，从而节省宝贵的时间。这些工具在几个方面有所不同：

1. 类型的可视化比较:无论是逐像素的、基于阈值的还是更复杂的，这些工具中的一些与现有的自动化框架(如Selenium/Webdriver )集成，其他的则使用自己专有的自动化frameworks.
2. Open源代码/商业版。

以下是工具的部分列表及其说明：

1. Applitools Eyes -我个人的最爱，也是目前为止最好、最先进的工具。这是一个商业工具，但它也有一个免费的计划。由于此工具的目标是像人类一样进行可视化测试，因此它的比较引擎会为您完成所有工作，而不需要您定义任何阈值或标记屏幕的某些部分或类似的东西。测试维护是通过web应用程序完成的，并提供了非常强大的维护功能(自动识别不同步骤中的相似更改等)这是我在任何其他工具中都没有遇到的。它有针对Selenium (Java/Python/Ruby/Javascript)、Appium、Protractor等的SDK，甚至还有an Extension，它允许您在完全不需要编码的情况下执行测试。
2. WebdriverCSS -一个基于WebdriverIO (用Javascript编写的Selenium包装器)的开源工具。它使用GraphicsMagick来比较图像，您可以定义一个阈值，从这个阈值来看，图像是不同的。如果您已经在使用WebDriverIO，那么在tests.
3. Sikuli中添加可视化检查点是非常容易的--这是一个开源工具，具有基于屏幕中可视化元素的专有自动化框架。

实际上还有相当多的工具，比如PhantomCSS、Huxley、dpxdt等等。

Answer 3

有一个YouTube视频提供了一个很好的方法来解决这个问题:来自谷歌开发者直播的The Secret to Safe Continuous Deployment。在视频中，Breett Slatkin教我们如何使用视觉差异进行“外观”测试。

我希望这能对你有所帮助。