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

Question

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

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

Answer 1

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

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

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

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

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

实际上还有很多工具,例如PhantomCSS,Huxley,dpxdt等等.

Answer 2

我将把我的投票添加到Arran的评论中,当你/可以/做到这一点时,你很可能/不会/花费你宝贵的时间在这上面.基于Watir,WebDriver,Selenium RC,Visual Studio和Telerik的Test Studio,我在许多不同的工具中使用UI自动化已经很多年了.

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

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

更新:请阅读dcoder的响应.他/她是绝对正确的.该领域已经取得了一些重要的(早该推迟的!)进展.您需要评估这些适合的工具.