我想比较网站在代码部署前后的 UI 元素的任何变化。是否有任何在线工具可以进行此类比较?
最佳答案
根据您对 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 报告。
关于user-interface - 代码部署后如何比较网站的用户界面元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28171270/