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

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

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

您可以在官方网站上找到完整的文档http://galenframework.com

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

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

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