Compare a screenshot with saved image on Devops build server

Question

Background

When releasing a C# MVC website through Devops release management the bundling failed. This caused the CSS file not to load on the released website, causing the UI to render incorrectly.

To ensure this doesn't happen again I want to run a selenium test on the build and take a screenshot of the homepage. I would then like to compare the screenshot with a specified image (of how the homepage should look) on the build, and fail if the images don't match.

Question

What can I use to compare two images (on live screenshot and one saved image) on the CI Devops build server?

Answer 1

I have used https://www.imagemagick.org for image compare. They have a Nuget package which you can add to your project and you can write code similar to below in C# or F#

let img1 = new MagickImage(Image1Path)
let img2 = new MagickImage(Image2Path)        
let img3 = new MagickImage()        

let diff = img1.Compare(img2, ErrorMetric.Absolute, img3)        

img3.Write(diffImgPath)

Answer 2

Image comparison is a very complex topic. Many techniques can be used.

For C#, you can look at hugin-tools and imagemagick packages. References here.

If you are looking for tools for focused on testing, you can look vivrichards600/AutomatedVisualTesting. Visual Testing is a growing topic - so many tools are not as mature as with other topics.