0

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?

Improve this question
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)
Improve this answer
  • Thank you, can this be integrated with the DevOps build process? – j9070749 Nov 28 '18 at 8:38
  • Yes. Many tests have such image comparison method to validate look and feel. You can compare image with your baseline image (which you would have created based on ideal scenario) and mark tests Pass/Fail – Manik Jadhav Nov 29 '18 at 9:18
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.