使用 GEB 自动化 CSS 回归测试答案

【问题标题】：Automating CSS Regression Testing with GEB使用 GEB 自动化 CSS 回归测试
【发布时间】：2019-02-22 11:42:18
【问题描述】：

我们有一套使用 GEB 的 UI 测试（功能性）。然而，代码是遗留的，没有遵循 CSS 组件化，并且 CSS 中的一项更改可能会在不相关的领域产生未被检测到的副作用。是否有任何插件或工作流程可以与 GEB 集成以提供自动化 CSS 回归测试？

在 JS 世界中，存在用于 Javascript 的 BackStopJS。 GEB有什么类似的吗？

【问题讨论】：

您能否举一个具体的例子，您希望执行什么样的检查？
是的，你能更详细地解释一下你想要达到什么目的吗？您拥有一组 GEB 测试这一事实与进行自动化 CSS 回归测试有何关系？为什么您不能或不想简单地使用 BackStopJS 进行 CSS 回归测试？
实际上 BackstopJS（我阅读文档的印象）是它检查特定页面。在我们的例子中，我们运行 GEB 场景，例如，用户进行旅程单击各种按钮并到达页面。我们想确保在我们运行 GEB 测试时，中间页面没有因为 CSS 更改而改变。这些页面可以通过用户的旅程访问，并且不能直接访问（权限/会话数据）。我澄清了我的问题了吗？
我个人不太理解您的问题...能否分享您尝试过的代码和相关页面的 HTML？
不幸的是，我无法共享任何代码 :-( 对我来说，这个问题得到了回答。但我很想看看人们如何在完整的 JS、GUI 测试和回归测试中做到这一点（没有 GEB，没有 SPA )。

【解决方案1】：

您可以简单地对要验证的每个有意义的页面或页面状态进行屏幕截图，然后在测试运行之间进行比较。

在 Geb 中调用 browser.report("some page")，它会转储屏幕截图。

这将是使用您已有的设置在呈现的页面中检测任何与 CSS 相关或其他方面的更改的最简单方法。

如果有很多页面的图片变化会给您带来误报，您可能需要使用占位符。

此外，您可以计算图像之间的差异，和/或从比较中排除区域，而不是直接比较屏幕截图。

【讨论】：