Letzte Woche habe ich Una Kravets auf der Generate Conf einen sehr inspirierenden Vortrag über die Verwendung von CSS-Filtern und Mix-Blend-Modi gehört. Eine Demo hat mich besonders aufmerksam gemacht, denn Una zeigte uns, wie wir zwei Layouts übereinanderlegen und mit Blendmodi alle Unterschiede zwischen ihnen erkennen können.
Ich war von dieser Idee ziemlich begeistert und dachte darüber nach: Könnten wir visuelle Regressionsprüfungen mit nur einer Zeile CSS erstellen? Es stellt sich heraus, dass wir das können.
Sehen Sie sich den Pen Visual Regression Testing with CSS Mix-Blend-Modes von Sarah Drasner (@sdras) auf CodePen an.
Der obige Pen zeigt, dass sich der Textblock unseres Layouts nur geringfügig geändert hat, aber der Button wurde dramatischer verändert und die Illustration hatte kleine Dreiecke, die verändert wurden.
Als ich über diese Idee getwittert habe, hatte Bennett Feely, Autor von so beeindruckenden Tools wie Clippy (für die Erstellung von CSS clip-path) und CSS Gradients With Background Blend-Mode, bereits etwas Ähnliches erstellt, aber es verwendete stattdessen background-blend-mode: difference;.
Sie können mit der Maus darüber fahren, um die beiden Bilder getrennt zu sehen
Sehen Sie sich den Pen Image diffing von Bennett Feely (@bennettfeely) auf CodePen an.
Um die Sache noch interessanter zu machen, wurde ich auf diesen Beitrag von Franklin Ta aufmerksam gemacht, der möglicherweise Patient Null für diese ganze Idee ist und das Konzept hinter der Erstellung visueller Diffs mit CSS wunderbar erklärt. Dieser Beitrag erschien vor zwei vollen Jahren und ist lesenswert.
Una hat das dann noch einen Schritt weiter gebracht und ein Tool entwickelt, das wir im Browser verwenden können, um visuelle Regressions-Diffs ohne viel Skripting zu erstellen, namens Diffy. Ziemlich raffiniert.
Alles mit einer Zeile CSS!
Wir können ein ähnliches Ergebnis mit Filtern erzielen. In diesem Fall sollte die Überlagerung 50% Deckkraft haben und der Filter: invert(100%) darauf angewendet werden. Die gleichen Teile werden grau und die Unterschiede leuchten wie ein Weihnachtsbaum :D. Die beiden Methoden funktionieren fast gleich, außer dass die Verwendung von Blendmodi eine Zeile Code kostet und die Verwendung von Filtern zwei Zeilen Code kostet :D
Invertieren / 50% Deckkraft ist der Trick, den ich verwende, um Bilder in Photoshop auszurichten; ich habe nie gehört, dass er im Browser verwendet wird. Gut zu wissen, danke!
Danke, dass Sie diese erstaunlichen Informationen über Regressionstests veröffentlicht haben. Es sind wirklich sehr hilfreiche Informationen, gute Arbeit! .. – http://bit.ly/1widA2V