自动化视觉布局测试答案

【问题标题】：Automated visual layout testing自动化视觉布局测试
【发布时间】：2017-07-26 16:32:19
【问题描述】：

是否可以对某些东西在视觉上呈现为想要的内容进行单元测试（对于想要的某些定义）？专门针对 HTML 和 CSS 将您的页面呈现为“预期”

我个人认为这样的工具可以让您以声明性方式定义测试，了解事物的外观，然后在您的测试的实际文件上运行复杂的启发式方法，以确定它与声明性定义的“接近程度” .

是否有任何其他方法可以在 HTML 文件上进行机器测试，例如内容是否在视觉上一致。

我不是在问一个几乎不可能的问题，即某事物是否“看起来不错”，而是它是否看起来一致或是否符合给定的模式。

最后一个问题是，如果这些工具不存在，它们是否值得编写？这种性质的工具是否会真正为您提供有意义的结果，并且不受很大误差的限制。 IE。他们能否准确预测代码的某些更改是否破坏了您的视觉布局，而不会给出大量的误报或遗漏明显损坏的内容。

【问题讨论】：

高度相关：stackoverflow.com/questions/4043706/…
你说："test in a declarative manner of how something is supposed to look" - 声明“某物应该是什么样子”被称为 HTML/CSS。任何其他方式来声明事物的外观，要么会错过 HTML/CSS 的细微差别，要么会像两者结合起来一样复杂。这种类型的工具（如你所说）是不可行的。还需要考虑不同的渲染引擎。 Gecko 和 WebKit 是开源的，所以你可以在那里使用一些东西，但是 Trident (Internet Explorer) 呢？
@thirtydot 微软的分区让IE开源？不过我明白你的意思。我更建议对页面作为图像的外观进行一些声明性定义，然后将 HTML 转换为图像并进行比较。

标签： html css unit-testing

【解决方案1】：

我个人认为这样的工具可以让您以声明性方式定义测试，了解事物的外观，然后在您的测试的实际文件上运行复杂的启发式方法，以确定它与声明性定义的“接近程度” .

有一种方法可以使用 Galen 框架准确地测试您想要什么，这是我帮助开发的一个工具。它是一种具有自己语言的特殊工具，可以表达网站的外观。它基于 Selenium，如果您需要在不同的浏览器中查看它，可以在 Selenium Grid 中运行。目前该工具正在做什么 - 它正在获取页面上指定元素的位置并相对于彼此检查它们。因此，例如，如果您想检查菜单面板是否位于标题下方并延伸到浏览器的宽度并具有 50 像素高度，您可以这样做：

menu
    below: header 5 px
    width: 100% of screen/width
    height: 50px

如果你不想断言确切的值，你可以这样做

menu
    below: header 0 to 5 px
    width: 90 to 100% of screen/width
    height: 45 to 55px

该工具对于测试响应式设计很有用，因为您可以使用自定义标签来匹配您需要的确切规格。例如，如果我们想表达桌面上的“侧面板”应该位于静态宽度为 300 像素的屏幕的右侧，但在移动设备上它应该下降到“内容”下方并拉伸到一个完整的宽度浏览器，你这样做：

@ desktop
---------------------
content
    inside: screen 0px left

side-panel
    inside: screen 0px right
    near: content 0px right
    width: 300px

@ mobile
--------------------
content, side-panel
    width: 100% of screen/width

side-panel
    below: content 0px

关于该工具的信息不多，因为它是一个新工具。目前只有一篇文章解释了如何使用 Galen Framework http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/ 测试响应式网页。

你也可以在官网http://galenframework.com找到完整的文档

【讨论】：

【解决方案2】：

您可以尝试以下工具： Screenster,mogotest。两者都使用视觉匹配进行布局测试。

【讨论】：

【解决方案3】：

我认为您不需要复杂的图像分析。如前所述，无论如何浏览器之间都会存在细微差别。此外，您可能认为太小而忽略的一些东西可能非常重要，例如小图标的变化。

如果您想要跨浏览器测试，自动化将非常困难。但是您可以创建一个工具来检查意外的视觉变化。保存所需的 DOM 状态，然后将其与更改的版本进行比较有助于突出问题。如果您更改一个 CSS 类并期望它只对页面产生影响，那么运行您的测试会发现对其他页面产生不希望的连锁影响。

【讨论】：

【解决方案4】：

好吧，如果您对在多个浏览器上呈现 CSS 和 HTML 感兴趣，您可以自动化比较屏幕截图的测试。

我参与了一个类似的测试，首先我们所有的 CSS 都是从 less 编译的，然后进行测试。基本上这个过程是生成基本截图，然后当有变化时比较新的截图。

这是我在 NodeJS 中创建的一个小型 CSS 测试项目作为基线： https://github.com/adcarabajal/generator-css-testing

干杯

【讨论】：

【解决方案5】：

如果您对 CSS HTML 可视化测试感兴趣，differencify 会为您服务。它是一个建立在 chrome headless 之上的 nodejs 库

【讨论】：

【解决方案6】：

最后一个问题是，如果这些工具不存在，值得写吗？

我不这么认为，因为查看页面并查看所有元素是否正确呈现需要几秒钟的时间，而您可能会花费至少几周的时间从头开始编写和测试此类工具。

【讨论】：

初始成本应与节省 X 数量的人将使用开源工具的秒数进行对比。是否值得做，这是一个准确性和营销的问题。
我无法克制自己对这一篇的评论。这听起来像是老派程序员关于单元测试的典型论点。是的，检查一个页面需要几秒钟的时间，但是如果您的网站有很多屏幕或动态页面怎么办：您可能会发现某些参数组合会溢出并完全破坏布局。
史蒂夫，我完全同意。看一页需要几秒钟。但我们通常需要查看 20 多页 50 多次。
在不同的操作系统、不同的屏幕分辨率和不同的设备类型上测试不同的浏览器不需要几秒钟。这是一个费力的过程——这就是为什么它经常根本不做的原因。根据正在测试的应用程序，投入时间和精力来创建良好的自动化测试设置绝对值得投入。
如果您有一个不是公司主要收入来源的小型网站，我认为 Nikita 是正确的。但是，如果您有一个大型网站，上面有很多钱，您可能需要考虑自动化布局测试。从长远来看，您花费数周时间构建工具或购买合适工具的资金将在一些 QA 成本和错误方面为您节省更多。