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

Question

我很少有资源在数百个不同网页的许多项目上进行测试，最繁琐的部分是验证网站的外观和感觉是否正常。特别是HTML元素的布局不会被破坏。

有没有办法通过不开发高度复杂的AI工具来自动化这种测试？ ：）

Answer 1

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

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

1. 视觉比较的类型：无论是像素到像素，基于阈值还是更复杂的算法。
2. 自动化：其中一些工具与现有的自动化框架（如Selenium/Webdriver）集成，其他工具则使用自己的专有自动化框架。
3. 开源/商业。

以下是工具及其描述的部分列表：

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

实际上还有更多工具，例如PhantomCSS，Huxley，dpxdt等。

Answer 2

我会将我的投票添加到Arran的评论中，虽然您/可以/这样做，但您可能/不应该/花费您宝贵的时间。我在许多不同工具中使用UI自动化很多年，包括Watir，WebDriver，Selenium RC，Visual Studio和Telerik的Test Studio。

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

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

更新：请从dcoder读取响应。他/她是绝对正确的。该领域已经取得了一些重要的（早该推迟的！）进展。您需要评估这些适合的工具。

Answer 3

有一个YouTube视频可以很好地解决这个问题：来自Google Developers Live的The Secret to Safe Continuous Deployment。在视频中Breett Slatkin教我们如何使用视觉差异来进行“外观和感觉”测试。

我希望这可以帮到你。

Answer 4

你可以这样做，虽然它比它的价值更麻烦：

编写一个脚本来测试每个元素的宽度/高度/ xy位置是否与元素的某些定义值相同。

Answer 5

我还会认为布局图像外观徽标的UI自动化的意见，例如.i有很多这样的情况，其中基于登录类型等显示特定的ui元素但投资是乏味的并且改变可能适得其反

Answer 6

您好要自动化网络浏览器，您可以使用selenium（http://seleniumhq.org/），例如，看看用户点击的位置等... 要验证html，您可以找到一个验证器，它接受一批页面并通过验证运行它们......如http://www.htmlhelp.com/tools/validator/或类似的东西

希望有所帮助

Answer 7

Selenium可用于检查网站的外观..

使用Verify，Assert命令测试此

此外，QTP也可用于此目的。

Answer 8

为什么不尝试图像比较，尝试拍摄屏幕截图并将其与存档图像进行比较。 C# - Capture screenshot of active window