使用 CSS 混合模式进行视觉回归测试

上周我看到了 Una Kravets 在 Generate Conf 上发表的一个非常鼓舞人心的演讲，主题是使用 CSS 滤镜和混合模式。其中一个演示引起了我的注意，因为 Una 向我们展示了如何将两个布局叠加在一起，并使用混合模式来发现它们之间的所有差异。

我对这个想法感到非常兴奋，并开始思考：我们能否只用一行 CSS 代码创建视觉回归测试？事实证明，我们可以。

查看 Sarah Drasner (@sdras) 在 CodePen 上创建的 CodePen：使用 CSS 混合模式进行视觉回归测试。

上面的 CodePen 显示，我们的布局中的文本块仅发生了细微变化，但按钮进行了更大幅度的修改，插图中的一些小三角形也发生了改变。

当我发布关于这个想法的推文时，Bennett Feely（开发了诸如 Clippy（用于 CSS 剪辑路径生成）和 使用背景混合模式的 CSS 渐变 等令人印象深刻的工具的作者）已经创建了类似的东西，但它使用了 background-blend-mode: difference;。

您可以将鼠标悬停在上面以查看两张分离的图像。

查看 Bennett Feely (@bennettfeely) 在 CodePen 上创建的 CodePen：图像差异。

为了使事情变得更加有趣，有人指引我阅读了 Franklin Ta 的这篇文章，这篇文章可能是整个想法的起源，并且它完美地解释了使用 CSS 创建视觉差异的概念。这篇文章发表了两年多前，值得一读。

然后，Una 将这一切更进一步，创建了一个可以在浏览器中使用的工具，可以轻松地创建视觉回归差异，而无需大量脚本，该工具称为 Diffy。非常棒。

所有这一切都只需一行 CSS 代码！