使用 GEB 自动化 CSS 回归测试

Question

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

在 JS 世界中存在 Javascript 的 BackStopJS。 GEB 有类似的东西吗？

Answer 1

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

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

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

如果有很多页面不断变化的图像给您误报，您可能需要使用占位符。

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