自动视觉布局测试 是否有可能进行单元测试，以确保某些东西是按所需的方式进行可视化呈现的（对于所需的某些定义）？专门针对HTML和CSS，按“预期”呈现页面
我个人认为，这样的工具允许您以声明式的方式定义某项测试的外观，然后在测试的实际文件上运行一个复杂的启发式程序，以确定它与声明式定义的“接近程度”自动视觉布局测试 是否有可能进行单元测试，以确保某些东西是按所需的方式进行可视化呈现的（对于所需的某些定义）？专门针对HTML和CSS，按“预期”呈现页面,html,css,unit-testing,Html,Css,Unit Testing,我个人认为，这样的工具允许您以声明式的方式定义某项测试的外观，然后在测试的实际文件上运行一个复杂的启发式程序，以确定它与声明式定义的“接近程度” 有没有其他方法可以对HTML文件进行机器测试，比如测试内容在视觉上是否一致 我并不是在问一个几乎不可能的问题，即某件东西是否“看起来不错”，而是它看起来是否一致，或者它是否符合给定的模式 最后一个问题是，如果这些工具不存在，它们值得写吗？这种性质的工具是否真的会给您带来有意义的结果，而不会受到很大的误差限制。也就是说，他们能否准确地预测代码的某些
- 有没有其他方法可以对HTML文件进行机器测试，比如测试内容在视觉上是否一致
- 最后一个问题是，如果这些工具不存在，它们值得写吗？这种性质的工具是否真的会给您带来有意义的结果，而不会受到很大的误差限制。也就是说，他们能否准确地预测代码的某些更改是否破坏了您的视觉布局，而不会给出大量的错误否定或丢失明显破坏的内容
我不这么认为，因为查看页面并查看所有元素是否正确呈现需要几秒钟的时间，而您可能至少要花几个星期从头开始编写和测试此类工具。我认为您不需要复杂的图像分析。正如前面提到的，浏览器之间还是会有一些细微的差别。还有一些你认为太小的东西可能非常重要，比如一个小图标 如果您想要跨浏览器测试，那么自动化将非常困难。但是您可以创建一个工具来检查意外的视觉变化。保存所需的DOM状态，然后将其与更改的版本进行比较，这有助于突出显示问题。若您更改了一个CSS类，希望它只对页面产生影响，那个么运行测试将在其他页面上显示不希望的敲打影响 我个人认为，这样的工具允许您以声明式的方式定义某项测试的外观，然后在测试的实际文件上运行一个复杂的启发式程序，以确定它与声明式定义的“接近程度” 有一种方法可以使用Galen框架测试您想要的东西，Galen框架是我帮助开发的工具。这是一个有自己语言的特殊工具，可以表达网站的外观。它基于Selenium，如果需要在不同的浏览器中进行检查，可以在Selenium网格中运行。 目前该工具正在做的是——获取页面上指定元素的位置，并相互检查它们。 因此，例如，如果要检查菜单面板是否位于页眉下方，并延伸到浏览器的宽度，且具有50像素的高度，请执行以下操作：
menu
below: header 5 px
width: 100% of screen/width
height: 50px
@ 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
menu
below: header 0 to 5 px
width: 90 to 100% of screen/width
height: 45 to 55px
menu
below: header 5 px
width: 100% of screen/width
height: 50px
@ 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
您还可以在官方网站上找到完整的文档。如果您对几种浏览器上的CSS和HTML呈现感兴趣，您可以自动执行比较屏幕截图的测试 我参与了一个类似的测试，首先我们所有的CSS都是从less编译而来，然后进行测试。基本上，这个过程是生成基本屏幕截图，然后在有更改时比较新的屏幕截图 下面是我在NodeJS中创建的一个小型CSS测试项目，作为基线：
干杯您可以尝试以下工具：
，两者都使用视觉匹配进行布局测试 如果您对CSS HTML可视化测试感兴趣，可以为您做这件事。这是一个建立在chrome headless之上的nodejs库，高度相关：你说：
“以声明方式测试某物的外观”