Question

我希望在代码部署之前和之后比较UI元素的任何更改。是否有任何在线工具可以进行这样的比较？

Answer 1

根据您对Yan的问题的评论，我认为您正在寻找一种自动化网站布局测试的方法。

如果是，这是一种使用Galen Framework自动化Web应用程序布局测试的方法。用于布局测试的开源解决方案。

此工具有自己的语言，非常容易学习和理解。它是基于Selenium的，如果要在不同的浏览器中测试应用程序，可以在Selenium Grid中运行测试Sauce Labs。即使你可以使用chrome驱动程序或IEDriver在本地运行它而不使用Selenium网格或Sauce Labs

此工具获取页面上指定元素的位置，并相互检查它们。

示例：如果要检查图标大小及其在网页上的位置（假设它在标题内），您可以这样做：

首先使用任何可用的定位器（css路径，ID，xpath）定义对象

=======================================
header          css     #header
icon            id      icon
=======================================

现在说明标题中应该存在哪个图标，以及它的高度和宽度应该是什么。（我在这里假设了所有的值）

icon
    inside: header 5px top, 10px right
    width:  20px
    height: 25px

此工具还可用于测试响应式设计。

上找到完整的文档

最好的部分是你甚至可以创建JAVA测试。 Galen JavaScript API也可以与github中的示例项目一起使用。

在我的地方，HTML设计师编写网页的规范（用Galen语言），在应用程序生命周期的后期阶段，开发人员/测试人员使用相同的规范

如你所说，你想要 在代码部署之前和之后比较UI元素的任何更改，您可以使用Galen在每次运行/测试后生成的html报告。

Answer 2

我相信您不希望手动比较更改，但希望自动执行此过程。您可以使用selenium web驱动程序在网页上查找元素，然后测试它们是否存在于已更改的元素上。 Applitools提供了允许结合硒代码测试图像变化的框架。