Compare a screenshot with saved image on Devops build server



  • 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?



  • 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)
    


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2