User interface 如何在代码部署后比较网站的用户界面元素？

我想比较一个网站在代码部署前后UI元素的任何变化。是否有任何在线工具允许进行此类比较？

我相信您不希望手动比较更改，而是希望自动化该过程。您可以使用SeleniumWeb驱动程序查找网页上的元素，然后测试它们是否出现在更改的页面上。提供框架，允许结合selenium代码测试图像更改。

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

如果是，下面是一种使用Galen框架自动化web应用程序布局测试的方法。用于布局测试的开源解决方案

这个工具有自己的语言，非常容易学习和理解。它是基于Selenium的，如果您想在不同的浏览器中测试应用程序，可以在Selenium网格中运行测试。甚至您也可以使用chrome驱动程序或IEDriver在本地运行它，而无需使用Selenium网格或

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

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

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

现在说明你的图标在标题中的确切位置，以及它的高度和宽度。（我已经假设了这里的所有值）

该工具也可用于测试响应性设计

您可以在官方网站上找到完整的文档

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

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

正如你提到的，你想

---

比较代码部署前后网站UI元素的任何变化，您可以在每次运行/测试后使用Galen生成的html报告。

UI元素的确切含义是什么？您只需要HTML的一部分还是全部？yiu想比较页面加载后JS创建的元素吗？…我更愿意说最终用户看到的视觉元素，例如字体大小、颜色和对齐方式、按钮间距、图标大小及其在网页上的位置、图像大小、按钮上的标签等。谢谢Eugene，这是一个非常有用的想法

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

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